[{"data":1,"prerenderedAt":608},["ShallowReactive",2],{"docs-nav":3,"\u002Fdocs\u002Fvite-plugin":316},[4,9,15,19,24,28,33,37,41,45,49,53,57,60,63,67,70,74,77,81,85,89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,156,159,162,165,168,171,175,178,181,184,186,189,192,195,198,201,204,207,210,213,216,219,222,225,228,231,234,237,240,244,247,250,253,257,261,264,267,270,273,276,279,282,285,287,290,293,296,299,302,305,308,311,313],{"path":5,"title":6,"section":7,"order":7,"sidebar":8},"\u002Fbrand","Brand",null,false,{"path":10,"title":11,"section":12,"order":13,"sidebar":14},"\u002Fdocs\u002Fapi\u002Fcomposables","Composables","API",2,true,{"path":16,"title":17,"section":12,"order":18,"sidebar":14},"\u002Fdocs\u002Fapi\u002Futilities","Utilities",1,{"path":20,"title":21,"section":22,"order":23,"sidebar":14},"\u002Fdocs\u002Fcli","CLI","Getting Started",9,{"path":25,"title":26,"section":22,"order":27,"sidebar":14},"\u002Fdocs\u002Fcompatibility","Compatibility",4,{"path":29,"title":30,"section":31,"order":32,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fbody","Body","Components",3,{"path":34,"title":35,"section":31,"order":36,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fbutton","Button",13,{"path":38,"title":39,"section":31,"order":40,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fcodeblock","CodeBlock",18,{"path":42,"title":43,"section":31,"order":44,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fcodeinline","CodeInline",19,{"path":46,"title":47,"section":31,"order":48,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fcolumn","Column",8,{"path":50,"title":51,"section":31,"order":52,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fcontainer","Container",5,{"path":54,"title":55,"section":31,"order":56,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Ffont","Font",11,{"path":58,"title":59,"section":31,"order":13,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fhead","Head",{"path":61,"title":62,"section":31,"order":23,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fheading","Heading",{"path":64,"title":65,"section":31,"order":66,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fhr","Hr",16,{"path":68,"title":69,"section":31,"order":18,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fhtml","Html",{"path":71,"title":72,"section":31,"order":73,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fimg","Img",14,{"path":75,"title":76,"section":31,"order":27,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Flayout","Layout",{"path":78,"title":79,"section":31,"order":80,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Flink","Link",12,{"path":82,"title":83,"section":31,"order":84,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fmarkdown","Markdown",20,{"path":86,"title":87,"section":31,"order":88,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fnotoutlook","NotOutlook",22,{"path":90,"title":91,"section":31,"order":92,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fnowidows","NoWidows",26,{"path":94,"title":95,"section":31,"order":96,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Foutlook","Outlook",21,{"path":98,"title":99,"section":31,"order":100,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Foutlookbg","OutlookBg",23,{"path":102,"title":103,"section":31,"order":104,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Foverview","Overview",0,{"path":106,"title":107,"section":31,"order":108,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fplaintext","Plaintext",31,{"path":110,"title":111,"section":31,"order":112,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fpreheader","Preheader",17,{"path":114,"title":115,"section":31,"order":116,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fqrcode","QrCode",30,{"path":118,"title":119,"section":31,"order":120,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fraw","Raw",28,{"path":122,"title":123,"section":31,"order":124,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Frow","Row",7,{"path":126,"title":127,"section":31,"order":128,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fsection","Section",6,{"path":130,"title":131,"section":31,"order":132,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fspacer","Spacer",15,{"path":134,"title":135,"section":31,"order":136,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Ftailwind","Tailwind",29,{"path":138,"title":139,"section":31,"order":140,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Ftext","Text",10,{"path":142,"title":143,"section":31,"order":144,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fvml","Vml",24,{"path":146,"title":147,"section":31,"order":148,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fwithurl","WithUrl",27,{"path":150,"title":151,"section":152,"order":128,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Faws-ses","AWS SES","Deploy",{"path":154,"title":155,"section":152,"order":124,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fcloudflare","Cloudflare",{"path":157,"title":158,"section":152,"order":32,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fmailgun","Mailgun",{"path":160,"title":161,"section":152,"order":18,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fnodemailer","Nodemailer",{"path":163,"title":164,"section":152,"order":27,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fpostmark","Postmark",{"path":166,"title":167,"section":152,"order":52,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fresend","Resend",{"path":169,"title":170,"section":152,"order":13,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fsendgrid","SendGrid",{"path":172,"title":173,"section":174,"order":32,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Fconfiguration","Configuration","Development",{"path":176,"title":177,"section":174,"order":52,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Fevents","Events",{"path":179,"title":180,"section":174,"order":128,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Fi18n","i18n",{"path":182,"title":183,"section":174,"order":13,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Flocal","Dev Server",{"path":185,"title":107,"section":174,"order":27,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Fplaintext",{"path":187,"title":188,"section":174,"order":18,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Ftemplates","Templates",{"path":190,"title":191,"section":22,"order":32,"sidebar":14},"\u002Fdocs\u002Feditor-setup","Editor Setup",{"path":193,"title":194,"section":22,"order":48,"sidebar":14},"\u002Fdocs\u002Fglossary","Glossary",{"path":196,"title":197,"section":22,"order":128,"sidebar":8},"\u002Fdocs\u002Finstallation\u002Fframeworks","Framework Guides",{"path":199,"title":200,"section":197,"order":52,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fadonisjs","AdonisJS",{"path":202,"title":203,"section":197,"order":32,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fastro","Astro",{"path":205,"title":206,"section":197,"order":18,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Flaravel","Laravel",{"path":208,"title":209,"section":197,"order":48,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fnextjs","Next.js",{"path":211,"title":212,"section":197,"order":13,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fnuxt","Nuxt",{"path":214,"title":215,"section":197,"order":124,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fqwik","Qwik",{"path":217,"title":218,"section":197,"order":128,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fsolid","Solid",{"path":220,"title":221,"section":197,"order":27,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fsveltekit","SvelteKit",{"path":223,"title":224,"section":197,"order":23,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Ftanstack","TanStack Start",{"path":226,"title":227,"section":22,"order":13,"sidebar":14},"\u002Fdocs\u002Finstallation","Installation",{"path":229,"title":230,"section":22,"order":32,"sidebar":8},"\u002Fdocs\u002Finstallation\u002Fmanual","Manual Installation",{"path":232,"title":233,"section":22,"order":27,"sidebar":8},"\u002Fdocs\u002Finstallation\u002Fmonorepo","Monorepo Installation",{"path":235,"title":236,"section":22,"order":52,"sidebar":8},"\u002Fdocs\u002Finstallation\u002Fvite","Vite Plugin",{"path":238,"title":239,"section":22,"order":18,"sidebar":14},"\u002Fdocs\u002Fintroduction","What is Maizzle?",{"path":241,"title":242,"section":243,"order":13,"sidebar":14},"\u002Fdocs\u002Fmigrate\u002Fmjml","MJML","Migrate to Maizzle",{"path":245,"title":246,"section":243,"order":18,"sidebar":14},"\u002Fdocs\u002Fmigrate\u002Freact-email","React Email",{"path":248,"title":249,"section":22,"order":124,"sidebar":14},"\u002Fdocs\u002Fresources","Resources",{"path":251,"title":252,"section":22,"order":128,"sidebar":14},"\u002Fdocs\u002Fskill","Agent Skill",{"path":254,"title":255,"section":256,"order":18,"sidebar":14},"\u002Fdocs\u002Ftailwindcss","Tailwind CSS","Core Concepts",{"path":258,"title":259,"section":260,"order":13,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fadd-attributes","Add Attributes","Transformers",{"path":262,"title":263,"section":260,"order":48,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fattribute-to-style","Attribute to Style",{"path":265,"title":266,"section":260,"order":36,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fbase-url","Base URL",{"path":268,"title":269,"section":260,"order":66,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fentities","Entities",{"path":271,"title":272,"section":260,"order":80,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Ffilters","Filters",{"path":274,"title":275,"section":260,"order":112,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fformat","Format",{"path":277,"title":278,"section":260,"order":32,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Finline-css","Inline CSS",{"path":280,"title":281,"section":260,"order":56,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Finline-link","Inline Link",{"path":283,"title":284,"section":260,"order":40,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fminify","Minify",{"path":286,"title":103,"section":260,"order":18,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Foverview",{"path":288,"title":289,"section":260,"order":27,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fpurge-css","Purge CSS",{"path":291,"title":292,"section":260,"order":140,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fremove-attributes","Remove Attributes",{"path":294,"title":295,"section":260,"order":132,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Freplace-strings","Replace Strings",{"path":297,"title":298,"section":260,"order":52,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fsafe-selectors","Safe Selectors",{"path":300,"title":301,"section":260,"order":128,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fshorthand-css","Shorthand CSS",{"path":303,"title":304,"section":260,"order":124,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fsix-hex","Six-digit HEX",{"path":306,"title":307,"section":260,"order":73,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Furl-parameters","URL Parameters",{"path":309,"title":310,"section":22,"order":52,"sidebar":14},"\u002Fdocs\u002Fupgrade-guide","Upgrade Guide",{"path":312,"title":236,"section":256,"order":13,"sidebar":14},"\u002Fdocs\u002Fvite-plugin",{"path":314,"title":315,"section":7,"order":7,"sidebar":8},"\u002Fprivacy","Privacy Policy",{"id":317,"title":236,"body":318,"description":602,"extension":603,"meta":604,"navigation":14,"order":13,"path":312,"section":256,"seo":605,"sidebar":14,"stem":606,"toc":14,"__hash__":607},"docs\u002Fdocs\u002Fvite-plugin.md",{"type":319,"value":320,"toc":596},"minimark",[321,325,329,334,337,340,350,358,362,365,389,392,395,559,570,581,585,588,592],[322,323,236],"h1",{"id":324},"vite-plugin",[326,327,328],"p",{},"Maizzle ships a Vite plugin so you can build email templates inside an existing Vite project or alongside your app's frontend code, without having to create a separate project.",[330,331,333],"h2",{"id":332},"when-to-use-it","When to use it",[326,335,336],{},"Reach for the plugin when emails need to live in the same repository as a Vite-powered app and you'd rather not maintain a separate project.",[326,338,339],{},"Most commonly, people use the Vite plugin inside:",[341,342,343,347],"ul",{},[344,345,346],"li",{},"a standalone Vite app",[344,348,349],{},"a Laravel\u002FNuxt\u002FSvelteKit\u002FAstro\u002Fother Vite-powered framework",[326,351,352,353,357],{},"If your emails live on their own, for example when you're building a suite of email templates for a client, use the CLI to ",[354,355,356],"a",{"href":226},"scaffold a standalone project"," instead.",[330,359,361],{"id":360},"how-it-integrates","How it integrates",[326,363,364],{},"The plugin doesn't merge into your app's pipeline. It runs Maizzle in its own Vite dev server so that our Vue and Tailwind pipeline doesn't leak into your host app's transform graph.",[341,366,367,377],{},[344,368,369,376],{},[370,371,372],"strong",{},[373,374,375],"code",{},"vite dev"," — Maizzle starts its own dev server on a separate port. Your app's dev server and Maizzle's dev server run side by side, each with their own HMR. You browse emails at the Maizzle URL while your app stays on its own.",[344,378,379,384,385,388],{},[370,380,381],{},[373,382,383],{},"vite build"," — emails are compiled after Vite builds your app, so ",[373,386,387],{},"npm run build"," outputs them without you wiring up extra scripts.",[330,390,173],{"id":391},"configuration",[326,393,394],{},"The Vite plugin can be configured in two ways:",[396,397,398,552],"ol",{},[344,399,400,401],{},"Inline, as the function argument:",[402,403,409],"pre",{"className":404,"code":405,"filename":406,"language":407,"meta":408,"style":408},"language-ts shiki shiki-themes laserwave has-highlighted","import { defineConfig } from 'vite'\nimport { maizzle } from '@maizzle\u002Fframework'\n\nexport default defineConfig({\n  plugins: [\n    maizzle({\n      output: { \u002F\u002F [!code highlight]\n        path: 'dist\u002Femails', \u002F\u002F [!code highlight]\n      } \u002F\u002F [!code highlight]\n    }),\n  ],\n})\n","vite.config.ts","ts","",[373,410,411,443,463,468,482,494,501,512,531,537,542,547],{"__ignoreMap":408},[412,413,415,419,423,427,430,433,436,440],"span",{"class":414,"line":18},"line",[412,416,418],{"class":417},"s0ZPN","import",[412,420,422],{"class":421},"sGGKt"," {",[412,424,426],{"class":425},"sU-n2"," defineConfig",[412,428,429],{"class":421}," }",[412,431,432],{"class":417}," from",[412,434,435],{"class":421}," '",[412,437,439],{"class":438},"sXiT_","vite",[412,441,442],{"class":421},"'\n",[412,444,445,447,449,452,454,456,458,461],{"class":414,"line":13},[412,446,418],{"class":417},[412,448,422],{"class":421},[412,450,451],{"class":425}," maizzle",[412,453,429],{"class":421},[412,455,432],{"class":417},[412,457,435],{"class":421},[412,459,460],{"class":438},"@maizzle\u002Fframework",[412,462,442],{"class":421},[412,464,465],{"class":414,"line":32},[412,466,467],{"emptyLinePlaceholder":14},"\n",[412,469,470,473,476,479],{"class":414,"line":27},[412,471,472],{"class":417},"export",[412,474,475],{"class":417}," default",[412,477,426],{"class":478},"sZNF3",[412,480,481],{"class":421},"({\n",[412,483,484,488,491],{"class":414,"line":52},[412,485,487],{"class":486},"sLaUg","  plugins",[412,489,490],{"class":421},":",[412,492,493],{"class":421}," [\n",[412,495,496,499],{"class":414,"line":128},[412,497,498],{"class":478},"    maizzle",[412,500,481],{"class":421},[412,502,505,508,510],{"class":503,"line":124},[414,504],"highlighted",[412,506,507],{"class":486},"      output",[412,509,490],{"class":421},[412,511,422],{"class":421},[412,513,515,518,520,522,525,528],{"class":514,"line":48},[414,504],[412,516,517],{"class":486},"        path",[412,519,490],{"class":421},[412,521,435],{"class":421},[412,523,524],{"class":438},"dist\u002Femails",[412,526,527],{"class":421},"'",[412,529,530],{"class":421},",",[412,532,534],{"class":533,"line":23},[414,504],[412,535,536],{"class":421},"      }",[412,538,539],{"class":414,"line":140},[412,540,541],{"class":421},"    }),\n",[412,543,544],{"class":414,"line":56},[412,545,546],{"class":421},"  ],\n",[412,548,549],{"class":414,"line":80},[412,550,551],{"class":421},"})\n",[344,553,554,555,558],{},"A ",[373,556,557],{},"maizzle.config.{ts,js}"," file in your project root.",[560,561,563],"callout",{"type":562},"info",[326,564,565,566,569],{},"If both exist, they're merged with ",[370,567,568],{},"inline options winning over the file",", which in turn wins over the framework defaults.",[326,571,572,573,580],{},"For the function signature and full option list, see ",[354,574,576,579],{"href":575},"\u002Fdocs\u002Fapi\u002Futilities#maizzle-vite-plugin",[373,577,578],{},"maizzle()"," in the API reference",".",[330,582,584],{"id":583},"framework-integrations","Framework integrations",[326,586,587],{},"Check out our framework guides for step-by-step instructions on setting up the plugin in your favorite Vite-powered framework:",[589,590],"framework-guides",{":exclude":591},"nextjs",[593,594,595],"style",{},"html pre.shiki code .s0ZPN, html code.shiki .s0ZPN{--shiki-default:#40B4C4}html pre.shiki code .sGGKt, html code.shiki .sGGKt{--shiki-default:#7B6995}html pre.shiki code .sU-n2, html code.shiki .sU-n2{--shiki-default:#FFF}html pre.shiki code .sXiT_, html code.shiki .sXiT_{--shiki-default:#B4DCE7}html pre.shiki code .sZNF3, html code.shiki .sZNF3{--shiki-default:#EB64B9}html pre.shiki code .sLaUg, html code.shiki .sLaUg{--shiki-default:#FFFFFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":408,"searchDepth":13,"depth":13,"links":597},[598,599,600,601],{"id":332,"depth":13,"text":333},{"id":360,"depth":13,"text":361},{"id":391,"depth":13,"text":173},{"id":583,"depth":13,"text":584},"Running Maizzle inside an existing Vite app or in your favorite Vite-powered framework.","md",{},{"title":236,"description":602},"docs\u002Fvite-plugin","I6o-KLK5YZcWH9Wto2VLGnmKFGmuzSBOz3Sxq2As498",1781015460415]