[{"data":1,"prerenderedAt":2770},["ShallowReactive",2],{"docs-nav":3,"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fnuxt":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":212,"body":318,"description":2764,"extension":2765,"meta":2766,"navigation":14,"order":13,"path":211,"section":197,"seo":2767,"sidebar":14,"stem":2768,"toc":14,"__hash__":2769},"docs\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fnuxt.md",{"type":319,"value":320,"toc":2746},"minimark",[321,325,341,345,348,375,378,382,387,394,443,446,502,509,615,619,622,724,728,743,944,949,1104,1119,1123,1134,1342,1345,1352,1367,1384,1387,1391,1401,1415,1425,1428,1482,1486,1493,1499,1503,1510,1643,1646,1763,1766,1884,1888,1891,2286,2290,2297,2635,2639,2648,2729,2732,2736,2739,2742],[322,323,212],"h1",{"id":324},"nuxt",[326,327,328,329,340],"p",{},"The official ",[330,331,336],"a",{"href":332,"rel":333,"target":335},"https:\u002F\u002Fgithub.com\u002Fmaizzle\u002Fnuxt",[334],"nofollow","_blank",[337,338,339],"code",{},"@maizzle\u002Fnuxt"," module integrates Maizzle into your Nuxt project. Email templates are authored as Vue SFCs alongside your app, previewed in a separate dev server, and bundled into your Nitro server output on build.",[342,343,227],"h2",{"id":344},"installation",[326,346,347],{},"Install the module:",[349,350,355],"pre",{"className":351,"code":352,"language":353,"meta":354,"style":354},"language-bash shiki shiki-themes laserwave","npm install -D @maizzle\u002Fnuxt\n","bash","",[337,356,357],{"__ignoreMap":354},[358,359,361,365,369,372],"span",{"class":360,"line":18},"line",[358,362,364],{"class":363},"sZNF3","npm",[358,366,368],{"class":367},"sXiT_"," install",[358,370,371],{"class":367}," -D",[358,373,374],{"class":367}," @maizzle\u002Fnuxt\n",[326,376,377],{},"Maizzle is pulled in automatically as a peer dependency.",[342,379,381],{"id":380},"setup","Setup",[383,384,386],"h3",{"id":385},"nuxt-config","Nuxt config",[326,388,389,390,393],{},"Register the module in your ",[337,391,392],{},"nuxt.config.ts",":",[349,395,399],{"className":396,"code":397,"filename":392,"language":398,"meta":354,"style":354},"language-ts shiki shiki-themes laserwave","export default defineNuxtConfig({\n  modules: ['@maizzle\u002Fnuxt'],\n})\n","ts",[337,400,401,417,438],{"__ignoreMap":354},[358,402,403,407,410,413],{"class":360,"line":18},[358,404,406],{"class":405},"s0ZPN","export",[358,408,409],{"class":405}," default",[358,411,412],{"class":363}," defineNuxtConfig",[358,414,416],{"class":415},"sGGKt","({\n",[358,418,419,423,425,428,431,433,435],{"class":360,"line":13},[358,420,422],{"class":421},"sLaUg","  modules",[358,424,393],{"class":415},[358,426,427],{"class":415}," [",[358,429,430],{"class":415},"'",[358,432,339],{"class":367},[358,434,430],{"class":415},[358,436,437],{"class":415},"],\n",[358,439,440],{"class":360,"line":32},[358,441,442],{"class":415},"})\n",[326,444,445],{},"That's it. The module ships with sensible defaults:",[447,448,449,462],"table",{},[450,451,452],"thead",{},[453,454,455,459],"tr",{},[456,457,458],"th",{},"Option",[456,460,461],{},"Default",[463,464,465,478,490],"tbody",{},[453,466,467,473],{},[468,469,470],"td",{},[337,471,472],{},"content",[468,474,475],{},[337,476,477],{},"\u003CsrcDir>\u002Femails\u002F**\u002F*.{vue,md}",[453,479,480,485],{},[468,481,482],{},[337,483,484],{},"output.path",[468,486,487],{},[337,488,489],{},"server\u002Fassets\u002Femails",[453,491,492,497],{},[468,493,494],{},[337,495,496],{},"server.port",[468,498,499],{},[337,500,501],{},"4321",[326,503,504,505,508],{},"Override any config option under the ",[337,506,507],{},"maizzle"," key:",[349,510,513],{"className":396,"code":511,"filename":392,"highlights":512,"language":398,"meta":354,"style":354},"export default defineNuxtConfig({\n  modules: ['@maizzle\u002Fnuxt'],\n  maizzle: {\n    server: { port: 5173 },\n    static: { source: ['emails\u002Fimages'] },\n  },\n})\n",[32,27,52,128],[337,514,515,525,541,553,576,605,611],{"__ignoreMap":354},[358,516,517,519,521,523],{"class":360,"line":18},[358,518,406],{"class":405},[358,520,409],{"class":405},[358,522,412],{"class":363},[358,524,416],{"class":415},[358,526,527,529,531,533,535,537,539],{"class":360,"line":13},[358,528,422],{"class":421},[358,530,393],{"class":415},[358,532,427],{"class":415},[358,534,430],{"class":415},[358,536,339],{"class":367},[358,538,430],{"class":415},[358,540,437],{"class":415},[358,542,545,548,550],{"class":543,"line":32},[360,544],"highlight",[358,546,547],{"class":421},"  maizzle",[358,549,393],{"class":415},[358,551,552],{"class":415}," {\n",[358,554,556,559,561,564,567,569,573],{"class":555,"line":27},[360,544],[358,557,558],{"class":421},"    server",[358,560,393],{"class":415},[358,562,563],{"class":415}," {",[358,565,566],{"class":421}," port",[358,568,393],{"class":415},[358,570,572],{"class":571},"s0EtI"," 5173",[358,574,575],{"class":415}," },\n",[358,577,579,582,584,586,589,591,593,595,598,600,603],{"class":578,"line":52},[360,544],[358,580,581],{"class":421},"    static",[358,583,393],{"class":415},[358,585,563],{"class":415},[358,587,588],{"class":421}," source",[358,590,393],{"class":415},[358,592,427],{"class":415},[358,594,430],{"class":415},[358,596,597],{"class":367},"emails\u002Fimages",[358,599,430],{"class":415},[358,601,602],{"class":415},"]",[358,604,575],{"class":415},[358,606,608],{"class":607,"line":128},[360,544],[358,609,610],{"class":415},"  },\n",[358,612,613],{"class":360,"line":124},[358,614,442],{"class":415},[383,616,618],{"id":617},"project-structure","Project structure",[326,620,621],{},"Where you store the email templates depends on your Nuxt version:",[623,624,625,681],"code-tabs",{},[626,627,629],"code-tab",{"label":628},"Nuxt 4",[349,630,636],{"className":631,"code":632,"filename":633,"highlights":634,"language":635,"meta":354,"style":354},"language-text shiki shiki-themes laserwave","your-nuxt-app\u002F\n├── app\u002F\n│   └── emails\u002F\n│       ├── welcome.vue\n│       └── tsconfig.json\n├── nuxt.config.ts\n├── tsconfig.json\n└── package.json\n","~\u002Fcode",[32,27,52],"text",[337,637,638,643,648,654,660,666,671,676],{"__ignoreMap":354},[358,639,640],{"class":360,"line":18},[358,641,642],{},"your-nuxt-app\u002F\n",[358,644,645],{"class":360,"line":13},[358,646,647],{},"├── app\u002F\n",[358,649,651],{"class":650,"line":32},[360,544],[358,652,653],{},"│   └── emails\u002F\n",[358,655,657],{"class":656,"line":27},[360,544],[358,658,659],{},"│       ├── welcome.vue\n",[358,661,663],{"class":662,"line":52},[360,544],[358,664,665],{},"│       └── tsconfig.json\n",[358,667,668],{"class":360,"line":128},[358,669,670],{},"├── nuxt.config.ts\n",[358,672,673],{"class":360,"line":124},[358,674,675],{},"├── tsconfig.json\n",[358,677,678],{"class":360,"line":48},[358,679,680],{},"└── package.json\n",[626,682,684],{"label":683},"Nuxt 3",[349,685,688],{"className":631,"code":686,"filename":633,"highlights":687,"language":635,"meta":354,"style":354},"your-nuxt-app\u002F\n├── emails\u002F\n│   ├── welcome.vue\n│   └── tsconfig.json\n├── nuxt.config.ts\n├── tsconfig.json\n└── package.json\n",[13,32,27],[337,689,690,694,700,706,712,716,720],{"__ignoreMap":354},[358,691,692],{"class":360,"line":18},[358,693,642],{},[358,695,697],{"class":696,"line":13},[360,544],[358,698,699],{},"├── emails\u002F\n",[358,701,703],{"class":702,"line":32},[360,544],[358,704,705],{},"│   ├── welcome.vue\n",[358,707,709],{"class":708,"line":27},[360,544],[358,710,711],{},"│   └── tsconfig.json\n",[358,713,714],{"class":360,"line":52},[358,715,670],{},[358,717,718],{"class":360,"line":128},[358,719,675],{},[358,721,722],{"class":360,"line":124},[358,723,680],{},[383,725,727],{"id":726},"typescript","TypeScript",[326,729,730,731,734,735,738,739,742],{},"Maizzle generates type declarations for auto-imported components and composables in ",[337,732,733],{},"\u003CemailsDir>\u002F.maizzle\u002F",". To enable type checking for your email templates, create a ",[337,736,737],{},"tsconfig.json"," next to them. For example, in Nuxt 4 with the ",[337,740,741],{},"app"," directory:",[349,744,749],{"className":745,"code":746,"filename":747,"language":748,"meta":354,"style":354},"language-json shiki shiki-themes laserwave","{\n  \"compilerOptions\": {\n    \"target\": \"ES2022\",\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"bundler\",\n    \"noEmit\": true,\n    \"strict\": true,\n    \"esModuleInterop\": true,\n    \"skipLibCheck\": true\n  },\n  \"include\": [\n    \".\u002F**\u002F*.vue\",\n    \".\u002F.maizzle\u002F*.d.ts\"\n  ]\n}\n","app\u002Femails\u002Ftsconfig.json","json",[337,750,751,756,771,794,814,834,851,866,881,895,899,913,924,934,939],{"__ignoreMap":354},[358,752,753],{"class":360,"line":18},[358,754,755],{"class":415},"{\n",[358,757,758,761,764,767,769],{"class":360,"line":13},[358,759,760],{"class":415},"  \"",[358,762,763],{"class":405},"compilerOptions",[358,765,766],{"class":415},"\"",[358,768,393],{"class":415},[358,770,552],{"class":415},[358,772,773,776,779,781,783,786,789,791],{"class":360,"line":32},[358,774,775],{"class":415},"    \"",[358,777,778],{"class":405},"target",[358,780,766],{"class":415},[358,782,393],{"class":415},[358,784,785],{"class":415}," \"",[358,787,788],{"class":367},"ES2022",[358,790,766],{"class":415},[358,792,793],{"class":415},",\n",[358,795,796,798,801,803,805,807,810,812],{"class":360,"line":27},[358,797,775],{"class":415},[358,799,800],{"class":405},"module",[358,802,766],{"class":415},[358,804,393],{"class":415},[358,806,785],{"class":415},[358,808,809],{"class":367},"ESNext",[358,811,766],{"class":415},[358,813,793],{"class":415},[358,815,816,818,821,823,825,827,830,832],{"class":360,"line":52},[358,817,775],{"class":415},[358,819,820],{"class":405},"moduleResolution",[358,822,766],{"class":415},[358,824,393],{"class":415},[358,826,785],{"class":415},[358,828,829],{"class":367},"bundler",[358,831,766],{"class":415},[358,833,793],{"class":415},[358,835,836,838,841,843,845,849],{"class":360,"line":128},[358,837,775],{"class":415},[358,839,840],{"class":405},"noEmit",[358,842,766],{"class":415},[358,844,393],{"class":415},[358,846,848],{"class":847},"skd8d"," true",[358,850,793],{"class":415},[358,852,853,855,858,860,862,864],{"class":360,"line":124},[358,854,775],{"class":415},[358,856,857],{"class":405},"strict",[358,859,766],{"class":415},[358,861,393],{"class":415},[358,863,848],{"class":847},[358,865,793],{"class":415},[358,867,868,870,873,875,877,879],{"class":360,"line":48},[358,869,775],{"class":415},[358,871,872],{"class":405},"esModuleInterop",[358,874,766],{"class":415},[358,876,393],{"class":415},[358,878,848],{"class":847},[358,880,793],{"class":415},[358,882,883,885,888,890,892],{"class":360,"line":23},[358,884,775],{"class":415},[358,886,887],{"class":405},"skipLibCheck",[358,889,766],{"class":415},[358,891,393],{"class":415},[358,893,894],{"class":847}," true\n",[358,896,897],{"class":360,"line":140},[358,898,610],{"class":415},[358,900,901,903,906,908,910],{"class":360,"line":56},[358,902,760],{"class":415},[358,904,905],{"class":405},"include",[358,907,766],{"class":415},[358,909,393],{"class":415},[358,911,912],{"class":415}," [\n",[358,914,915,917,920,922],{"class":360,"line":80},[358,916,775],{"class":415},[358,918,919],{"class":367},".\u002F**\u002F*.vue",[358,921,766],{"class":415},[358,923,793],{"class":415},[358,925,926,928,931],{"class":360,"line":36},[358,927,775],{"class":415},[358,929,930],{"class":367},".\u002F.maizzle\u002F*.d.ts",[358,932,933],{"class":415},"\"\n",[358,935,936],{"class":360,"line":73},[358,937,938],{"class":415},"  ]\n",[358,940,941],{"class":360,"line":132},[358,942,943],{"class":415},"}\n",[326,945,946,947,393],{},"Then add it as a project reference in your root ",[337,948,737],{},[349,950,953],{"className":951,"code":952,"filename":737,"language":748,"meta":354,"style":354},"language-json shiki shiki-themes laserwave has-highlighted","{\n  \"files\": [],\n  \"references\": [\n    { \"path\": \".\u002F.nuxt\u002Ftsconfig.app.json\" },\n    { \"path\": \".\u002F.nuxt\u002Ftsconfig.server.json\" },\n    { \"path\": \".\u002F.nuxt\u002Ftsconfig.shared.json\" },\n    { \"path\": \".\u002F.nuxt\u002Ftsconfig.node.json\" },\n    { \"path\": \".\u002Fapp\u002Femails\" } \u002F\u002F [!code highlight]\n  ]\n}\n",[337,954,955,959,973,986,1009,1030,1051,1072,1096,1100],{"__ignoreMap":354},[358,956,957],{"class":360,"line":18},[358,958,755],{"class":415},[358,960,961,963,966,968,970],{"class":360,"line":13},[358,962,760],{"class":415},[358,964,965],{"class":405},"files",[358,967,766],{"class":415},[358,969,393],{"class":415},[358,971,972],{"class":415}," [],\n",[358,974,975,977,980,982,984],{"class":360,"line":32},[358,976,760],{"class":415},[358,978,979],{"class":405},"references",[358,981,766],{"class":415},[358,983,393],{"class":415},[358,985,912],{"class":415},[358,987,988,991,993,996,998,1000,1002,1005,1007],{"class":360,"line":27},[358,989,990],{"class":415},"    {",[358,992,785],{"class":415},[358,994,995],{"class":405},"path",[358,997,766],{"class":415},[358,999,393],{"class":415},[358,1001,785],{"class":415},[358,1003,1004],{"class":367},".\u002F.nuxt\u002Ftsconfig.app.json",[358,1006,766],{"class":415},[358,1008,575],{"class":415},[358,1010,1011,1013,1015,1017,1019,1021,1023,1026,1028],{"class":360,"line":52},[358,1012,990],{"class":415},[358,1014,785],{"class":415},[358,1016,995],{"class":405},[358,1018,766],{"class":415},[358,1020,393],{"class":415},[358,1022,785],{"class":415},[358,1024,1025],{"class":367},".\u002F.nuxt\u002Ftsconfig.server.json",[358,1027,766],{"class":415},[358,1029,575],{"class":415},[358,1031,1032,1034,1036,1038,1040,1042,1044,1047,1049],{"class":360,"line":128},[358,1033,990],{"class":415},[358,1035,785],{"class":415},[358,1037,995],{"class":405},[358,1039,766],{"class":415},[358,1041,393],{"class":415},[358,1043,785],{"class":415},[358,1045,1046],{"class":367},".\u002F.nuxt\u002Ftsconfig.shared.json",[358,1048,766],{"class":415},[358,1050,575],{"class":415},[358,1052,1053,1055,1057,1059,1061,1063,1065,1068,1070],{"class":360,"line":124},[358,1054,990],{"class":415},[358,1056,785],{"class":415},[358,1058,995],{"class":405},[358,1060,766],{"class":415},[358,1062,393],{"class":415},[358,1064,785],{"class":415},[358,1066,1067],{"class":367},".\u002F.nuxt\u002Ftsconfig.node.json",[358,1069,766],{"class":415},[358,1071,575],{"class":415},[358,1073,1076,1078,1080,1082,1084,1086,1088,1091,1093],{"class":1074,"line":48},[360,1075],"highlighted",[358,1077,990],{"class":415},[358,1079,785],{"class":415},[358,1081,995],{"class":405},[358,1083,766],{"class":415},[358,1085,393],{"class":415},[358,1087,785],{"class":415},[358,1089,1090],{"class":367},".\u002Fapp\u002Femails",[358,1092,766],{"class":415},[358,1094,1095],{"class":415}," }",[358,1097,1098],{"class":360,"line":23},[358,1099,938],{"class":415},[358,1101,1102],{"class":360,"line":140},[358,1103,943],{"class":415},[1105,1106,1108],"callout",{"type":1107},"info",[326,1109,1110,1111,1114,1115,1118],{},"In Nuxt 3, replace ",[337,1112,1113],{},"{ \"path\": \".\u002Fapp\u002Femails\" }"," with ",[337,1116,1117],{},"{ \"path\": \".\u002Femails\" }",".",[342,1120,1122],{"id":1121},"usage","Usage",[326,1124,1125,1126,1128,1129,1128,1131,1133],{},"Create Vue SFC email templates in your emails directory. Maizzle components like ",[337,1127,76],{},", ",[337,1130,51],{},[337,1132,35],{},", etc. are auto-imported, you don't need to import them manually:",[349,1135,1139],{"className":1136,"code":1137,"language":1138,"meta":354,"style":354},"language-vue shiki shiki-themes laserwave","\u003Cscript setup>\n  defineConfig({\n    user: 'world',\n  })\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CLayout>\n    \u003CContainer class=\"max-w-xl\">\n      \u003CHeading>\n        Hello, {{ user }}!\n      \u003C\u002FHeading>\n      \u003CText>\n        Welcome aboard!\n      \u003C\u002FText>\n      \u003CButton href=\"https:\u002F\u002Fexample.com\">\n        Verify email\n      \u003C\u002FButton>\n    \u003C\u002FContainer>\n  \u003C\u002FLayout>\n\u003C\u002Ftemplate>\n","vue",[337,1140,1141,1156,1163,1180,1185,1194,1199,1208,1217,1239,1248,1253,1262,1270,1275,1283,1303,1308,1316,1325,1334],{"__ignoreMap":354},[358,1142,1143,1146,1150,1153],{"class":360,"line":18},[358,1144,1145],{"class":415},"\u003C",[358,1147,1149],{"class":1148},"sb4Pa","script",[358,1151,1152],{"class":363}," setup",[358,1154,1155],{"class":415},">\n",[358,1157,1158,1161],{"class":360,"line":13},[358,1159,1160],{"class":363},"  defineConfig",[358,1162,416],{"class":415},[358,1164,1165,1168,1170,1173,1176,1178],{"class":360,"line":32},[358,1166,1167],{"class":405},"    user",[358,1169,393],{"class":415},[358,1171,1172],{"class":415}," '",[358,1174,1175],{"class":367},"world",[358,1177,430],{"class":415},[358,1179,793],{"class":415},[358,1181,1182],{"class":360,"line":27},[358,1183,1184],{"class":415},"  })\n",[358,1186,1187,1190,1192],{"class":360,"line":52},[358,1188,1189],{"class":415},"\u003C\u002F",[358,1191,1149],{"class":1148},[358,1193,1155],{"class":415},[358,1195,1196],{"class":360,"line":128},[358,1197,1198],{"emptyLinePlaceholder":14},"\n",[358,1200,1201,1203,1206],{"class":360,"line":124},[358,1202,1145],{"class":415},[358,1204,1205],{"class":1148},"template",[358,1207,1155],{"class":415},[358,1209,1210,1213,1215],{"class":360,"line":48},[358,1211,1212],{"class":415},"  \u003C",[358,1214,76],{"class":1148},[358,1216,1155],{"class":415},[358,1218,1219,1222,1224,1227,1230,1232,1235,1237],{"class":360,"line":23},[358,1220,1221],{"class":415},"    \u003C",[358,1223,51],{"class":1148},[358,1225,1226],{"class":363}," class",[358,1228,1229],{"class":415},"=",[358,1231,766],{"class":415},[358,1233,1234],{"class":367},"max-w-xl",[358,1236,766],{"class":415},[358,1238,1155],{"class":415},[358,1240,1241,1244,1246],{"class":360,"line":140},[358,1242,1243],{"class":415},"      \u003C",[358,1245,62],{"class":1148},[358,1247,1155],{"class":415},[358,1249,1250],{"class":360,"line":56},[358,1251,1252],{"class":421},"        Hello, {{ user }}!\n",[358,1254,1255,1258,1260],{"class":360,"line":80},[358,1256,1257],{"class":415},"      \u003C\u002F",[358,1259,62],{"class":1148},[358,1261,1155],{"class":415},[358,1263,1264,1266,1268],{"class":360,"line":36},[358,1265,1243],{"class":415},[358,1267,139],{"class":1148},[358,1269,1155],{"class":415},[358,1271,1272],{"class":360,"line":73},[358,1273,1274],{"class":421},"        Welcome aboard!\n",[358,1276,1277,1279,1281],{"class":360,"line":132},[358,1278,1257],{"class":415},[358,1280,139],{"class":1148},[358,1282,1155],{"class":415},[358,1284,1285,1287,1289,1292,1294,1296,1299,1301],{"class":360,"line":66},[358,1286,1243],{"class":415},[358,1288,35],{"class":1148},[358,1290,1291],{"class":363}," href",[358,1293,1229],{"class":415},[358,1295,766],{"class":415},[358,1297,1298],{"class":367},"https:\u002F\u002Fexample.com",[358,1300,766],{"class":415},[358,1302,1155],{"class":415},[358,1304,1305],{"class":360,"line":112},[358,1306,1307],{"class":421},"        Verify email\n",[358,1309,1310,1312,1314],{"class":360,"line":40},[358,1311,1257],{"class":415},[358,1313,35],{"class":1148},[358,1315,1155],{"class":415},[358,1317,1318,1321,1323],{"class":360,"line":44},[358,1319,1320],{"class":415},"    \u003C\u002F",[358,1322,51],{"class":1148},[358,1324,1155],{"class":415},[358,1326,1327,1330,1332],{"class":360,"line":84},[358,1328,1329],{"class":415},"  \u003C\u002F",[358,1331,76],{"class":1148},[358,1333,1155],{"class":415},[358,1335,1336,1338,1340],{"class":360,"line":96},[358,1337,1189],{"class":415},[358,1339,1205],{"class":1148},[358,1341,1155],{"class":415},[342,1343,174],{"id":1344},"development",[326,1346,1347,1348,1351],{},"Run ",[337,1349,1350],{},"nuxt dev"," — the Maizzle dev server starts alongside Nuxt:",[349,1353,1355],{"className":351,"code":1354,"language":353,"meta":354,"style":354},"npm run dev\n",[337,1356,1357],{"__ignoreMap":354},[358,1358,1359,1361,1364],{"class":360,"line":18},[358,1360,364],{"class":363},[358,1362,1363],{"class":367}," run",[358,1365,1366],{"class":367}," dev\n",[1368,1369,1370,1378],"ul",{},[1371,1372,1373,1374,1377],"li",{},"Your Nuxt app runs on its default port (typically ",[337,1375,1376],{},"http:\u002F\u002Flocalhost:3000",")",[1371,1379,1380,1381],{},"The Maizzle email preview UI runs on ",[337,1382,1383],{},"http:\u002F\u002Flocalhost:4321",[326,1385,1386],{},"Changes to email templates are automatically reflected in the Maizzle preview UI.",[342,1388,1390],{"id":1389},"production-build","Production build",[326,1392,1393,1396,1397,1400],{},[337,1394,1395],{},"nuxt build"," writes compiled HTML to ",[337,1398,1399],{},"server\u002Fassets\u002Femails\u002F",", which Nitro bundles into the server output:",[349,1402,1404],{"className":351,"code":1403,"language":353,"meta":354,"style":354},"npm run build\n",[337,1405,1406],{"__ignoreMap":354},[358,1407,1408,1410,1412],{"class":360,"line":18},[358,1409,364],{"class":363},[358,1411,1363],{"class":367},[358,1413,1414],{"class":367}," build\n",[326,1416,1417,1418,1421,1422,1118],{},"The compiled emails are not visible as files in ",[337,1419,1420],{},".output\u002Fserver\u002F"," — Nitro inlines them as JS chunks under ",[337,1423,1424],{},".output\u002Fserver\u002Fchunks\u002Fraw\u002F",[326,1426,1427],{},"Read them at runtime via Nitro's storage API:",[349,1429,1432],{"className":396,"code":1430,"filename":1431,"language":398,"meta":354,"style":354},"const html = await useStorage('assets:server').getItem('emails:welcome.html')\n","server\u002Fapi\u002Fsend.post.ts",[337,1433,1434],{"__ignoreMap":354},[358,1435,1436,1440,1444,1447,1450,1453,1456,1458,1461,1463,1465,1467,1470,1472,1474,1477,1479],{"class":360,"line":18},[358,1437,1439],{"class":1438},"sIihq","const",[358,1441,1443],{"class":1442},"sU-n2"," html",[358,1445,1446],{"class":1148}," =",[358,1448,1449],{"class":405}," await",[358,1451,1452],{"class":363}," useStorage",[358,1454,1455],{"class":415},"(",[358,1457,430],{"class":415},[358,1459,1460],{"class":367},"assets:server",[358,1462,430],{"class":415},[358,1464,1377],{"class":415},[358,1466,1118],{"class":1148},[358,1468,1469],{"class":363},"getItem",[358,1471,1455],{"class":415},[358,1473,430],{"class":415},[358,1475,1476],{"class":367},"emails:welcome.html",[358,1478,430],{"class":415},[358,1480,1481],{"class":415},")\n",[342,1483,1485],{"id":1484},"server-api","Server API",[326,1487,1488,1489,1492],{},"For emails that need to be rendered on demand (with database data, runtime variables, etc.), use Maizzle's ",[337,1490,1491],{},"render"," function in a Nuxt server route.",[326,1494,1495,1496,1498],{},"The ",[337,1497,1491],{}," function accepts either a file path or an SFC string directly, and returns compiled HTML with CSS inlined, purged, and formatted.",[383,1500,1502],{"id":1501},"api-route","API route",[326,1504,1505,1506,1509],{},"Create a server route that renders an email template. You can read a ",[337,1507,1508],{},".vue"," file from disk:",[349,1511,1514],{"className":396,"code":1512,"filename":1513,"language":398,"meta":354,"style":354},"import { resolve } from 'node:path'\nimport { render } from '@maizzle\u002Fframework'\n\nexport default defineEventHandler(async (event) => {\n  const { html } = await render(resolve('app\u002Femails\u002Fwelcome.vue'))\n\n  return { html }\n})\n","server\u002Fapi\u002Frender.post.ts",[337,1515,1516,1539,1559,1563,1589,1623,1627,1639],{"__ignoreMap":354},[358,1517,1518,1521,1523,1526,1528,1531,1533,1536],{"class":360,"line":18},[358,1519,1520],{"class":405},"import",[358,1522,563],{"class":415},[358,1524,1525],{"class":1442}," resolve",[358,1527,1095],{"class":415},[358,1529,1530],{"class":405}," from",[358,1532,1172],{"class":415},[358,1534,1535],{"class":367},"node:path",[358,1537,1538],{"class":415},"'\n",[358,1540,1541,1543,1545,1548,1550,1552,1554,1557],{"class":360,"line":13},[358,1542,1520],{"class":405},[358,1544,563],{"class":415},[358,1546,1547],{"class":1442}," render",[358,1549,1095],{"class":415},[358,1551,1530],{"class":405},[358,1553,1172],{"class":415},[358,1555,1556],{"class":367},"@maizzle\u002Fframework",[358,1558,1538],{"class":415},[358,1560,1561],{"class":360,"line":32},[358,1562,1198],{"emptyLinePlaceholder":14},[358,1564,1565,1567,1569,1572,1574,1577,1579,1582,1584,1587],{"class":360,"line":27},[358,1566,406],{"class":405},[358,1568,409],{"class":405},[358,1570,1571],{"class":363}," defineEventHandler",[358,1573,1455],{"class":415},[358,1575,1576],{"class":421},"async ",[358,1578,1455],{"class":415},[358,1580,1581],{"class":1442},"event",[358,1583,1377],{"class":415},[358,1585,1586],{"class":1148}," =>",[358,1588,552],{"class":415},[358,1590,1591,1594,1596,1598,1600,1602,1604,1606,1608,1611,1613,1615,1618,1620],{"class":360,"line":52},[358,1592,1593],{"class":1438},"  const",[358,1595,563],{"class":415},[358,1597,1443],{"class":1442},[358,1599,1095],{"class":415},[358,1601,1446],{"class":1148},[358,1603,1449],{"class":405},[358,1605,1547],{"class":363},[358,1607,1455],{"class":415},[358,1609,1610],{"class":363},"resolve",[358,1612,1455],{"class":415},[358,1614,430],{"class":415},[358,1616,1617],{"class":367},"app\u002Femails\u002Fwelcome.vue",[358,1619,430],{"class":415},[358,1621,1622],{"class":415},"))\n",[358,1624,1625],{"class":360,"line":128},[358,1626,1198],{"emptyLinePlaceholder":14},[358,1628,1629,1632,1634,1636],{"class":360,"line":124},[358,1630,1631],{"class":405},"  return",[358,1633,563],{"class":415},[358,1635,1443],{"class":1442},[358,1637,1638],{"class":415}," }\n",[358,1640,1641],{"class":360,"line":48},[358,1642,442],{"class":415},[326,1644,1645],{},"Or pass an SFC string directly:",[349,1647,1649],{"className":396,"code":1648,"filename":1513,"language":398,"meta":354,"style":354},"import { render } from '@maizzle\u002Fframework'\n\nexport default defineEventHandler(async (event) => {\n  const { template } = await readBody(event)\n\n  const { html } = await render(template)\n\n  return { html }\n})\n",[337,1650,1651,1669,1673,1695,1719,1723,1745,1749,1759],{"__ignoreMap":354},[358,1652,1653,1655,1657,1659,1661,1663,1665,1667],{"class":360,"line":18},[358,1654,1520],{"class":405},[358,1656,563],{"class":415},[358,1658,1547],{"class":1442},[358,1660,1095],{"class":415},[358,1662,1530],{"class":405},[358,1664,1172],{"class":415},[358,1666,1556],{"class":367},[358,1668,1538],{"class":415},[358,1670,1671],{"class":360,"line":13},[358,1672,1198],{"emptyLinePlaceholder":14},[358,1674,1675,1677,1679,1681,1683,1685,1687,1689,1691,1693],{"class":360,"line":32},[358,1676,406],{"class":405},[358,1678,409],{"class":405},[358,1680,1571],{"class":363},[358,1682,1455],{"class":415},[358,1684,1576],{"class":421},[358,1686,1455],{"class":415},[358,1688,1581],{"class":1442},[358,1690,1377],{"class":415},[358,1692,1586],{"class":1148},[358,1694,552],{"class":415},[358,1696,1697,1699,1701,1704,1706,1708,1710,1713,1715,1717],{"class":360,"line":27},[358,1698,1593],{"class":1438},[358,1700,563],{"class":415},[358,1702,1703],{"class":1442}," template",[358,1705,1095],{"class":415},[358,1707,1446],{"class":1148},[358,1709,1449],{"class":405},[358,1711,1712],{"class":363}," readBody",[358,1714,1455],{"class":415},[358,1716,1581],{"class":1442},[358,1718,1481],{"class":415},[358,1720,1721],{"class":360,"line":52},[358,1722,1198],{"emptyLinePlaceholder":14},[358,1724,1725,1727,1729,1731,1733,1735,1737,1739,1741,1743],{"class":360,"line":128},[358,1726,1593],{"class":1438},[358,1728,563],{"class":415},[358,1730,1443],{"class":1442},[358,1732,1095],{"class":415},[358,1734,1446],{"class":1148},[358,1736,1449],{"class":405},[358,1738,1547],{"class":363},[358,1740,1455],{"class":415},[358,1742,1205],{"class":1442},[358,1744,1481],{"class":415},[358,1746,1747],{"class":360,"line":124},[358,1748,1198],{"emptyLinePlaceholder":14},[358,1750,1751,1753,1755,1757],{"class":360,"line":48},[358,1752,1631],{"class":405},[358,1754,563],{"class":415},[358,1756,1443],{"class":1442},[358,1758,1638],{"class":415},[358,1760,1761],{"class":360,"line":23},[358,1762,442],{"class":415},[326,1764,1765],{},"For example, you could send a template string from your frontend:",[349,1767,1769],{"className":396,"code":1768,"language":398,"meta":354,"style":354},"const { data } = await useFetch('\u002Fapi\u002Frender', {\n  method: 'POST',\n  body: {\n    template: `\u003Ctemplate>\n  \u003CLayout>\n    \u003CContainer class=\"max-w-xl\">\n      \u003CHeading level=\"1\">Hello!\u003C\u002FHeading>\n    \u003C\u002FContainer>\n  \u003C\u002FLayout>\n\u003C\u002Ftemplate>`,\n  },\n})\n",[337,1770,1771,1803,1819,1828,1841,1846,1851,1856,1861,1866,1876,1880],{"__ignoreMap":354},[358,1772,1773,1775,1777,1780,1782,1784,1786,1789,1791,1793,1796,1798,1801],{"class":360,"line":18},[358,1774,1439],{"class":1438},[358,1776,563],{"class":415},[358,1778,1779],{"class":1442}," data",[358,1781,1095],{"class":415},[358,1783,1446],{"class":1148},[358,1785,1449],{"class":405},[358,1787,1788],{"class":363}," useFetch",[358,1790,1455],{"class":415},[358,1792,430],{"class":415},[358,1794,1795],{"class":367},"\u002Fapi\u002Frender",[358,1797,430],{"class":415},[358,1799,1800],{"class":415},",",[358,1802,552],{"class":415},[358,1804,1805,1808,1810,1812,1815,1817],{"class":360,"line":13},[358,1806,1807],{"class":421},"  method",[358,1809,393],{"class":415},[358,1811,1172],{"class":415},[358,1813,1814],{"class":367},"POST",[358,1816,430],{"class":415},[358,1818,793],{"class":415},[358,1820,1821,1824,1826],{"class":360,"line":32},[358,1822,1823],{"class":421},"  body",[358,1825,393],{"class":415},[358,1827,552],{"class":415},[358,1829,1830,1833,1835,1838],{"class":360,"line":27},[358,1831,1832],{"class":421},"    template",[358,1834,393],{"class":415},[358,1836,1837],{"class":415}," `",[358,1839,1840],{"class":367},"\u003Ctemplate>\n",[358,1842,1843],{"class":360,"line":52},[358,1844,1845],{"class":367},"  \u003CLayout>\n",[358,1847,1848],{"class":360,"line":128},[358,1849,1850],{"class":367},"    \u003CContainer class=\"max-w-xl\">\n",[358,1852,1853],{"class":360,"line":124},[358,1854,1855],{"class":367},"      \u003CHeading level=\"1\">Hello!\u003C\u002FHeading>\n",[358,1857,1858],{"class":360,"line":48},[358,1859,1860],{"class":367},"    \u003C\u002FContainer>\n",[358,1862,1863],{"class":360,"line":23},[358,1864,1865],{"class":367},"  \u003C\u002FLayout>\n",[358,1867,1868,1871,1874],{"class":360,"line":140},[358,1869,1870],{"class":367},"\u003C\u002Ftemplate>",[358,1872,1873],{"class":415},"`",[358,1875,793],{"class":415},[358,1877,1878],{"class":360,"line":56},[358,1879,610],{"class":415},[358,1881,1882],{"class":360,"line":80},[358,1883,442],{"class":415},[383,1885,1887],{"id":1886},"displaying-the-result","Displaying the result",[326,1889,1890],{},"Since the rendered email is a full HTML document, use an iframe to display it in your app:",[349,1892,1895],{"className":1136,"code":1893,"filename":1894,"language":1138,"meta":354,"style":354},"\u003Cscript setup lang=\"ts\">\nconst { data: result, refresh } = await useFetch('\u002Fapi\u002Frender', {\n  method: 'POST',\n})\n\nif (import.meta.dev) {\n  onMounted(() => setInterval(() => refresh(), 2000))\n}\n\nconst iframeRef = ref\u003CHTMLIFrameElement>()\n\nwatch(() => result.value?.html, (html) => {\n  if (html && iframeRef.value) {\n    iframeRef.value.srcdoc = html\n  }\n})\n\nonMounted(() => {\n  if (result.value?.html && iframeRef.value) {\n    iframeRef.value.srcdoc = result.value.html\n  }\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ciframe ref=\"iframeRef\" style=\"width: 100%; height: 100vh; border: none;\" \u002F>\n\u003C\u002Ftemplate>\n","components\u002FEmailPreview.vue",[337,1896,1897,1918,1956,1970,1974,1978,2002,2029,2033,2037,2057,2061,2095,2117,2136,2141,2145,2149,2160,2189,2214,2218,2222,2230,2234,2243,2278],{"__ignoreMap":354},[358,1898,1899,1901,1903,1905,1908,1910,1912,1914,1916],{"class":360,"line":18},[358,1900,1145],{"class":415},[358,1902,1149],{"class":1148},[358,1904,1152],{"class":363},[358,1906,1907],{"class":363}," lang",[358,1909,1229],{"class":415},[358,1911,766],{"class":415},[358,1913,398],{"class":367},[358,1915,766],{"class":415},[358,1917,1155],{"class":415},[358,1919,1920,1922,1924,1926,1928,1931,1933,1936,1938,1940,1942,1944,1946,1948,1950,1952,1954],{"class":360,"line":13},[358,1921,1439],{"class":1438},[358,1923,563],{"class":415},[358,1925,1779],{"class":421},[358,1927,393],{"class":415},[358,1929,1930],{"class":1442}," result",[358,1932,1800],{"class":415},[358,1934,1935],{"class":1442}," refresh",[358,1937,1095],{"class":415},[358,1939,1446],{"class":1148},[358,1941,1449],{"class":405},[358,1943,1788],{"class":363},[358,1945,1455],{"class":415},[358,1947,430],{"class":415},[358,1949,1795],{"class":367},[358,1951,430],{"class":415},[358,1953,1800],{"class":415},[358,1955,552],{"class":415},[358,1957,1958,1960,1962,1964,1966,1968],{"class":360,"line":32},[358,1959,1807],{"class":421},[358,1961,393],{"class":415},[358,1963,1172],{"class":415},[358,1965,1814],{"class":367},[358,1967,430],{"class":415},[358,1969,793],{"class":415},[358,1971,1972],{"class":360,"line":27},[358,1973,442],{"class":415},[358,1975,1976],{"class":360,"line":52},[358,1977,1198],{"emptyLinePlaceholder":14},[358,1979,1980,1983,1986,1988,1990,1993,1995,1998,2000],{"class":360,"line":128},[358,1981,1982],{"class":405},"if",[358,1984,1985],{"class":415}," (",[358,1987,1520],{"class":405},[358,1989,1118],{"class":1148},[358,1991,1992],{"class":421},"meta",[358,1994,1118],{"class":1148},[358,1996,1997],{"class":405},"dev",[358,1999,1377],{"class":415},[358,2001,552],{"class":415},[358,2003,2004,2007,2010,2012,2015,2017,2019,2021,2024,2027],{"class":360,"line":124},[358,2005,2006],{"class":363},"  onMounted",[358,2008,2009],{"class":415},"(()",[358,2011,1586],{"class":1148},[358,2013,2014],{"class":363}," setInterval",[358,2016,2009],{"class":415},[358,2018,1586],{"class":1148},[358,2020,1935],{"class":363},[358,2022,2023],{"class":415},"(),",[358,2025,2026],{"class":571}," 2000",[358,2028,1622],{"class":415},[358,2030,2031],{"class":360,"line":48},[358,2032,943],{"class":415},[358,2034,2035],{"class":360,"line":23},[358,2036,1198],{"emptyLinePlaceholder":14},[358,2038,2039,2041,2044,2046,2049,2051,2054],{"class":360,"line":140},[358,2040,1439],{"class":1438},[358,2042,2043],{"class":1442}," iframeRef",[358,2045,1446],{"class":1148},[358,2047,2048],{"class":363}," ref",[358,2050,1145],{"class":415},[358,2052,2053],{"class":1148},"HTMLIFrameElement",[358,2055,2056],{"class":415},">()\n",[358,2058,2059],{"class":360,"line":56},[358,2060,1198],{"emptyLinePlaceholder":14},[358,2062,2063,2066,2068,2070,2072,2074,2077,2080,2083,2085,2087,2089,2091,2093],{"class":360,"line":80},[358,2064,2065],{"class":363},"watch",[358,2067,2009],{"class":415},[358,2069,1586],{"class":1148},[358,2071,1930],{"class":1442},[358,2073,1118],{"class":1148},[358,2075,2076],{"class":1442},"value",[358,2078,2079],{"class":415},"?.",[358,2081,2082],{"class":405},"html",[358,2084,1800],{"class":415},[358,2086,1985],{"class":415},[358,2088,2082],{"class":1442},[358,2090,1377],{"class":415},[358,2092,1586],{"class":1148},[358,2094,552],{"class":415},[358,2096,2097,2100,2102,2104,2107,2109,2111,2113,2115],{"class":360,"line":36},[358,2098,2099],{"class":405},"  if",[358,2101,1985],{"class":415},[358,2103,2082],{"class":1442},[358,2105,2106],{"class":1148}," &&",[358,2108,2043],{"class":1442},[358,2110,1118],{"class":1148},[358,2112,2076],{"class":405},[358,2114,1377],{"class":415},[358,2116,552],{"class":415},[358,2118,2119,2122,2124,2126,2128,2131,2133],{"class":360,"line":73},[358,2120,2121],{"class":1442},"    iframeRef",[358,2123,1118],{"class":1148},[358,2125,2076],{"class":1442},[358,2127,1118],{"class":1148},[358,2129,2130],{"class":405},"srcdoc",[358,2132,1446],{"class":1148},[358,2134,2135],{"class":1442}," html\n",[358,2137,2138],{"class":360,"line":132},[358,2139,2140],{"class":415},"  }\n",[358,2142,2143],{"class":360,"line":66},[358,2144,442],{"class":415},[358,2146,2147],{"class":360,"line":112},[358,2148,1198],{"emptyLinePlaceholder":14},[358,2150,2151,2154,2156,2158],{"class":360,"line":40},[358,2152,2153],{"class":363},"onMounted",[358,2155,2009],{"class":415},[358,2157,1586],{"class":1148},[358,2159,552],{"class":415},[358,2161,2162,2164,2166,2169,2171,2173,2175,2177,2179,2181,2183,2185,2187],{"class":360,"line":44},[358,2163,2099],{"class":405},[358,2165,1985],{"class":415},[358,2167,2168],{"class":1442},"result",[358,2170,1118],{"class":1148},[358,2172,2076],{"class":1442},[358,2174,2079],{"class":415},[358,2176,2082],{"class":405},[358,2178,2106],{"class":1148},[358,2180,2043],{"class":1442},[358,2182,1118],{"class":1148},[358,2184,2076],{"class":405},[358,2186,1377],{"class":415},[358,2188,552],{"class":415},[358,2190,2191,2193,2195,2197,2199,2201,2203,2205,2207,2209,2211],{"class":360,"line":84},[358,2192,2121],{"class":1442},[358,2194,1118],{"class":1148},[358,2196,2076],{"class":1442},[358,2198,1118],{"class":1148},[358,2200,2130],{"class":405},[358,2202,1446],{"class":1148},[358,2204,1930],{"class":1442},[358,2206,1118],{"class":1148},[358,2208,2076],{"class":1442},[358,2210,1118],{"class":1148},[358,2212,2213],{"class":405},"html\n",[358,2215,2216],{"class":360,"line":96},[358,2217,2140],{"class":415},[358,2219,2220],{"class":360,"line":88},[358,2221,442],{"class":415},[358,2223,2224,2226,2228],{"class":360,"line":100},[358,2225,1189],{"class":415},[358,2227,1149],{"class":1148},[358,2229,1155],{"class":415},[358,2231,2232],{"class":360,"line":144},[358,2233,1198],{"emptyLinePlaceholder":14},[358,2235,2237,2239,2241],{"class":360,"line":2236},25,[358,2238,1145],{"class":415},[358,2240,1205],{"class":1148},[358,2242,1155],{"class":415},[358,2244,2245,2247,2250,2252,2254,2256,2259,2261,2264,2266,2268,2271,2273,2276],{"class":360,"line":92},[358,2246,1212],{"class":415},[358,2248,2249],{"class":1148},"iframe",[358,2251,2048],{"class":363},[358,2253,1229],{"class":415},[358,2255,766],{"class":415},[358,2257,2258],{"class":367},"iframeRef",[358,2260,766],{"class":415},[358,2262,2263],{"class":363}," style",[358,2265,1229],{"class":415},[358,2267,766],{"class":415},[358,2269,2270],{"class":367},"width: 100%; height: 100vh; border: none;",[358,2272,766],{"class":415},[358,2274,2275],{"class":421}," \u002F",[358,2277,1155],{"class":415},[358,2279,2280,2282,2284],{"class":360,"line":148},[358,2281,1189],{"class":415},[358,2283,1205],{"class":1148},[358,2285,1155],{"class":415},[383,2287,2289],{"id":2288},"sending-emails","Sending emails",[326,2291,2292,2293,393],{},"You can use the rendered HTML to send emails directly from a server route. Here's an example using ",[330,2294,161],{"href":2295,"rel":2296,"target":335},"https:\u002F\u002Fnodemailer.com\u002F",[334],[349,2298,2300],{"className":396,"code":2299,"filename":1431,"language":398,"meta":354,"style":354},"import { resolve } from 'node:path'\nimport { render } from '@maizzle\u002Fframework'\nimport { createTransport } from 'nodemailer'\n\nconst transporter = createTransport({\n  host: 'smtp.example.com',\n  port: 587,\n  auth: {\n    user: process.env.SMTP_USER,\n    pass: process.env.SMTP_PASS,\n  },\n})\n\nexport default defineEventHandler(async (event) => {\n  const { to } = await readBody(event)\n\n  const { html } = await render(resolve('app\u002Femails\u002Fwelcome.vue'))\n\n  await transporter.sendMail({\n    from: 'no-reply@example.com',\n    to,\n    subject: 'Welcome!',\n    html,\n  })\n\n  return { success: true }\n})\n",[337,2301,2302,2320,2338,2358,2362,2375,2391,2403,2412,2433,2453,2457,2461,2465,2487,2510,2514,2544,2548,2562,2578,2585,2601,2608,2612,2616,2631],{"__ignoreMap":354},[358,2303,2304,2306,2308,2310,2312,2314,2316,2318],{"class":360,"line":18},[358,2305,1520],{"class":405},[358,2307,563],{"class":415},[358,2309,1525],{"class":1442},[358,2311,1095],{"class":415},[358,2313,1530],{"class":405},[358,2315,1172],{"class":415},[358,2317,1535],{"class":367},[358,2319,1538],{"class":415},[358,2321,2322,2324,2326,2328,2330,2332,2334,2336],{"class":360,"line":13},[358,2323,1520],{"class":405},[358,2325,563],{"class":415},[358,2327,1547],{"class":1442},[358,2329,1095],{"class":415},[358,2331,1530],{"class":405},[358,2333,1172],{"class":415},[358,2335,1556],{"class":367},[358,2337,1538],{"class":415},[358,2339,2340,2342,2344,2347,2349,2351,2353,2356],{"class":360,"line":32},[358,2341,1520],{"class":405},[358,2343,563],{"class":415},[358,2345,2346],{"class":1442}," createTransport",[358,2348,1095],{"class":415},[358,2350,1530],{"class":405},[358,2352,1172],{"class":415},[358,2354,2355],{"class":367},"nodemailer",[358,2357,1538],{"class":415},[358,2359,2360],{"class":360,"line":27},[358,2361,1198],{"emptyLinePlaceholder":14},[358,2363,2364,2366,2369,2371,2373],{"class":360,"line":52},[358,2365,1439],{"class":1438},[358,2367,2368],{"class":1442}," transporter",[358,2370,1446],{"class":1148},[358,2372,2346],{"class":363},[358,2374,416],{"class":415},[358,2376,2377,2380,2382,2384,2387,2389],{"class":360,"line":128},[358,2378,2379],{"class":421},"  host",[358,2381,393],{"class":415},[358,2383,1172],{"class":415},[358,2385,2386],{"class":367},"smtp.example.com",[358,2388,430],{"class":415},[358,2390,793],{"class":415},[358,2392,2393,2396,2398,2401],{"class":360,"line":124},[358,2394,2395],{"class":421},"  port",[358,2397,393],{"class":415},[358,2399,2400],{"class":571}," 587",[358,2402,793],{"class":415},[358,2404,2405,2408,2410],{"class":360,"line":48},[358,2406,2407],{"class":421},"  auth",[358,2409,393],{"class":415},[358,2411,552],{"class":415},[358,2413,2414,2416,2418,2421,2423,2426,2428,2431],{"class":360,"line":23},[358,2415,1167],{"class":421},[358,2417,393],{"class":415},[358,2419,2420],{"class":1442}," process",[358,2422,1118],{"class":1148},[358,2424,2425],{"class":1442},"env",[358,2427,1118],{"class":1148},[358,2429,2430],{"class":1442},"SMTP_USER",[358,2432,793],{"class":415},[358,2434,2435,2438,2440,2442,2444,2446,2448,2451],{"class":360,"line":140},[358,2436,2437],{"class":421},"    pass",[358,2439,393],{"class":415},[358,2441,2420],{"class":1442},[358,2443,1118],{"class":1148},[358,2445,2425],{"class":1442},[358,2447,1118],{"class":1148},[358,2449,2450],{"class":1442},"SMTP_PASS",[358,2452,793],{"class":415},[358,2454,2455],{"class":360,"line":56},[358,2456,610],{"class":415},[358,2458,2459],{"class":360,"line":80},[358,2460,442],{"class":415},[358,2462,2463],{"class":360,"line":36},[358,2464,1198],{"emptyLinePlaceholder":14},[358,2466,2467,2469,2471,2473,2475,2477,2479,2481,2483,2485],{"class":360,"line":73},[358,2468,406],{"class":405},[358,2470,409],{"class":405},[358,2472,1571],{"class":363},[358,2474,1455],{"class":415},[358,2476,1576],{"class":421},[358,2478,1455],{"class":415},[358,2480,1581],{"class":1442},[358,2482,1377],{"class":415},[358,2484,1586],{"class":1148},[358,2486,552],{"class":415},[358,2488,2489,2491,2493,2496,2498,2500,2502,2504,2506,2508],{"class":360,"line":132},[358,2490,1593],{"class":1438},[358,2492,563],{"class":415},[358,2494,2495],{"class":1442}," to",[358,2497,1095],{"class":415},[358,2499,1446],{"class":1148},[358,2501,1449],{"class":405},[358,2503,1712],{"class":363},[358,2505,1455],{"class":415},[358,2507,1581],{"class":1442},[358,2509,1481],{"class":415},[358,2511,2512],{"class":360,"line":66},[358,2513,1198],{"emptyLinePlaceholder":14},[358,2515,2516,2518,2520,2522,2524,2526,2528,2530,2532,2534,2536,2538,2540,2542],{"class":360,"line":112},[358,2517,1593],{"class":1438},[358,2519,563],{"class":415},[358,2521,1443],{"class":1442},[358,2523,1095],{"class":415},[358,2525,1446],{"class":1148},[358,2527,1449],{"class":405},[358,2529,1547],{"class":363},[358,2531,1455],{"class":415},[358,2533,1610],{"class":363},[358,2535,1455],{"class":415},[358,2537,430],{"class":415},[358,2539,1617],{"class":367},[358,2541,430],{"class":415},[358,2543,1622],{"class":415},[358,2545,2546],{"class":360,"line":40},[358,2547,1198],{"emptyLinePlaceholder":14},[358,2549,2550,2553,2555,2557,2560],{"class":360,"line":44},[358,2551,2552],{"class":405},"  await",[358,2554,2368],{"class":1442},[358,2556,1118],{"class":1148},[358,2558,2559],{"class":363},"sendMail",[358,2561,416],{"class":415},[358,2563,2564,2567,2569,2571,2574,2576],{"class":360,"line":84},[358,2565,2566],{"class":421},"    from",[358,2568,393],{"class":415},[358,2570,1172],{"class":415},[358,2572,2573],{"class":367},"no-reply@example.com",[358,2575,430],{"class":415},[358,2577,793],{"class":415},[358,2579,2580,2583],{"class":360,"line":96},[358,2581,2582],{"class":1442},"    to",[358,2584,793],{"class":415},[358,2586,2587,2590,2592,2594,2597,2599],{"class":360,"line":88},[358,2588,2589],{"class":421},"    subject",[358,2591,393],{"class":415},[358,2593,1172],{"class":415},[358,2595,2596],{"class":367},"Welcome!",[358,2598,430],{"class":415},[358,2600,793],{"class":415},[358,2602,2603,2606],{"class":360,"line":100},[358,2604,2605],{"class":1442},"    html",[358,2607,793],{"class":415},[358,2609,2610],{"class":360,"line":144},[358,2611,1184],{"class":415},[358,2613,2614],{"class":360,"line":2236},[358,2615,1198],{"emptyLinePlaceholder":14},[358,2617,2618,2620,2622,2625,2627,2629],{"class":360,"line":92},[358,2619,1631],{"class":405},[358,2621,563],{"class":415},[358,2623,2624],{"class":421}," success",[358,2626,393],{"class":415},[358,2628,848],{"class":847},[358,2630,1638],{"class":415},[358,2632,2633],{"class":360,"line":148},[358,2634,442],{"class":415},[342,2636,2638],{"id":2637},"static-assets","Static assets",[326,2640,2641,2642,2645,2646,508],{},"To include images or other static files with your emails, configure the ",[337,2643,2644],{},"static"," option under the ",[337,2647,507],{},[349,2649,2651],{"className":396,"code":2650,"filename":392,"language":398,"meta":354,"style":354},"export default defineNuxtConfig({\n  modules: ['@maizzle\u002Fnuxt'],\n\n  maizzle: {\n    static: {\n      source: ['emails\u002Fimages'],\n    },\n  },\n})\n",[337,2652,2653,2663,2679,2683,2691,2699,2716,2721,2725],{"__ignoreMap":354},[358,2654,2655,2657,2659,2661],{"class":360,"line":18},[358,2656,406],{"class":405},[358,2658,409],{"class":405},[358,2660,412],{"class":363},[358,2662,416],{"class":415},[358,2664,2665,2667,2669,2671,2673,2675,2677],{"class":360,"line":13},[358,2666,422],{"class":421},[358,2668,393],{"class":415},[358,2670,427],{"class":415},[358,2672,430],{"class":415},[358,2674,339],{"class":367},[358,2676,430],{"class":415},[358,2678,437],{"class":415},[358,2680,2681],{"class":360,"line":32},[358,2682,1198],{"emptyLinePlaceholder":14},[358,2684,2685,2687,2689],{"class":360,"line":27},[358,2686,547],{"class":421},[358,2688,393],{"class":415},[358,2690,552],{"class":415},[358,2692,2693,2695,2697],{"class":360,"line":52},[358,2694,581],{"class":421},[358,2696,393],{"class":415},[358,2698,552],{"class":415},[358,2700,2701,2704,2706,2708,2710,2712,2714],{"class":360,"line":128},[358,2702,2703],{"class":421},"      source",[358,2705,393],{"class":415},[358,2707,427],{"class":415},[358,2709,430],{"class":415},[358,2711,597],{"class":367},[358,2713,430],{"class":415},[358,2715,437],{"class":415},[358,2717,2718],{"class":360,"line":124},[358,2719,2720],{"class":415},"    },\n",[358,2722,2723],{"class":360,"line":48},[358,2724,610],{"class":415},[358,2726,2727],{"class":360,"line":23},[358,2728,442],{"class":415},[326,2730,2731],{},"Static files are copied to the output directory during production builds.",[342,2733,2735],{"id":2734},"other-frameworks","Other frameworks",[326,2737,2738],{},"Not using Nuxt? Check out the other framework guides:",[2740,2741],"framework-guides",{":exclude":324},[2743,2744,2745],"style",{},"html pre.shiki code .sZNF3, html code.shiki .sZNF3{--shiki-default:#EB64B9}html pre.shiki code .sXiT_, html code.shiki .sXiT_{--shiki-default:#B4DCE7}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);}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 .sLaUg, html code.shiki .sLaUg{--shiki-default:#FFFFFF}html pre.shiki code .s0EtI, html code.shiki .s0EtI{--shiki-default:#B381C5}html pre.shiki code .skd8d, html code.shiki .skd8d{--shiki-default:#FFE261}html pre.shiki code .sb4Pa, html code.shiki .sb4Pa{--shiki-default:#74DFC4}html pre.shiki code .sIihq, html code.shiki .sIihq{--shiki-default:#A96BC0}html pre.shiki code .sU-n2, html code.shiki .sU-n2{--shiki-default:#FFF}",{"title":354,"searchDepth":13,"depth":13,"links":2747},[2748,2749,2754,2755,2756,2757,2762,2763],{"id":344,"depth":13,"text":227},{"id":380,"depth":13,"text":381,"children":2750},[2751,2752,2753],{"id":385,"depth":32,"text":386},{"id":617,"depth":32,"text":618},{"id":726,"depth":32,"text":727},{"id":1121,"depth":13,"text":1122},{"id":1344,"depth":13,"text":174},{"id":1389,"depth":13,"text":1390},{"id":1484,"depth":13,"text":1485,"children":2758},[2759,2760,2761],{"id":1501,"depth":32,"text":1502},{"id":1886,"depth":32,"text":1887},{"id":2288,"depth":32,"text":2289},{"id":2637,"depth":13,"text":2638},{"id":2734,"depth":13,"text":2735},"How to use Maizzle with Nuxt to build email templates alongside your web application.","md",{},{"title":212,"description":2764},"docs\u002Finstallation\u002Fframeworks\u002Fnuxt","yjhYuz0wv_z7SDTlDyjTt5uPRmuZIZ5z0mPwCS6CLZ0",1781015472246]