[{"data":1,"prerenderedAt":4276},["ShallowReactive",2],{"docs-nav":3,"\u002Fdocs\u002Fdevelopment\u002Ftemplates":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":188,"body":318,"description":4271,"extension":2452,"meta":4272,"navigation":14,"order":18,"path":187,"section":174,"seo":4273,"sidebar":14,"stem":4274,"toc":14,"__hash__":4275},"docs\u002Fdocs\u002Fdevelopment\u002Ftemplates.md",{"type":319,"value":320,"toc":4247},"minimark",[321,325,329,337,340,345,356,524,546,550,561,621,628,635,659,675,679,685,991,1007,1010,1017,1203,1209,1213,1219,1222,1363,1367,1389,1395,1559,1568,1675,1699,1703,1722,1727,1733,1831,1840,1844,2127,2139,2143,2149,2200,2208,2214,2225,2232,2418,2422,2448,2483,2493,2497,2506,2519,2533,2555,2559,2566,2601,2611,2617,2645,2649,2656,2674,2842,2848,3001,3004,3037,3041,3054,3103,3110,3120,3124,3127,3907,3923,3939,3944,3957,3966,3970,3978,4036,4040,4050,4053,4117,4127,4131,4140,4143,4244],[322,323,188],"h1",{"id":324},"templates",[326,327,328],"p",{},"Templates in Maizzle are Vue Single-File Components (SFCs).",[326,330,331,332,336],{},"You code emails using Vue syntax with the built-in components or your own HTML, style them with Tailwind CSS, and optionally use ",[333,334,335],"code",{},"\u003Cscript setup>"," for logic or configuration.",[326,338,339],{},"Each template is rendered with Vue's SSR engine, goes through a pipeline of email-optimized transformers, and is output as production-ready HTML.",[341,342,344],"h2",{"id":343},"create","Creating a template",[326,346,347,348,351,352,355],{},"Create a ",[333,349,350],{},".vue"," file in your ",[333,353,354],{},"emails"," directory:",[357,358,364],"pre",{"className":359,"code":360,"filename":361,"language":362,"meta":363,"style":363},"language-vue shiki shiki-themes laserwave","\u003Ctemplate>\n  \u003CHtml>\n    \u003CHead \u002F>\n    \u003CBody>\n      \u003CTailwind>\n        \u003CContainer class=\"p-4 bg-gray-100\">\n          \u003CText class=\"text-lg text-gray-800\">\n            Hello!\n          \u003C\u002FText>\n        \u003C\u002FContainer>\n      \u003C\u002FTailwind>\n    \u003C\u002FBody>\n  \u003C\u002FHtml>\n\u003C\u002Ftemplate>\n","emails\u002Fwelcome.vue","vue","",[333,365,366,381,390,403,411,420,445,465,470,479,488,497,506,515],{"__ignoreMap":363},[367,368,370,374,378],"span",{"class":369,"line":18},"line",[367,371,373],{"class":372},"sGGKt","\u003C",[367,375,377],{"class":376},"sb4Pa","template",[367,379,380],{"class":372},">\n",[367,382,383,386,388],{"class":369,"line":13},[367,384,385],{"class":372},"  \u003C",[367,387,69],{"class":376},[367,389,380],{"class":372},[367,391,392,395,397,401],{"class":369,"line":32},[367,393,394],{"class":372},"    \u003C",[367,396,59],{"class":376},[367,398,400],{"class":399},"sLaUg"," \u002F",[367,402,380],{"class":372},[367,404,405,407,409],{"class":369,"line":27},[367,406,394],{"class":372},[367,408,30],{"class":376},[367,410,380],{"class":372},[367,412,413,416,418],{"class":369,"line":52},[367,414,415],{"class":372},"      \u003C",[367,417,135],{"class":376},[367,419,380],{"class":372},[367,421,422,425,427,431,434,437,441,443],{"class":369,"line":128},[367,423,424],{"class":372},"        \u003C",[367,426,51],{"class":376},[367,428,430],{"class":429},"sZNF3"," class",[367,432,433],{"class":372},"=",[367,435,436],{"class":372},"\"",[367,438,440],{"class":439},"sXiT_","p-4 bg-gray-100",[367,442,436],{"class":372},[367,444,380],{"class":372},[367,446,447,450,452,454,456,458,461,463],{"class":369,"line":124},[367,448,449],{"class":372},"          \u003C",[367,451,139],{"class":376},[367,453,430],{"class":429},[367,455,433],{"class":372},[367,457,436],{"class":372},[367,459,460],{"class":439},"text-lg text-gray-800",[367,462,436],{"class":372},[367,464,380],{"class":372},[367,466,467],{"class":369,"line":48},[367,468,469],{"class":399},"            Hello!\n",[367,471,472,475,477],{"class":369,"line":23},[367,473,474],{"class":372},"          \u003C\u002F",[367,476,139],{"class":376},[367,478,380],{"class":372},[367,480,481,484,486],{"class":369,"line":140},[367,482,483],{"class":372},"        \u003C\u002F",[367,485,51],{"class":376},[367,487,380],{"class":372},[367,489,490,493,495],{"class":369,"line":56},[367,491,492],{"class":372},"      \u003C\u002F",[367,494,135],{"class":376},[367,496,380],{"class":372},[367,498,499,502,504],{"class":369,"line":80},[367,500,501],{"class":372},"    \u003C\u002F",[367,503,30],{"class":376},[367,505,380],{"class":372},[367,507,508,511,513],{"class":369,"line":36},[367,509,510],{"class":372},"  \u003C\u002F",[367,512,69],{"class":376},[367,514,380],{"class":372},[367,516,517,520,522],{"class":369,"line":73},[367,518,519],{"class":372},"\u003C\u002F",[367,521,377],{"class":376},[367,523,380],{"class":372},[525,526,528],"callout",{"type":527},"info",[326,529,530,531,533,534,533,536,533,538,533,540,542,543,545],{},"All built-in components like ",[333,532,69],{},", ",[333,535,59],{},[333,537,30],{},[333,539,51],{},[333,541,139],{},", and ",[333,544,35],{}," are auto-imported, you don't need to import them manually.",[341,547,549],{"id":548},"discovery","Template discovery",[326,551,552,553,556,557,560],{},"By default, Maizzle looks for templates matching ",[333,554,555],{},"emails\u002F**\u002F*.{vue,md}"," in your project's root. You may customize this with the ",[333,558,559],{},"content"," option in your config:",[357,562,567],{"className":563,"code":564,"filename":565,"language":566,"meta":363,"style":363},"language-ts shiki shiki-themes laserwave","export default defineConfig({\n  content: ['emails\u002F**\u002F*.{vue,md}', 'src\u002Femails\u002F**\u002F*.vue'],\n})\n","maizzle.config.ts","ts",[333,568,569,584,616],{"__ignoreMap":363},[367,570,571,575,578,581],{"class":369,"line":18},[367,572,574],{"class":573},"s0ZPN","export",[367,576,577],{"class":573}," default",[367,579,580],{"class":429}," defineConfig",[367,582,583],{"class":372},"({\n",[367,585,586,589,592,595,598,600,602,605,608,611,613],{"class":369,"line":13},[367,587,588],{"class":399},"  content",[367,590,591],{"class":372},":",[367,593,594],{"class":372}," [",[367,596,597],{"class":372},"'",[367,599,555],{"class":439},[367,601,597],{"class":372},[367,603,604],{"class":372},",",[367,606,607],{"class":372}," '",[367,609,610],{"class":439},"src\u002Femails\u002F**\u002F*.vue",[367,612,597],{"class":372},[367,614,615],{"class":372},"],\n",[367,617,618],{"class":369,"line":32},[367,619,620],{"class":372},"})\n",[326,622,623,624,627],{},"The glob patterns determine which files are shown in the dev UI and compiled when you do ",[333,625,626],{},"npm run build",". The directory structure in your content paths is preserved in the output.",[326,629,630,631,634],{},"Alternatively, you may pass a source directory directly to the ",[333,632,633],{},"build"," command:",[357,636,640],{"className":637,"code":638,"language":639,"meta":363,"style":363},"language-bash shiki shiki-themes laserwave","npx maizzle build --dir src\u002Ftemplates\u002Femail\n","bash",[333,641,642],{"__ignoreMap":363},[367,643,644,647,650,653,656],{"class":369,"line":18},[367,645,646],{"class":429},"npx",[367,648,649],{"class":439}," maizzle",[367,651,652],{"class":439}," build",[367,654,655],{"class":439}," --dir",[367,657,658],{"class":439}," src\u002Ftemplates\u002Femail\n",[525,660,661],{"type":527},[326,662,663,664,666,667,670,671,674],{},"Only ",[333,665,350],{}," and ",[333,668,669],{},".md"," files are treated as templates. Other file types (e.g. ",[333,672,673],{},".html",") are ignored even if they match the glob patterns.",[341,676,678],{"id":677},"using-logic","Using logic",[326,680,681,682,684],{},"Add a ",[333,683,335],{}," block to use logic or per-template configuration:",[357,686,689],{"className":359,"code":687,"filename":688,"language":362,"meta":363,"style":363},"\u003Cscript setup>\n  const items = [\n    { name: 'Widget', price: '$9.99' },\n    { name: 'Gadget', price: '$14.99' },\n  ]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CHtml>\n    \u003CHead \u002F>\n    \u003CBody>\n      \u003CTailwind>\n        \u003CContainer>\n          \u003CHeading level=\"2\" class=\"text-2xl\">Your Order\u003C\u002FHeading>\n          \u003Cdiv v-for=\"item in items\" :key=\"item.name\">\n            \u003CText>{{ item.name }} — {{ item.price }}\u003C\u002FText>\n          \u003C\u002Fdiv>\n        \u003C\u002FContainer>\n      \u003C\u002FTailwind>\n    \u003C\u002FBody>\n  \u003C\u002FHtml>\n\u003C\u002Ftemplate>\n","emails\u002Forder.vue",[333,690,691,703,719,753,783,788,796,801,809,817,827,835,843,851,892,925,943,951,959,967,975,983],{"__ignoreMap":363},[367,692,693,695,698,701],{"class":369,"line":18},[367,694,373],{"class":372},[367,696,697],{"class":376},"script",[367,699,700],{"class":429}," setup",[367,702,380],{"class":372},[367,704,705,709,713,716],{"class":369,"line":13},[367,706,708],{"class":707},"sIihq","  const",[367,710,712],{"class":711},"skd8d"," items",[367,714,715],{"class":376}," =",[367,717,718],{"class":372}," [\n",[367,720,721,724,727,729,731,734,736,738,741,743,745,748,750],{"class":369,"line":32},[367,722,723],{"class":372},"    {",[367,725,726],{"class":573}," name",[367,728,591],{"class":372},[367,730,607],{"class":372},[367,732,733],{"class":439},"Widget",[367,735,597],{"class":372},[367,737,604],{"class":372},[367,739,740],{"class":573}," price",[367,742,591],{"class":372},[367,744,607],{"class":372},[367,746,747],{"class":439},"$9.99",[367,749,597],{"class":372},[367,751,752],{"class":372}," },\n",[367,754,755,757,759,761,763,766,768,770,772,774,776,779,781],{"class":369,"line":27},[367,756,723],{"class":372},[367,758,726],{"class":573},[367,760,591],{"class":372},[367,762,607],{"class":372},[367,764,765],{"class":439},"Gadget",[367,767,597],{"class":372},[367,769,604],{"class":372},[367,771,740],{"class":573},[367,773,591],{"class":372},[367,775,607],{"class":372},[367,777,778],{"class":439},"$14.99",[367,780,597],{"class":372},[367,782,752],{"class":372},[367,784,785],{"class":369,"line":52},[367,786,787],{"class":372},"  ]\n",[367,789,790,792,794],{"class":369,"line":128},[367,791,519],{"class":372},[367,793,697],{"class":376},[367,795,380],{"class":372},[367,797,798],{"class":369,"line":124},[367,799,800],{"emptyLinePlaceholder":14},"\n",[367,802,803,805,807],{"class":369,"line":48},[367,804,373],{"class":372},[367,806,377],{"class":376},[367,808,380],{"class":372},[367,810,811,813,815],{"class":369,"line":23},[367,812,385],{"class":372},[367,814,69],{"class":376},[367,816,380],{"class":372},[367,818,819,821,823,825],{"class":369,"line":140},[367,820,394],{"class":372},[367,822,59],{"class":376},[367,824,400],{"class":399},[367,826,380],{"class":372},[367,828,829,831,833],{"class":369,"line":56},[367,830,394],{"class":372},[367,832,30],{"class":376},[367,834,380],{"class":372},[367,836,837,839,841],{"class":369,"line":80},[367,838,415],{"class":372},[367,840,135],{"class":376},[367,842,380],{"class":372},[367,844,845,847,849],{"class":369,"line":36},[367,846,424],{"class":372},[367,848,51],{"class":376},[367,850,380],{"class":372},[367,852,853,855,857,860,862,864,867,869,871,873,875,878,880,883,886,888,890],{"class":369,"line":73},[367,854,449],{"class":372},[367,856,62],{"class":376},[367,858,859],{"class":429}," level",[367,861,433],{"class":372},[367,863,436],{"class":372},[367,865,866],{"class":439},"2",[367,868,436],{"class":372},[367,870,430],{"class":429},[367,872,433],{"class":372},[367,874,436],{"class":372},[367,876,877],{"class":439},"text-2xl",[367,879,436],{"class":372},[367,881,882],{"class":372},">",[367,884,885],{"class":399},"Your Order",[367,887,519],{"class":372},[367,889,62],{"class":376},[367,891,380],{"class":372},[367,893,894,896,899,902,904,906,909,911,914,916,918,921,923],{"class":369,"line":132},[367,895,449],{"class":372},[367,897,898],{"class":376},"div",[367,900,901],{"class":429}," v-for",[367,903,433],{"class":372},[367,905,436],{"class":372},[367,907,908],{"class":439},"item in items",[367,910,436],{"class":372},[367,912,913],{"class":429}," :key",[367,915,433],{"class":372},[367,917,436],{"class":372},[367,919,920],{"class":439},"item.name",[367,922,436],{"class":372},[367,924,380],{"class":372},[367,926,927,930,932,934,937,939,941],{"class":369,"line":66},[367,928,929],{"class":372},"            \u003C",[367,931,139],{"class":376},[367,933,882],{"class":372},[367,935,936],{"class":399},"{{ item.name }} — {{ item.price }}",[367,938,519],{"class":372},[367,940,139],{"class":376},[367,942,380],{"class":372},[367,944,945,947,949],{"class":369,"line":112},[367,946,474],{"class":372},[367,948,898],{"class":376},[367,950,380],{"class":372},[367,952,953,955,957],{"class":369,"line":40},[367,954,483],{"class":372},[367,956,51],{"class":376},[367,958,380],{"class":372},[367,960,961,963,965],{"class":369,"line":44},[367,962,492],{"class":372},[367,964,135],{"class":376},[367,966,380],{"class":372},[367,968,969,971,973],{"class":369,"line":84},[367,970,501],{"class":372},[367,972,30],{"class":376},[367,974,380],{"class":372},[367,976,977,979,981],{"class":369,"line":96},[367,978,510],{"class":372},[367,980,69],{"class":376},[367,982,380],{"class":372},[367,984,985,987,989],{"class":369,"line":88},[367,986,519],{"class":372},[367,988,377],{"class":376},[367,990,380],{"class":372},[326,992,993,994,533,997,533,1000,533,1003,1006],{},"You have full access to Vue's Composition API: ",[333,995,996],{},"ref",[333,998,999],{},"computed",[333,1001,1002],{},"v-for",[333,1004,1005],{},"v-if",", conditional rendering — it all works and you don't need to import them manually.",[341,1008,173],{"id":1009},"configuration",[326,1011,1012,1013,1016],{},"Use ",[333,1014,1015],{},"defineConfig()"," to override the global config for a specific template:",[357,1018,1021],{"className":359,"code":1019,"filename":1020,"language":362,"meta":363,"style":363},"\u003Cscript setup>\n  defineConfig({\n    css: {\n      inline: false,\n    },\n  })\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CHtml>\n    \u003CHead \u002F>\n    \u003CBody>\n      \u003CTailwind>\n        \u003CContainer class=\"max-w-xl\">\n          \u003CText>CSS inlining will be disabled for this template alone.\u003C\u002FText>\n        \u003C\u002FContainer>\n      \u003C\u002FTailwind>\n    \u003C\u002FBody>\n  \u003C\u002FHtml>\n\u003C\u002Ftemplate>\n","emails\u002Fmodern.vue",[333,1022,1023,1033,1040,1050,1063,1068,1073,1081,1085,1093,1101,1111,1119,1127,1146,1163,1171,1179,1187,1195],{"__ignoreMap":363},[367,1024,1025,1027,1029,1031],{"class":369,"line":18},[367,1026,373],{"class":372},[367,1028,697],{"class":376},[367,1030,700],{"class":429},[367,1032,380],{"class":372},[367,1034,1035,1038],{"class":369,"line":13},[367,1036,1037],{"class":429},"  defineConfig",[367,1039,583],{"class":372},[367,1041,1042,1045,1047],{"class":369,"line":32},[367,1043,1044],{"class":573},"    css",[367,1046,591],{"class":372},[367,1048,1049],{"class":372}," {\n",[367,1051,1052,1055,1057,1060],{"class":369,"line":27},[367,1053,1054],{"class":573},"      inline",[367,1056,591],{"class":372},[367,1058,1059],{"class":711}," false",[367,1061,1062],{"class":372},",\n",[367,1064,1065],{"class":369,"line":52},[367,1066,1067],{"class":372},"    },\n",[367,1069,1070],{"class":369,"line":128},[367,1071,1072],{"class":372},"  })\n",[367,1074,1075,1077,1079],{"class":369,"line":124},[367,1076,519],{"class":372},[367,1078,697],{"class":376},[367,1080,380],{"class":372},[367,1082,1083],{"class":369,"line":48},[367,1084,800],{"emptyLinePlaceholder":14},[367,1086,1087,1089,1091],{"class":369,"line":23},[367,1088,373],{"class":372},[367,1090,377],{"class":376},[367,1092,380],{"class":372},[367,1094,1095,1097,1099],{"class":369,"line":140},[367,1096,385],{"class":372},[367,1098,69],{"class":376},[367,1100,380],{"class":372},[367,1102,1103,1105,1107,1109],{"class":369,"line":56},[367,1104,394],{"class":372},[367,1106,59],{"class":376},[367,1108,400],{"class":399},[367,1110,380],{"class":372},[367,1112,1113,1115,1117],{"class":369,"line":80},[367,1114,394],{"class":372},[367,1116,30],{"class":376},[367,1118,380],{"class":372},[367,1120,1121,1123,1125],{"class":369,"line":36},[367,1122,415],{"class":372},[367,1124,135],{"class":376},[367,1126,380],{"class":372},[367,1128,1129,1131,1133,1135,1137,1139,1142,1144],{"class":369,"line":73},[367,1130,424],{"class":372},[367,1132,51],{"class":376},[367,1134,430],{"class":429},[367,1136,433],{"class":372},[367,1138,436],{"class":372},[367,1140,1141],{"class":439},"max-w-xl",[367,1143,436],{"class":372},[367,1145,380],{"class":372},[367,1147,1148,1150,1152,1154,1157,1159,1161],{"class":369,"line":132},[367,1149,449],{"class":372},[367,1151,139],{"class":376},[367,1153,882],{"class":372},[367,1155,1156],{"class":399},"CSS inlining will be disabled for this template alone.",[367,1158,519],{"class":372},[367,1160,139],{"class":376},[367,1162,380],{"class":372},[367,1164,1165,1167,1169],{"class":369,"line":66},[367,1166,483],{"class":372},[367,1168,51],{"class":376},[367,1170,380],{"class":372},[367,1172,1173,1175,1177],{"class":369,"line":112},[367,1174,492],{"class":372},[367,1176,135],{"class":376},[367,1178,380],{"class":372},[367,1180,1181,1183,1185],{"class":369,"line":40},[367,1182,501],{"class":372},[367,1184,30],{"class":376},[367,1186,380],{"class":372},[367,1188,1189,1191,1193],{"class":369,"line":44},[367,1190,510],{"class":372},[367,1192,69],{"class":376},[367,1194,380],{"class":372},[367,1196,1197,1199,1201],{"class":369,"line":84},[367,1198,519],{"class":372},[367,1200,377],{"class":376},[367,1202,380],{"class":372},[326,1204,1205,1206,1208],{},"The config you define in a template is merged with the framework defaults and the global config from your ",[333,1207,565],{}," (should you have one), so you only need to specify the options that you want to change.",[341,1210,1212],{"id":1211},"layout-component","Layout component",[326,1214,1215,1216,1218],{},"Use the ",[333,1217,76],{}," component to wrap a template with our opinionated skeleton that has built-in Tailwind CSS support, Inter font, meta tags and some Outlook (classic) resets.",[326,1220,1221],{},"For most projects, this is the recommended approach:",[357,1223,1226],{"className":1224,"code":1225,"filename":361,"language":362,"meta":363,"style":363},"language-vue shiki shiki-themes laserwave has-diff","\u003Ctemplate>\n  \u003CLayout> \u002F\u002F [!code ++]\n    \u003CContainer class=\"max-w-xl\">\n      \u003CHeading class=\"text-2xl\">Welcome!\u003C\u002FHeading>\n      \u003CText>Thanks for signing up.\u003C\u002FText>\n      \u003CButton href=\"https:\u002F\u002Fexample.com\">Get Started\u003C\u002FButton>\n    \u003C\u002FContainer>\n  \u003C\u002FLayout> \u002F\u002F [!code ++]\n\u003C\u002Ftemplate>\n",[333,1227,1228,1236,1247,1265,1292,1309,1338,1346,1355],{"__ignoreMap":363},[367,1229,1230,1232,1234],{"class":369,"line":18},[367,1231,373],{"class":372},[367,1233,377],{"class":376},[367,1235,380],{"class":372},[367,1237,1241,1243,1245],{"class":1238,"line":13},[369,1239,1240],"diff","add",[367,1242,385],{"class":372},[367,1244,76],{"class":376},[367,1246,882],{"class":372},[367,1248,1249,1251,1253,1255,1257,1259,1261,1263],{"class":369,"line":32},[367,1250,394],{"class":372},[367,1252,51],{"class":376},[367,1254,430],{"class":429},[367,1256,433],{"class":372},[367,1258,436],{"class":372},[367,1260,1141],{"class":439},[367,1262,436],{"class":372},[367,1264,380],{"class":372},[367,1266,1267,1269,1271,1273,1275,1277,1279,1281,1283,1286,1288,1290],{"class":369,"line":27},[367,1268,415],{"class":372},[367,1270,62],{"class":376},[367,1272,430],{"class":429},[367,1274,433],{"class":372},[367,1276,436],{"class":372},[367,1278,877],{"class":439},[367,1280,436],{"class":372},[367,1282,882],{"class":372},[367,1284,1285],{"class":399},"Welcome!",[367,1287,519],{"class":372},[367,1289,62],{"class":376},[367,1291,380],{"class":372},[367,1293,1294,1296,1298,1300,1303,1305,1307],{"class":369,"line":52},[367,1295,415],{"class":372},[367,1297,139],{"class":376},[367,1299,882],{"class":372},[367,1301,1302],{"class":399},"Thanks for signing up.",[367,1304,519],{"class":372},[367,1306,139],{"class":376},[367,1308,380],{"class":372},[367,1310,1311,1313,1315,1318,1320,1322,1325,1327,1329,1332,1334,1336],{"class":369,"line":128},[367,1312,415],{"class":372},[367,1314,35],{"class":376},[367,1316,1317],{"class":429}," href",[367,1319,433],{"class":372},[367,1321,436],{"class":372},[367,1323,1324],{"class":439},"https:\u002F\u002Fexample.com",[367,1326,436],{"class":372},[367,1328,882],{"class":372},[367,1330,1331],{"class":399},"Get Started",[367,1333,519],{"class":372},[367,1335,35],{"class":376},[367,1337,380],{"class":372},[367,1339,1340,1342,1344],{"class":369,"line":124},[367,1341,501],{"class":372},[367,1343,51],{"class":376},[367,1345,380],{"class":372},[367,1347,1349,1351,1353],{"class":1348,"line":48},[369,1239,1240],[367,1350,510],{"class":372},[367,1352,76],{"class":376},[367,1354,882],{"class":372},[367,1356,1357,1359,1361],{"class":369,"line":23},[367,1358,519],{"class":372},[367,1360,377],{"class":376},[367,1362,380],{"class":372},[341,1364,1366],{"id":1365},"prose-typography","Prose typography",[326,1368,1369,1370,1373,1374,1377,1378,1388],{},"We use ",[333,1371,1372],{},"@maizzle\u002Ftailwindcss"," which ships a ",[333,1375,1376],{},"prose"," utility that you can use for email-safe typography (vertical rhythm, text sizes etc.). It's inspired by ",[1379,1380,1385],"a",{"href":1381,"rel":1382,"target":1384},"https:\u002F\u002Fgithub.com\u002Ftailwindlabs\u002Ftailwindcss-typography",[1383],"nofollow","_blank",[333,1386,1387],{},"@tailwindcss\u002Ftypography"," and fine-tuned for email clients.",[326,1390,1391,1392,1394],{},"Drop ",[333,1393,1376],{}," on any wrapping element to style the content inside it:",[357,1396,1399],{"className":359,"code":1397,"filename":1398,"language":362,"meta":363,"style":363},"\u003Ctemplate>\n  \u003CLayout>\n    \u002F\u002F [!code word:prose]\n    \u003CContainer class=\"max-w-xl prose\">\n      \u003Ch1>Product Update\u003C\u002Fh1>\n      \u003Cp>We've shipped some exciting \u003Ca href=\"https:\u002F\u002Fexample.com\">new features\u003C\u002Fa>.\u003C\u002Fp>\n      \u003Cblockquote>\n        \u003Cp>\"This is a game-changer.\"\u003C\u002Fp>\n      \u003C\u002Fblockquote>\n    \u003C\u002FContainer>\n  \u003C\u002FLayout>\n\u003C\u002Ftemplate>\n","emails\u002Farticle.vue",[333,1400,1401,1409,1417,1439,1456,1501,1510,1527,1535,1543,1551],{"__ignoreMap":363},[367,1402,1403,1405,1407],{"class":369,"line":18},[367,1404,373],{"class":372},[367,1406,377],{"class":376},[367,1408,380],{"class":372},[367,1410,1411,1413,1415],{"class":369,"line":13},[367,1412,385],{"class":372},[367,1414,76],{"class":376},[367,1416,380],{"class":372},[367,1418,1419,1421,1423,1425,1427,1429,1432,1435,1437],{"class":369,"line":27},[367,1420,394],{"class":372},[367,1422,51],{"class":376},[367,1424,430],{"class":429},[367,1426,433],{"class":372},[367,1428,436],{"class":372},[367,1430,1431],{"class":439},"max-w-xl ",[367,1433,1376],{"class":1434},"highlighted-word sXiT_",[367,1436,436],{"class":372},[367,1438,380],{"class":372},[367,1440,1441,1443,1445,1447,1450,1452,1454],{"class":369,"line":52},[367,1442,415],{"class":372},[367,1444,322],{"class":376},[367,1446,882],{"class":372},[367,1448,1449],{"class":399},"Product Update",[367,1451,519],{"class":372},[367,1453,322],{"class":376},[367,1455,380],{"class":372},[367,1457,1458,1460,1462,1464,1467,1469,1471,1473,1475,1477,1479,1481,1483,1486,1488,1490,1492,1495,1497,1499],{"class":369,"line":128},[367,1459,415],{"class":372},[367,1461,326],{"class":376},[367,1463,882],{"class":372},[367,1465,1466],{"class":399},"We've shipped some exciting ",[367,1468,373],{"class":372},[367,1470,1379],{"class":376},[367,1472,1317],{"class":429},[367,1474,433],{"class":372},[367,1476,436],{"class":372},[367,1478,1324],{"class":439},[367,1480,436],{"class":372},[367,1482,882],{"class":372},[367,1484,1485],{"class":399},"new features",[367,1487,519],{"class":372},[367,1489,1379],{"class":376},[367,1491,882],{"class":372},[367,1493,1494],{"class":399},".",[367,1496,519],{"class":372},[367,1498,326],{"class":376},[367,1500,380],{"class":372},[367,1502,1503,1505,1508],{"class":369,"line":124},[367,1504,415],{"class":372},[367,1506,1507],{"class":376},"blockquote",[367,1509,380],{"class":372},[367,1511,1512,1514,1516,1518,1521,1523,1525],{"class":369,"line":48},[367,1513,424],{"class":372},[367,1515,326],{"class":376},[367,1517,882],{"class":372},[367,1519,1520],{"class":399},"\"This is a game-changer.\"",[367,1522,519],{"class":372},[367,1524,326],{"class":376},[367,1526,380],{"class":372},[367,1528,1529,1531,1533],{"class":369,"line":23},[367,1530,492],{"class":372},[367,1532,1507],{"class":376},[367,1534,380],{"class":372},[367,1536,1537,1539,1541],{"class":369,"line":140},[367,1538,501],{"class":372},[367,1540,51],{"class":376},[367,1542,380],{"class":372},[367,1544,1545,1547,1549],{"class":369,"line":56},[367,1546,510],{"class":372},[367,1548,76],{"class":376},[367,1550,380],{"class":372},[367,1552,1553,1555,1557],{"class":369,"line":80},[367,1554,519],{"class":372},[367,1556,377],{"class":376},[367,1558,380],{"class":372},[326,1560,1561,1562,1567],{},"Works great with the ",[1379,1563,1564],{"href":82},[333,1565,1566],{},"\u003CMarkdown>"," component when you need to style rendered Markdown:",[357,1569,1572],{"className":359,"code":1570,"filename":1571,"language":362,"meta":363,"style":363},"\u003Ctemplate>\n  \u003CLayout>\n    \u003CContainer class=\"max-w-xl\">\n      \u003CMarkdown wrapper class=\"prose\">\n        # Welcome aboard\n\n        Some _markdown_ content with a [link](https:\u002F\u002Fexample.com).\n      \u003C\u002FMarkdown>\n    \u003C\u002FContainer>\n  \u003C\u002FLayout>\n\u003C\u002Ftemplate>\n","emails\u002Fnewsletter.vue",[333,1573,1574,1582,1590,1608,1629,1634,1638,1643,1651,1659,1667],{"__ignoreMap":363},[367,1575,1576,1578,1580],{"class":369,"line":18},[367,1577,373],{"class":372},[367,1579,377],{"class":376},[367,1581,380],{"class":372},[367,1583,1584,1586,1588],{"class":369,"line":13},[367,1585,385],{"class":372},[367,1587,76],{"class":376},[367,1589,380],{"class":372},[367,1591,1592,1594,1596,1598,1600,1602,1604,1606],{"class":369,"line":32},[367,1593,394],{"class":372},[367,1595,51],{"class":376},[367,1597,430],{"class":429},[367,1599,433],{"class":372},[367,1601,436],{"class":372},[367,1603,1141],{"class":439},[367,1605,436],{"class":372},[367,1607,380],{"class":372},[367,1609,1610,1612,1614,1617,1619,1621,1623,1625,1627],{"class":369,"line":27},[367,1611,415],{"class":372},[367,1613,83],{"class":376},[367,1615,1616],{"class":429}," wrapper",[367,1618,430],{"class":429},[367,1620,433],{"class":372},[367,1622,436],{"class":372},[367,1624,1376],{"class":439},[367,1626,436],{"class":372},[367,1628,380],{"class":372},[367,1630,1631],{"class":369,"line":52},[367,1632,1633],{"class":399},"        # Welcome aboard\n",[367,1635,1636],{"class":369,"line":128},[367,1637,800],{"emptyLinePlaceholder":14},[367,1639,1640],{"class":369,"line":124},[367,1641,1642],{"class":399},"        Some _markdown_ content with a [link](https:\u002F\u002Fexample.com).\n",[367,1644,1645,1647,1649],{"class":369,"line":48},[367,1646,492],{"class":372},[367,1648,83],{"class":376},[367,1650,380],{"class":372},[367,1652,1653,1655,1657],{"class":369,"line":23},[367,1654,501],{"class":372},[367,1656,51],{"class":376},[367,1658,380],{"class":372},[367,1660,1661,1663,1665],{"class":369,"line":140},[367,1662,510],{"class":372},[367,1664,76],{"class":376},[367,1666,380],{"class":372},[367,1668,1669,1671,1673],{"class":369,"line":56},[367,1670,519],{"class":372},[367,1672,377],{"class":376},[367,1674,380],{"class":372},[326,1676,1677,1678,533,1681,533,1684,533,1687,1690,1691,1694,1695,1698],{},"Size presets (",[333,1679,1680],{},"prose-sm",[333,1682,1683],{},"prose-base",[333,1685,1686],{},"prose-lg",[333,1688,1689],{},"prose-xl",") scale the typographic and spacing scale together. Element modifiers like ",[333,1692,1693],{},"prose-a:text-blue-600"," or ",[333,1696,1697],{},"prose-h1:text-4xl"," override individual elements without ejecting from the preset.",[341,1700,1702],{"id":1701},"teleporting-content","Teleporting content",[326,1704,1705,1706,1713,1714,1717,1718,1721],{},"You may use Vue's ",[1379,1707,1710],{"href":1708,"rel":1709,"target":1384},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fbuilt-ins\u002Fteleport.html",[1383],[333,1711,1712],{},"\u003CTeleport>"," to move a chunk of markup somewhere else in the rendered HTML. Useful for things like injecting a ",[333,1715,1716],{},"\u003Cstyle>"," block into ",[333,1719,1720],{},"\u003Chead>"," from deep inside a component or adding some meta tags when some condition is met.",[1723,1724,1726],"h3",{"id":1725},"teleport-targets","Targets",[326,1728,1215,1729,1732],{},[333,1730,1731],{},"to"," prop to specify where the teleported content should land.",[1734,1735,1736,1751],"table",{},[1737,1738,1739],"thead",{},[1740,1741,1742,1748],"tr",{},[1743,1744,1745,1747],"th",{},[333,1746,1731],{}," value",[1743,1749,1750],{},"Where it lands",[1752,1753,1754,1767,1779,1791,1801,1811,1821],"tbody",{},[1740,1755,1756,1762],{},[1757,1758,1759],"td",{},[333,1760,1761],{},"head",[1757,1763,1764,1765],{},"Appended at the end of ",[333,1766,1720],{},[1740,1768,1769,1774],{},[1757,1770,1771],{},[333,1772,1773],{},"body",[1757,1775,1764,1776],{},[333,1777,1778],{},"\u003Cbody>",[1740,1780,1781,1786],{},[1757,1782,1783],{},[333,1784,1785],{},"body:start",[1757,1787,1788,1789],{},"Prepended at the start of ",[333,1790,1778],{},[1740,1792,1793,1798],{},[1757,1794,1795],{},[333,1796,1797],{},"#some-id",[1757,1799,1800],{},"Appended inside the matching element",[1740,1802,1803,1808],{},[1757,1804,1805],{},[333,1806,1807],{},"#some-id:start",[1757,1809,1810],{},"Prepended inside the matching element",[1740,1812,1813,1818],{},[1757,1814,1815],{},[333,1816,1817],{},".some-class",[1757,1819,1820],{},"Appended inside the first matching element",[1740,1822,1823,1828],{},[1757,1824,1825],{},[333,1826,1827],{},".some-class:start",[1757,1829,1830],{},"Prepended inside the first matching element",[525,1832,1833],{"type":527},[326,1834,1835,1836,1839],{},"The ",[333,1837,1838],{},":start"," suffix is Maizzle-specific, vanilla Vue Teleport always appends. Use it whenever order matters like in preheaders or structural overrides.",[1723,1841,1843],{"id":1842},"teleport-example","Example",[357,1845,1847],{"className":359,"code":1846,"filename":361,"language":362,"meta":363,"style":363},"\u003Ctemplate>\n  \u003CLayout>\n    \u003CTeleport to=\"head\">\n      \u003Cstyle embed>\n        .custom { color: #facade; }\n      \u003C\u002Fstyle>\n    \u003C\u002FTeleport>\n\n    \u003CTeleport to=\"body:start\">\n      \u003Cdiv style=\"display: none\">Welcome to Acme — let's get started.\u003C\u002Fdiv>\n    \u003C\u002FTeleport>\n\n    \u003CContainer>\n      \u003CText>Body content here.\u003C\u002FText>\n    \u003C\u002FContainer>\n\n    \u003CTeleport to=\"body\">\n      \u003Cimg src=\"https:\u002F\u002Fexample.com\u002Fpixel.gif\" width=\"1\" height=\"1\">\n    \u003C\u002FTeleport>\n  \u003C\u002FLayout>\n\u003C\u002Ftemplate>\n",[333,1848,1849,1857,1865,1885,1897,1925,1933,1941,1945,1963,1992,2000,2004,2012,2029,2037,2041,2059,2103,2111,2119],{"__ignoreMap":363},[367,1850,1851,1853,1855],{"class":369,"line":18},[367,1852,373],{"class":372},[367,1854,377],{"class":376},[367,1856,380],{"class":372},[367,1858,1859,1861,1863],{"class":369,"line":13},[367,1860,385],{"class":372},[367,1862,76],{"class":376},[367,1864,380],{"class":372},[367,1866,1867,1869,1872,1875,1877,1879,1881,1883],{"class":369,"line":32},[367,1868,394],{"class":372},[367,1870,1871],{"class":376},"Teleport",[367,1873,1874],{"class":429}," to",[367,1876,433],{"class":372},[367,1878,436],{"class":372},[367,1880,1761],{"class":439},[367,1882,436],{"class":372},[367,1884,380],{"class":372},[367,1886,1887,1889,1892,1895],{"class":369,"line":27},[367,1888,415],{"class":372},[367,1890,1891],{"class":376},"style",[367,1893,1894],{"class":429}," embed",[367,1896,380],{"class":372},[367,1898,1899,1902,1905,1908,1911,1913,1916,1919,1922],{"class":369,"line":52},[367,1900,1901],{"class":372},"        .",[367,1903,1904],{"class":429},"custom",[367,1906,1907],{"class":372}," {",[367,1909,1910],{"class":573}," color",[367,1912,591],{"class":372},[367,1914,1915],{"class":372}," #",[367,1917,1918],{"class":399},"facade",[367,1920,1921],{"class":372},";",[367,1923,1924],{"class":372}," }\n",[367,1926,1927,1929,1931],{"class":369,"line":128},[367,1928,492],{"class":372},[367,1930,1891],{"class":376},[367,1932,380],{"class":372},[367,1934,1935,1937,1939],{"class":369,"line":124},[367,1936,501],{"class":372},[367,1938,1871],{"class":376},[367,1940,380],{"class":372},[367,1942,1943],{"class":369,"line":48},[367,1944,800],{"emptyLinePlaceholder":14},[367,1946,1947,1949,1951,1953,1955,1957,1959,1961],{"class":369,"line":23},[367,1948,394],{"class":372},[367,1950,1871],{"class":376},[367,1952,1874],{"class":429},[367,1954,433],{"class":372},[367,1956,436],{"class":372},[367,1958,1785],{"class":439},[367,1960,436],{"class":372},[367,1962,380],{"class":372},[367,1964,1965,1967,1969,1972,1974,1976,1979,1981,1983,1986,1988,1990],{"class":369,"line":140},[367,1966,415],{"class":372},[367,1968,898],{"class":376},[367,1970,1971],{"class":429}," style",[367,1973,433],{"class":372},[367,1975,436],{"class":372},[367,1977,1978],{"class":439},"display: none",[367,1980,436],{"class":372},[367,1982,882],{"class":372},[367,1984,1985],{"class":399},"Welcome to Acme — let's get started.",[367,1987,519],{"class":372},[367,1989,898],{"class":376},[367,1991,380],{"class":372},[367,1993,1994,1996,1998],{"class":369,"line":56},[367,1995,501],{"class":372},[367,1997,1871],{"class":376},[367,1999,380],{"class":372},[367,2001,2002],{"class":369,"line":80},[367,2003,800],{"emptyLinePlaceholder":14},[367,2005,2006,2008,2010],{"class":369,"line":36},[367,2007,394],{"class":372},[367,2009,51],{"class":376},[367,2011,380],{"class":372},[367,2013,2014,2016,2018,2020,2023,2025,2027],{"class":369,"line":73},[367,2015,415],{"class":372},[367,2017,139],{"class":376},[367,2019,882],{"class":372},[367,2021,2022],{"class":399},"Body content here.",[367,2024,519],{"class":372},[367,2026,139],{"class":376},[367,2028,380],{"class":372},[367,2030,2031,2033,2035],{"class":369,"line":132},[367,2032,501],{"class":372},[367,2034,51],{"class":376},[367,2036,380],{"class":372},[367,2038,2039],{"class":369,"line":66},[367,2040,800],{"emptyLinePlaceholder":14},[367,2042,2043,2045,2047,2049,2051,2053,2055,2057],{"class":369,"line":112},[367,2044,394],{"class":372},[367,2046,1871],{"class":376},[367,2048,1874],{"class":429},[367,2050,433],{"class":372},[367,2052,436],{"class":372},[367,2054,1773],{"class":439},[367,2056,436],{"class":372},[367,2058,380],{"class":372},[367,2060,2061,2063,2066,2069,2071,2073,2076,2078,2081,2083,2085,2088,2090,2093,2095,2097,2099,2101],{"class":369,"line":40},[367,2062,415],{"class":372},[367,2064,2065],{"class":376},"img",[367,2067,2068],{"class":429}," src",[367,2070,433],{"class":372},[367,2072,436],{"class":372},[367,2074,2075],{"class":439},"https:\u002F\u002Fexample.com\u002Fpixel.gif",[367,2077,436],{"class":372},[367,2079,2080],{"class":429}," width",[367,2082,433],{"class":372},[367,2084,436],{"class":372},[367,2086,2087],{"class":439},"1",[367,2089,436],{"class":372},[367,2091,2092],{"class":429}," height",[367,2094,433],{"class":372},[367,2096,436],{"class":372},[367,2098,2087],{"class":439},[367,2100,436],{"class":372},[367,2102,380],{"class":372},[367,2104,2105,2107,2109],{"class":369,"line":44},[367,2106,501],{"class":372},[367,2108,1871],{"class":376},[367,2110,380],{"class":372},[367,2112,2113,2115,2117],{"class":369,"line":84},[367,2114,510],{"class":372},[367,2116,76],{"class":376},[367,2118,380],{"class":372},[367,2120,2121,2123,2125],{"class":369,"line":96},[367,2122,519],{"class":372},[367,2124,377],{"class":376},[367,2126,380],{"class":372},[525,2128,2129],{"type":527},[326,2130,2131,2134,2135,2138],{},[333,2132,2133],{},"\u003CPreheader>"," already uses ",[333,2136,2137],{},"\u003CTeleport to=\"body:start\">"," under the hood, so reach for it instead of writing the boilerplate by hand for inbox preview text.",[341,2140,2142],{"id":2141},"markdown","Markdown templates",[326,2144,2145,2146,2148],{},"You may also write email templates as ",[333,2147,669],{}," files, and they can even use Vue components:",[357,2150,2153],{"className":359,"code":2151,"filename":2152,"language":362,"meta":363,"style":363},"# Product Update\n\nWe've shipped some exciting new features.\n\n\u003CButton href=\"https:\u002F\u002Fexample.com\">See What's New\u003C\u002FButton>\n","emails\u002Fupdate.md",[333,2154,2155,2160,2164,2169,2173],{"__ignoreMap":363},[367,2156,2157],{"class":369,"line":18},[367,2158,2159],{"class":399},"# Product Update\n",[367,2161,2162],{"class":369,"line":13},[367,2163,800],{"emptyLinePlaceholder":14},[367,2165,2166],{"class":369,"line":32},[367,2167,2168],{"class":399},"We've shipped some exciting new features.\n",[367,2170,2171],{"class":369,"line":27},[367,2172,800],{"emptyLinePlaceholder":14},[367,2174,2175,2177,2179,2181,2183,2185,2187,2189,2191,2194,2196,2198],{"class":369,"line":52},[367,2176,373],{"class":372},[367,2178,35],{"class":376},[367,2180,1317],{"class":429},[367,2182,433],{"class":372},[367,2184,436],{"class":372},[367,2186,1324],{"class":439},[367,2188,436],{"class":372},[367,2190,882],{"class":372},[367,2192,2193],{"class":399},"See What's New",[367,2195,519],{"class":372},[367,2197,35],{"class":376},[367,2199,380],{"class":372},[326,2201,2202,2203,1494],{},"Code blocks in Markdown are automatically syntax-highlighted with ",[1379,2204,2207],{"href":2205,"rel":2206,"target":1384},"https:\u002F\u002Fshiki.style\u002F",[1383],"Shiki",[1723,2209,2211,2212,363],{"id":2210},"markdown-script","Using ",[333,2213,335],{},[326,2215,2216,2218,2219,2221,2222,2224],{},[333,2217,669],{}," templates support a ",[333,2220,335],{}," block at the top, just like ",[333,2223,350],{}," templates.",[326,2226,2227,2228,2231],{},"Bindings declared there are available in the markdown body via ",[333,2229,2230],{},"{{ }}"," interpolation, and you can use our composables too:",[357,2233,2236],{"className":359,"code":2234,"filename":2235,"language":362,"meta":363,"style":363},"\u003Cscript setup>\n  usePreheader('Your order has shipped')\n\n  const items = [\n    { name: 'Widget', price: '$9.99' },\n    { name: 'Gadget', price: '$14.99' },\n  ]\n\u003C\u002Fscript>\n\n# Your Order\n\n\u003Cdiv v-for=\"item in items\" :key=\"item.name\">\n  {{ item.name }} — {{ item.price }}\n\u003C\u002Fdiv>\n","emails\u002Forder.md",[333,2237,2238,2248,2266,2270,2280,2308,2336,2340,2348,2352,2357,2361,2405,2410],{"__ignoreMap":363},[367,2239,2240,2242,2244,2246],{"class":369,"line":18},[367,2241,373],{"class":372},[367,2243,697],{"class":376},[367,2245,700],{"class":429},[367,2247,380],{"class":372},[367,2249,2250,2253,2256,2258,2261,2263],{"class":369,"line":13},[367,2251,2252],{"class":429},"  usePreheader",[367,2254,2255],{"class":372},"(",[367,2257,597],{"class":372},[367,2259,2260],{"class":439},"Your order has shipped",[367,2262,597],{"class":372},[367,2264,2265],{"class":372},")\n",[367,2267,2268],{"class":369,"line":32},[367,2269,800],{"emptyLinePlaceholder":14},[367,2271,2272,2274,2276,2278],{"class":369,"line":27},[367,2273,708],{"class":707},[367,2275,712],{"class":711},[367,2277,715],{"class":376},[367,2279,718],{"class":372},[367,2281,2282,2284,2286,2288,2290,2292,2294,2296,2298,2300,2302,2304,2306],{"class":369,"line":52},[367,2283,723],{"class":372},[367,2285,726],{"class":573},[367,2287,591],{"class":372},[367,2289,607],{"class":372},[367,2291,733],{"class":439},[367,2293,597],{"class":372},[367,2295,604],{"class":372},[367,2297,740],{"class":573},[367,2299,591],{"class":372},[367,2301,607],{"class":372},[367,2303,747],{"class":439},[367,2305,597],{"class":372},[367,2307,752],{"class":372},[367,2309,2310,2312,2314,2316,2318,2320,2322,2324,2326,2328,2330,2332,2334],{"class":369,"line":128},[367,2311,723],{"class":372},[367,2313,726],{"class":573},[367,2315,591],{"class":372},[367,2317,607],{"class":372},[367,2319,765],{"class":439},[367,2321,597],{"class":372},[367,2323,604],{"class":372},[367,2325,740],{"class":573},[367,2327,591],{"class":372},[367,2329,607],{"class":372},[367,2331,778],{"class":439},[367,2333,597],{"class":372},[367,2335,752],{"class":372},[367,2337,2338],{"class":369,"line":124},[367,2339,787],{"class":372},[367,2341,2342,2344,2346],{"class":369,"line":48},[367,2343,519],{"class":372},[367,2345,697],{"class":376},[367,2347,380],{"class":372},[367,2349,2350],{"class":369,"line":23},[367,2351,800],{"emptyLinePlaceholder":14},[367,2353,2354],{"class":369,"line":140},[367,2355,2356],{"class":399},"# Your Order\n",[367,2358,2359],{"class":369,"line":56},[367,2360,800],{"emptyLinePlaceholder":14},[367,2362,2363,2365,2367,2369,2371,2373,2377,2380,2382,2384,2387,2390,2392,2394,2396,2398,2401,2403],{"class":369,"line":80},[367,2364,373],{"class":372},[367,2366,898],{"class":376},[367,2368,901],{"class":573},[367,2370,433],{"class":372},[367,2372,436],{"class":372},[367,2374,2376],{"class":2375},"sU-n2","item",[367,2378,2379],{"class":376}," in",[367,2381,712],{"class":2375},[367,2383,436],{"class":372},[367,2385,2386],{"class":372}," :",[367,2388,2389],{"class":429},"key",[367,2391,433],{"class":372},[367,2393,436],{"class":372},[367,2395,2376],{"class":2375},[367,2397,1494],{"class":376},[367,2399,2400],{"class":573},"name",[367,2402,436],{"class":372},[367,2404,380],{"class":372},[367,2406,2407],{"class":369,"line":36},[367,2408,2409],{"class":399},"  {{ item.name }} — {{ item.price }}\n",[367,2411,2412,2414,2416],{"class":369,"line":73},[367,2413,519],{"class":372},[367,2415,898],{"class":376},[367,2417,380],{"class":372},[1723,2419,2421],{"id":2420},"markdown-frontmatter","Frontmatter",[326,2423,2424,2425,2427,2428,533,2431,533,2434,2437,2438,2440,2441,591],{},"YAML frontmatter at the top of a ",[333,2426,669],{}," template is parsed automatically. Recognized head keys (",[333,2429,2430],{},"title",[333,2432,2433],{},"description",[333,2435,2436],{},"meta"," etc.) are injected into the ",[333,2439,1720],{}," via ",[1379,2442,2445],{"href":2443,"rel":2444,"target":1384},"https:\u002F\u002Funhead.unjs.io\u002F",[1383],[333,2446,2447],{},"@unhead\u002Fvue",[357,2449,2453],{"className":2450,"code":2451,"filename":2152,"language":2452,"meta":363,"style":363},"language-md shiki shiki-themes laserwave","---\ntitle: Product Update\ndescription: New features just shipped\n---\n\n# Hello\n","md",[333,2454,2455,2460,2465,2470,2474,2478],{"__ignoreMap":363},[367,2456,2457],{"class":369,"line":18},[367,2458,2459],{},"---\n",[367,2461,2462],{"class":369,"line":13},[367,2463,2464],{},"title: Product Update\n",[367,2466,2467],{"class":369,"line":32},[367,2468,2469],{},"description: New features just shipped\n",[367,2471,2472],{"class":369,"line":27},[367,2473,2459],{},[367,2475,2476],{"class":369,"line":52},[367,2477,800],{"emptyLinePlaceholder":14},[367,2479,2480],{"class":369,"line":128},[367,2481,2482],{},"# Hello\n",[326,2484,2485,2486,2489,2490,2492],{},"The rendered output gets ",[333,2487,2488],{},"\u003Ctitle>Product Update\u003C\u002Ftitle>"," plus the corresponding Open Graph and Twitter meta tags in ",[333,2491,1720],{},", which are useful for the webversion of an email.",[1723,2494,2496],{"id":2495},"markdown-layout","Default layout",[326,2498,2499,2501,2502,2505],{},[333,2500,669],{}," templates are wrapped in the built-in ",[333,2503,2504],{},"MarkdownLayout"," component automatically.",[326,2507,2508,2509,533,2512,2514,2515,2518],{},"You get a complete email document (",[333,2510,2511],{},"\u003Chtml>",[333,2513,1720],{},", MSO\u002FVML fallback, body shell, plus a centered ",[333,2516,2517],{},"\u003CContainer class=\"max-w-xl\">",") without writing any boilerplate.",[326,2520,2521,2523,2524,2529,2530,2532],{},[333,2522,2504],{}," is a thin shell around ",[1379,2525,2526],{"href":75},[333,2527,2528],{},"\u003CLayout>"," that adds the constrained-width ",[333,2531,51],{}," so prose-style markdown reads well out of the box.",[525,2534,2535],{"type":527},[326,2536,2537,2538,2540,2541,2543,2544,2547,2548,2554],{},"This auto-wrap only applies to ",[333,2539,669],{}," files used as templates. ",[333,2542,669],{}," files placed in a ",[333,2545,2546],{},"components\u002F"," directory (or any directory listed in ",[1379,2549,2551],{"href":2550},"\u002Fdocs\u002Fdevelopment\u002Fconfiguration#componentssource",[333,2552,2553],{},"components.source",") are treated as regular components, so you can use them in templates like you would any component.",[1723,2556,2558],{"id":2557},"markdown-custom-layout","Choosing a different layout",[326,2560,2561,2562,2565],{},"Set the ",[333,2563,2564],{},"layout"," frontmatter key to wrap the markdown with a different component:",[357,2567,2569],{"className":2450,"code":2568,"filename":2152,"language":2452,"meta":363,"style":363},"---\nlayout: MyCustomLayout\n---\n\n# Product Update\n\n...\n",[333,2570,2571,2575,2580,2584,2588,2592,2596],{"__ignoreMap":363},[367,2572,2573],{"class":369,"line":18},[367,2574,2459],{},[367,2576,2577],{"class":369,"line":13},[367,2578,2579],{},"layout: MyCustomLayout\n",[367,2581,2582],{"class":369,"line":32},[367,2583,2459],{},[367,2585,2586],{"class":369,"line":27},[367,2587,800],{"emptyLinePlaceholder":14},[367,2589,2590],{"class":369,"line":52},[367,2591,2159],{},[367,2593,2594],{"class":369,"line":128},[367,2595,800],{"emptyLinePlaceholder":14},[367,2597,2598],{"class":369,"line":124},[367,2599,2600],{},"...\n",[326,2602,2603,2604,2607,2608,1494],{},"The value must be the PascalCase name of a component, so in our example above ",[333,2605,2606],{},"MyCustomLayout"," would reference ",[333,2609,2610],{},"components\u002FMyCustomLayout.vue",[326,2612,2613,2614,591],{},"To opt out of any wrapping entirely, set ",[333,2615,2616],{},"layout: false",[357,2618,2621],{"className":2450,"code":2619,"filename":2620,"language":2452,"meta":363,"style":363},"---\nlayout: false\n---\n\n# Just the markdown, no wrapper\n","emails\u002Fraw.md",[333,2622,2623,2627,2632,2636,2640],{"__ignoreMap":363},[367,2624,2625],{"class":369,"line":18},[367,2626,2459],{},[367,2628,2629],{"class":369,"line":13},[367,2630,2631],{},"layout: false\n",[367,2633,2634],{"class":369,"line":32},[367,2635,2459],{},[367,2637,2638],{"class":369,"line":27},[367,2639,800],{"emptyLinePlaceholder":14},[367,2641,2642],{"class":369,"line":52},[367,2643,2644],{},"# Just the markdown, no wrapper\n",[1723,2646,2648],{"id":2647},"markdown-layout-props","Frontmatter as layout props",[326,2650,2651,2652,2655],{},"The whole frontmatter object is passed to the wrapping layout as the ",[333,2653,2654],{},"frontmatter"," prop.",[326,2657,2658,2660,2661,2663,2664,533,2667,533,2670,2673],{},[333,2659,2504],{}," uses it to populate ",[333,2662,76],{},"'s props (",[333,2665,2666],{},"lang",[333,2668,2669],{},"dir",[333,2671,2672],{},"ariaLabel"," etc.) when the corresponding key is set:",[2675,2676,2677,2713],"code-tabs",{},[2678,2679,2681],"code-tab",{"label":2680},"emails\u002Fwelcome.md",[357,2682,2684],{"className":2450,"code":2683,"language":2452,"meta":363,"style":363},"---\nlang: fr\nariaLabel: Bienvenue à bord\n---\n\n# Bienvenue\n",[333,2685,2686,2690,2695,2700,2704,2708],{"__ignoreMap":363},[367,2687,2688],{"class":369,"line":18},[367,2689,2459],{},[367,2691,2692],{"class":369,"line":13},[367,2693,2694],{},"lang: fr\n",[367,2696,2697],{"class":369,"line":32},[367,2698,2699],{},"ariaLabel: Bienvenue à bord\n",[367,2701,2702],{"class":369,"line":27},[367,2703,2459],{},[367,2705,2706],{"class":369,"line":52},[367,2707,800],{"emptyLinePlaceholder":14},[367,2709,2710],{"class":369,"line":128},[367,2711,2712],{},"# Bienvenue\n",[2678,2714,2716],{"label":2715},"dist\u002Fwelcome.html",[357,2717,2721],{"className":2718,"code":2719,"language":2720,"meta":363,"style":363},"language-html shiki shiki-themes laserwave","\u003C!DOCTYPE html>\n\u003C!-- [!code word:lang=\"fr\"] -->\n\u003Chtml lang=\"fr\" ...>\n  \u003C!-- ... -->\n  \u003Cbody>\n    \u003C!-- [!code word:aria-label=\"Bienvenue à bord\"] -->\n    \u003Cdiv ... aria-label=\"Bienvenue à bord\">\n      \u003Ch1>Bienvenue\u003C\u002Fh1>\n    \u003C\u002Fdiv>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html",[333,2722,2723,2736,2763,2769,2777,2801,2818,2826,2834],{"__ignoreMap":363},[367,2724,2725,2728,2731,2734],{"class":369,"line":18},[367,2726,2727],{"class":372},"\u003C!",[367,2729,2730],{"class":376},"DOCTYPE",[367,2732,2733],{"class":429}," html",[367,2735,380],{"class":372},[367,2737,2738,2740,2742,2745,2748,2751,2753,2756,2758,2761],{"class":369,"line":32},[367,2739,373],{"class":372},[367,2741,2720],{"class":376},[367,2743,2744],{"class":429}," ",[367,2746,2666],{"class":2747},"highlighted-word sZNF3",[367,2749,433],{"class":2750},"highlighted-word sGGKt",[367,2752,436],{"class":2750},[367,2754,2755],{"class":1434},"fr",[367,2757,436],{"class":2750},[367,2759,2760],{"class":429}," ...",[367,2762,380],{"class":372},[367,2764,2765],{"class":369,"line":27},[367,2766,2768],{"class":2767},"sVsQ9","  \u003C!-- ... -->\n",[367,2770,2771,2773,2775],{"class":369,"line":52},[367,2772,385],{"class":372},[367,2774,1773],{"class":376},[367,2776,380],{"class":372},[367,2778,2779,2781,2783,2785,2787,2790,2792,2794,2797,2799],{"class":369,"line":124},[367,2780,394],{"class":372},[367,2782,898],{"class":376},[367,2784,2760],{"class":429},[367,2786,2744],{"class":429},[367,2788,2789],{"class":2747},"aria-label",[367,2791,433],{"class":2750},[367,2793,436],{"class":2750},[367,2795,2796],{"class":1434},"Bienvenue à bord",[367,2798,436],{"class":2750},[367,2800,380],{"class":372},[367,2802,2803,2805,2807,2809,2812,2814,2816],{"class":369,"line":48},[367,2804,415],{"class":372},[367,2806,322],{"class":376},[367,2808,882],{"class":372},[367,2810,2811],{"class":399},"Bienvenue",[367,2813,519],{"class":372},[367,2815,322],{"class":376},[367,2817,380],{"class":372},[367,2819,2820,2822,2824],{"class":369,"line":23},[367,2821,501],{"class":372},[367,2823,898],{"class":376},[367,2825,380],{"class":372},[367,2827,2828,2830,2832],{"class":369,"line":140},[367,2829,510],{"class":372},[367,2831,1773],{"class":376},[367,2833,380],{"class":372},[367,2835,2836,2838,2840],{"class":369,"line":56},[367,2837,519],{"class":372},[367,2839,2720],{"class":376},[367,2841,380],{"class":372},[326,2843,2844,2845,2847],{},"To consume frontmatter inside a custom layout, declare a ",[333,2846,2654],{}," prop:",[357,2849,2852],{"className":359,"code":2850,"filename":2851,"language":362,"meta":363,"style":363},"\u003Cscript setup>\nconst props = defineProps({\n  frontmatter: { type: Object, default: () => ({}) },\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CLayout :aria-label=\"props.frontmatter.title\">\n    \u003Ch1>{{ props.frontmatter.title }}\u003C\u002Fh1>\n    \u003Cslot \u002F>\n  \u003C\u002FLayout>\n\u003C\u002Ftemplate>\n","components\u002FMarketingLayout.vue",[333,2853,2854,2864,2879,2913,2917,2925,2929,2937,2957,2974,2985,2993],{"__ignoreMap":363},[367,2855,2856,2858,2860,2862],{"class":369,"line":18},[367,2857,373],{"class":372},[367,2859,697],{"class":376},[367,2861,700],{"class":429},[367,2863,380],{"class":372},[367,2865,2866,2869,2872,2874,2877],{"class":369,"line":13},[367,2867,2868],{"class":707},"const",[367,2870,2871],{"class":711}," props",[367,2873,715],{"class":376},[367,2875,2876],{"class":429}," defineProps",[367,2878,583],{"class":372},[367,2880,2881,2884,2886,2888,2891,2893,2896,2898,2900,2902,2905,2908,2911],{"class":369,"line":32},[367,2882,2883],{"class":573},"  frontmatter",[367,2885,591],{"class":372},[367,2887,1907],{"class":372},[367,2889,2890],{"class":573}," type",[367,2892,591],{"class":372},[367,2894,2895],{"class":2375}," Object",[367,2897,604],{"class":372},[367,2899,577],{"class":429},[367,2901,591],{"class":372},[367,2903,2904],{"class":372}," ()",[367,2906,2907],{"class":376}," =>",[367,2909,2910],{"class":372}," ({})",[367,2912,752],{"class":372},[367,2914,2915],{"class":369,"line":27},[367,2916,620],{"class":372},[367,2918,2919,2921,2923],{"class":369,"line":52},[367,2920,519],{"class":372},[367,2922,697],{"class":376},[367,2924,380],{"class":372},[367,2926,2927],{"class":369,"line":128},[367,2928,800],{"emptyLinePlaceholder":14},[367,2930,2931,2933,2935],{"class":369,"line":124},[367,2932,373],{"class":372},[367,2934,377],{"class":376},[367,2936,380],{"class":372},[367,2938,2939,2941,2943,2946,2948,2950,2953,2955],{"class":369,"line":48},[367,2940,385],{"class":372},[367,2942,76],{"class":376},[367,2944,2945],{"class":429}," :aria-label",[367,2947,433],{"class":372},[367,2949,436],{"class":372},[367,2951,2952],{"class":439},"props.frontmatter.title",[367,2954,436],{"class":372},[367,2956,380],{"class":372},[367,2958,2959,2961,2963,2965,2968,2970,2972],{"class":369,"line":23},[367,2960,394],{"class":372},[367,2962,322],{"class":376},[367,2964,882],{"class":372},[367,2966,2967],{"class":399},"{{ props.frontmatter.title }}",[367,2969,519],{"class":372},[367,2971,322],{"class":376},[367,2973,380],{"class":372},[367,2975,2976,2978,2981,2983],{"class":369,"line":140},[367,2977,394],{"class":372},[367,2979,2980],{"class":376},"slot",[367,2982,400],{"class":399},[367,2984,380],{"class":372},[367,2986,2987,2989,2991],{"class":369,"line":56},[367,2988,510],{"class":372},[367,2990,76],{"class":376},[367,2992,380],{"class":372},[367,2994,2995,2997,2999],{"class":369,"line":80},[367,2996,519],{"class":372},[367,2998,377],{"class":376},[367,3000,380],{"class":372},[326,3002,3003],{},"Then, use it in the markdown template:",[357,3005,3008],{"className":2450,"code":3006,"filename":3007,"language":2452,"meta":363,"style":363},"---\nlayout: MarketingLayout\ntitle: Big Sale\n---\n\n# 50% off everything\n","emails\u002Fpromo.md",[333,3009,3010,3014,3019,3024,3028,3032],{"__ignoreMap":363},[367,3011,3012],{"class":369,"line":18},[367,3013,2459],{},[367,3015,3016],{"class":369,"line":13},[367,3017,3018],{},"layout: MarketingLayout\n",[367,3020,3021],{"class":369,"line":32},[367,3022,3023],{},"title: Big Sale\n",[367,3025,3026],{"class":369,"line":27},[367,3027,2459],{},[367,3029,3030],{"class":369,"line":52},[367,3031,800],{"emptyLinePlaceholder":14},[367,3033,3034],{"class":369,"line":128},[367,3035,3036],{},"# 50% off everything\n",[1723,3038,3040],{"id":3039},"markdown-global-layout","Overriding the default globally",[326,3042,3043,3044,3046,3047,3049,3050,3053],{},"To replace ",[333,3045,2504],{}," as the default wrap for every ",[333,3048,669],{}," template at once, configure ",[333,3051,3052],{},"markdown.wrapperComponent"," in your config:",[357,3055,3057],{"className":563,"code":3056,"filename":565,"language":566,"meta":363,"style":363},"export default defineConfig({\n  markdown: {\n    wrapperComponent: 'MarketingLayout',\n  },\n})\n",[333,3058,3059,3069,3078,3094,3099],{"__ignoreMap":363},[367,3060,3061,3063,3065,3067],{"class":369,"line":18},[367,3062,574],{"class":573},[367,3064,577],{"class":573},[367,3066,580],{"class":429},[367,3068,583],{"class":372},[367,3070,3071,3074,3076],{"class":369,"line":13},[367,3072,3073],{"class":399},"  markdown",[367,3075,591],{"class":372},[367,3077,1049],{"class":372},[367,3079,3080,3083,3085,3087,3090,3092],{"class":369,"line":32},[367,3081,3082],{"class":399},"    wrapperComponent",[367,3084,591],{"class":372},[367,3086,607],{"class":372},[367,3088,3089],{"class":439},"MarketingLayout",[367,3091,597],{"class":372},[367,3093,1062],{"class":372},[367,3095,3096],{"class":369,"line":27},[367,3097,3098],{"class":372},"  },\n",[367,3100,3101],{"class":369,"line":52},[367,3102,620],{"class":372},[326,3104,3105,3106,3109],{},"The value can also be a function ",[333,3107,3108],{},"(id, raw) => string | null"," for conditional logic.",[326,3111,3112,3113,3116,3117,3119],{},"When you set your own ",[333,3114,3115],{},"wrapperComponent",", it takes precedence over both the default and the ",[333,3118,2564],{}," frontmatter key.",[341,3121,3123],{"id":3122},"amp4email","AMP4Email",[326,3125,3126],{},"You can author AMP4Email templates in Maizzle without extra setup.",[2675,3128,3129,3408],{},[2678,3130,3132],{"label":3131},"emails\u002Fpromo.vue",[357,3133,3135],{"className":359,"code":3134,"language":362,"meta":363,"style":363},"\u003Ctemplate>\n  \u003CHtml amp4email>\n    \u003CHead>\n      \u003Cstyle amp-custom>\n        @reference \"@maizzle\u002Ftailwindcss\";\n\n        amp-carousel {\n          @apply border border-gray-300 p-4;\n        }\n      \u003C\u002Fstyle>\n    \u003C\u002FHead>\n    \u003CBody>\n      \u003Camp-carousel layout=\"responsive\" width=\"600\" height=\"300\" type=\"slides\">\n        \u003Camp-img src=\"https:\u002F\u002Fexample.com\u002Fa.jpg\" width=\"600\" height=\"300\" \u002F>\n        \u003Camp-img src=\"https:\u002F\u002Fexample.com\u002Fb.jpg\" width=\"600\" height=\"300\" \u002F>\n      \u003C\u002Famp-carousel>\n    \u003C\u002FBody>\n  \u003C\u002FHtml>\n\u003C\u002Ftemplate>\n",[333,3136,3137,3145,3156,3164,3175,3189,3193,3200,3213,3218,3226,3234,3242,3296,3337,3376,3384,3392,3400],{"__ignoreMap":363},[367,3138,3139,3141,3143],{"class":369,"line":18},[367,3140,373],{"class":372},[367,3142,377],{"class":376},[367,3144,380],{"class":372},[367,3146,3147,3149,3151,3154],{"class":369,"line":13},[367,3148,385],{"class":372},[367,3150,69],{"class":376},[367,3152,3153],{"class":429}," amp4email",[367,3155,380],{"class":372},[367,3157,3158,3160,3162],{"class":369,"line":32},[367,3159,394],{"class":372},[367,3161,59],{"class":376},[367,3163,380],{"class":372},[367,3165,3166,3168,3170,3173],{"class":369,"line":27},[367,3167,415],{"class":372},[367,3169,1891],{"class":376},[367,3171,3172],{"class":429}," amp-custom",[367,3174,380],{"class":372},[367,3176,3177,3180,3183,3186],{"class":369,"line":52},[367,3178,3179],{"class":372},"        @",[367,3181,3182],{"class":573},"reference",[367,3184,3185],{"class":399}," \"@maizzle\u002Ftailwindcss\"",[367,3187,3188],{"class":372},";\n",[367,3190,3191],{"class":369,"line":128},[367,3192,800],{"emptyLinePlaceholder":14},[367,3194,3195,3198],{"class":369,"line":124},[367,3196,3197],{"class":376},"        amp-carousel",[367,3199,1049],{"class":372},[367,3201,3202,3205,3208,3211],{"class":369,"line":48},[367,3203,3204],{"class":399},"          @apply ",[367,3206,3207],{"class":573},"border",[367,3209,3210],{"class":399}," border-gray-300 p-4",[367,3212,3188],{"class":372},[367,3214,3215],{"class":369,"line":23},[367,3216,3217],{"class":372},"        }\n",[367,3219,3220,3222,3224],{"class":369,"line":140},[367,3221,492],{"class":372},[367,3223,1891],{"class":376},[367,3225,380],{"class":372},[367,3227,3228,3230,3232],{"class":369,"line":56},[367,3229,501],{"class":372},[367,3231,59],{"class":376},[367,3233,380],{"class":372},[367,3235,3236,3238,3240],{"class":369,"line":80},[367,3237,394],{"class":372},[367,3239,30],{"class":376},[367,3241,380],{"class":372},[367,3243,3244,3246,3249,3252,3254,3256,3259,3261,3263,3265,3267,3270,3272,3274,3276,3278,3281,3283,3285,3287,3289,3292,3294],{"class":369,"line":36},[367,3245,415],{"class":372},[367,3247,3248],{"class":376},"amp-carousel",[367,3250,3251],{"class":429}," layout",[367,3253,433],{"class":372},[367,3255,436],{"class":372},[367,3257,3258],{"class":439},"responsive",[367,3260,436],{"class":372},[367,3262,2080],{"class":429},[367,3264,433],{"class":372},[367,3266,436],{"class":372},[367,3268,3269],{"class":439},"600",[367,3271,436],{"class":372},[367,3273,2092],{"class":429},[367,3275,433],{"class":372},[367,3277,436],{"class":372},[367,3279,3280],{"class":439},"300",[367,3282,436],{"class":372},[367,3284,2890],{"class":429},[367,3286,433],{"class":372},[367,3288,436],{"class":372},[367,3290,3291],{"class":439},"slides",[367,3293,436],{"class":372},[367,3295,380],{"class":372},[367,3297,3298,3300,3303,3305,3307,3309,3312,3314,3316,3318,3320,3322,3324,3326,3328,3330,3332,3334],{"class":369,"line":73},[367,3299,424],{"class":372},[367,3301,3302],{"class":376},"amp-img",[367,3304,2068],{"class":429},[367,3306,433],{"class":372},[367,3308,436],{"class":372},[367,3310,3311],{"class":439},"https:\u002F\u002Fexample.com\u002Fa.jpg",[367,3313,436],{"class":372},[367,3315,2080],{"class":429},[367,3317,433],{"class":372},[367,3319,436],{"class":372},[367,3321,3269],{"class":439},[367,3323,436],{"class":372},[367,3325,2092],{"class":429},[367,3327,433],{"class":372},[367,3329,436],{"class":372},[367,3331,3280],{"class":439},[367,3333,436],{"class":372},[367,3335,3336],{"class":372}," \u002F>\n",[367,3338,3339,3341,3343,3345,3347,3349,3352,3354,3356,3358,3360,3362,3364,3366,3368,3370,3372,3374],{"class":369,"line":132},[367,3340,424],{"class":372},[367,3342,3302],{"class":376},[367,3344,2068],{"class":429},[367,3346,433],{"class":372},[367,3348,436],{"class":372},[367,3350,3351],{"class":439},"https:\u002F\u002Fexample.com\u002Fb.jpg",[367,3353,436],{"class":372},[367,3355,2080],{"class":429},[367,3357,433],{"class":372},[367,3359,436],{"class":372},[367,3361,3269],{"class":439},[367,3363,436],{"class":372},[367,3365,2092],{"class":429},[367,3367,433],{"class":372},[367,3369,436],{"class":372},[367,3371,3280],{"class":439},[367,3373,436],{"class":372},[367,3375,3336],{"class":372},[367,3377,3378,3380,3382],{"class":369,"line":66},[367,3379,492],{"class":372},[367,3381,3248],{"class":376},[367,3383,380],{"class":372},[367,3385,3386,3388,3390],{"class":369,"line":112},[367,3387,501],{"class":372},[367,3389,30],{"class":376},[367,3391,380],{"class":372},[367,3393,3394,3396,3398],{"class":369,"line":40},[367,3395,510],{"class":372},[367,3397,69],{"class":376},[367,3399,380],{"class":372},[367,3401,3402,3404,3406],{"class":369,"line":44},[367,3403,519],{"class":372},[367,3405,377],{"class":376},[367,3407,380],{"class":372},[2678,3409,3411],{"label":3410},"dist\u002Fpromo.html",[357,3412,3414],{"className":2718,"code":3413,"language":2720,"meta":363,"style":363},"\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\" dir=\"ltr\" xmlns:v=\"urn:schemas-microsoft-com:vml\" xmlns:o=\"urn:schemas-microsoft-com:office:office\" amp4email>\n  \u003Chead>\n    \u003Cmeta charset=\"utf-8\">\n    \u003Cmeta name=\"x-apple-disable-message-reformatting\">\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    \u003Cstyle amp-custom>\n      amp-carousel {\n        border: 1px solid #d1d5dc;\n        padding: 16px;\n      }\n    \u003C\u002Fstyle>\n  \u003C\u002Fhead>\n  \u003Cbody xml:lang=\"en\" dir=\"ltr\" style=\"margin: 0; padding: 0; width: 100%; height: 100%; word-break: break-word;\">\n    \u003Cdiv role=\"article\" aria-roledescription=\"email\" lang=\"en\" dir=\"ltr\" style=\"font-size: medium; font-size: max(16px, 1rem)\">\n      \u003Camp-carousel layout=\"responsive\" width=\"600\" height=\"300\" type=\"slides\">\n        \u003Camp-img src=\"https:\u002F\u002Fexample.com\u002Fa.jpg\" width=\"600\" height=\"300\">\u003C\u002Famp-img>\n        \u003Camp-img src=\"https:\u002F\u002Fexample.com\u002Fb.jpg\" width=\"600\" height=\"300\">\u003C\u002Famp-img>\n      \u003C\u002Famp-carousel>\n    \u003C\u002Fdiv>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[333,3415,3416,3426,3484,3492,3512,3531,3562,3572,3579,3604,3618,3623,3631,3639,3679,3742,3790,3833,3875,3883,3891,3899],{"__ignoreMap":363},[367,3417,3418,3420,3422,3424],{"class":369,"line":18},[367,3419,2727],{"class":372},[367,3421,2730],{"class":376},[367,3423,2733],{"class":429},[367,3425,380],{"class":372},[367,3427,3428,3430,3432,3435,3437,3439,3442,3444,3447,3449,3451,3454,3456,3459,3461,3463,3466,3468,3471,3473,3475,3478,3480,3482],{"class":369,"line":13},[367,3429,373],{"class":372},[367,3431,2720],{"class":376},[367,3433,3434],{"class":429}," lang",[367,3436,433],{"class":372},[367,3438,436],{"class":372},[367,3440,3441],{"class":439},"en",[367,3443,436],{"class":372},[367,3445,3446],{"class":429}," dir",[367,3448,433],{"class":372},[367,3450,436],{"class":372},[367,3452,3453],{"class":439},"ltr",[367,3455,436],{"class":372},[367,3457,3458],{"class":429}," xmlns:v",[367,3460,433],{"class":372},[367,3462,436],{"class":372},[367,3464,3465],{"class":439},"urn:schemas-microsoft-com:vml",[367,3467,436],{"class":372},[367,3469,3470],{"class":429}," xmlns:o",[367,3472,433],{"class":372},[367,3474,436],{"class":372},[367,3476,3477],{"class":439},"urn:schemas-microsoft-com:office:office",[367,3479,436],{"class":372},[367,3481,3153],{"class":429},[367,3483,380],{"class":372},[367,3485,3486,3488,3490],{"class":369,"line":32},[367,3487,385],{"class":372},[367,3489,1761],{"class":376},[367,3491,380],{"class":372},[367,3493,3494,3496,3498,3501,3503,3505,3508,3510],{"class":369,"line":27},[367,3495,394],{"class":372},[367,3497,2436],{"class":376},[367,3499,3500],{"class":429}," charset",[367,3502,433],{"class":372},[367,3504,436],{"class":372},[367,3506,3507],{"class":439},"utf-8",[367,3509,436],{"class":372},[367,3511,380],{"class":372},[367,3513,3514,3516,3518,3520,3522,3524,3527,3529],{"class":369,"line":52},[367,3515,394],{"class":372},[367,3517,2436],{"class":376},[367,3519,726],{"class":429},[367,3521,433],{"class":372},[367,3523,436],{"class":372},[367,3525,3526],{"class":439},"x-apple-disable-message-reformatting",[367,3528,436],{"class":372},[367,3530,380],{"class":372},[367,3532,3533,3535,3537,3539,3541,3543,3546,3548,3551,3553,3555,3558,3560],{"class":369,"line":128},[367,3534,394],{"class":372},[367,3536,2436],{"class":376},[367,3538,726],{"class":429},[367,3540,433],{"class":372},[367,3542,436],{"class":372},[367,3544,3545],{"class":439},"viewport",[367,3547,436],{"class":372},[367,3549,3550],{"class":429}," content",[367,3552,433],{"class":372},[367,3554,436],{"class":372},[367,3556,3557],{"class":439},"width=device-width, initial-scale=1",[367,3559,436],{"class":372},[367,3561,380],{"class":372},[367,3563,3564,3566,3568,3570],{"class":369,"line":124},[367,3565,394],{"class":372},[367,3567,1891],{"class":376},[367,3569,3172],{"class":429},[367,3571,380],{"class":372},[367,3573,3574,3577],{"class":369,"line":48},[367,3575,3576],{"class":376},"      amp-carousel",[367,3578,1049],{"class":372},[367,3580,3581,3584,3586,3590,3593,3596,3599,3602],{"class":369,"line":23},[367,3582,3583],{"class":573},"        border",[367,3585,591],{"class":372},[367,3587,3589],{"class":3588},"s0EtI"," 1",[367,3591,3592],{"class":573},"px",[367,3594,3595],{"class":399}," solid ",[367,3597,3598],{"class":372},"#",[367,3600,3601],{"class":399},"d1d5dc",[367,3603,3188],{"class":372},[367,3605,3606,3609,3611,3614,3616],{"class":369,"line":140},[367,3607,3608],{"class":573},"        padding",[367,3610,591],{"class":372},[367,3612,3613],{"class":3588}," 16",[367,3615,3592],{"class":573},[367,3617,3188],{"class":372},[367,3619,3620],{"class":369,"line":56},[367,3621,3622],{"class":372},"      }\n",[367,3624,3625,3627,3629],{"class":369,"line":80},[367,3626,501],{"class":372},[367,3628,1891],{"class":376},[367,3630,380],{"class":372},[367,3632,3633,3635,3637],{"class":369,"line":36},[367,3634,510],{"class":372},[367,3636,1761],{"class":376},[367,3638,380],{"class":372},[367,3640,3641,3643,3645,3648,3650,3652,3654,3656,3658,3660,3662,3664,3666,3668,3670,3672,3675,3677],{"class":369,"line":73},[367,3642,385],{"class":372},[367,3644,1773],{"class":376},[367,3646,3647],{"class":429}," xml:lang",[367,3649,433],{"class":372},[367,3651,436],{"class":372},[367,3653,3441],{"class":439},[367,3655,436],{"class":372},[367,3657,3446],{"class":429},[367,3659,433],{"class":372},[367,3661,436],{"class":372},[367,3663,3453],{"class":439},[367,3665,436],{"class":372},[367,3667,1971],{"class":429},[367,3669,433],{"class":372},[367,3671,436],{"class":372},[367,3673,3674],{"class":439},"margin: 0; padding: 0; width: 100%; height: 100%; word-break: break-word;",[367,3676,436],{"class":372},[367,3678,380],{"class":372},[367,3680,3681,3683,3685,3688,3690,3692,3695,3697,3700,3702,3704,3707,3709,3711,3713,3715,3717,3719,3721,3723,3725,3727,3729,3731,3733,3735,3738,3740],{"class":369,"line":132},[367,3682,394],{"class":372},[367,3684,898],{"class":376},[367,3686,3687],{"class":429}," role",[367,3689,433],{"class":372},[367,3691,436],{"class":372},[367,3693,3694],{"class":439},"article",[367,3696,436],{"class":372},[367,3698,3699],{"class":429}," aria-roledescription",[367,3701,433],{"class":372},[367,3703,436],{"class":372},[367,3705,3706],{"class":439},"email",[367,3708,436],{"class":372},[367,3710,3434],{"class":429},[367,3712,433],{"class":372},[367,3714,436],{"class":372},[367,3716,3441],{"class":439},[367,3718,436],{"class":372},[367,3720,3446],{"class":429},[367,3722,433],{"class":372},[367,3724,436],{"class":372},[367,3726,3453],{"class":439},[367,3728,436],{"class":372},[367,3730,1971],{"class":429},[367,3732,433],{"class":372},[367,3734,436],{"class":372},[367,3736,3737],{"class":439},"font-size: medium; font-size: max(16px, 1rem)",[367,3739,436],{"class":372},[367,3741,380],{"class":372},[367,3743,3744,3746,3748,3750,3752,3754,3756,3758,3760,3762,3764,3766,3768,3770,3772,3774,3776,3778,3780,3782,3784,3786,3788],{"class":369,"line":66},[367,3745,415],{"class":372},[367,3747,3248],{"class":376},[367,3749,3251],{"class":429},[367,3751,433],{"class":372},[367,3753,436],{"class":372},[367,3755,3258],{"class":439},[367,3757,436],{"class":372},[367,3759,2080],{"class":429},[367,3761,433],{"class":372},[367,3763,436],{"class":372},[367,3765,3269],{"class":439},[367,3767,436],{"class":372},[367,3769,2092],{"class":429},[367,3771,433],{"class":372},[367,3773,436],{"class":372},[367,3775,3280],{"class":439},[367,3777,436],{"class":372},[367,3779,2890],{"class":429},[367,3781,433],{"class":372},[367,3783,436],{"class":372},[367,3785,3291],{"class":439},[367,3787,436],{"class":372},[367,3789,380],{"class":372},[367,3791,3792,3794,3796,3798,3800,3802,3804,3806,3808,3810,3812,3814,3816,3818,3820,3822,3824,3826,3829,3831],{"class":369,"line":112},[367,3793,424],{"class":372},[367,3795,3302],{"class":376},[367,3797,2068],{"class":429},[367,3799,433],{"class":372},[367,3801,436],{"class":372},[367,3803,3311],{"class":439},[367,3805,436],{"class":372},[367,3807,2080],{"class":429},[367,3809,433],{"class":372},[367,3811,436],{"class":372},[367,3813,3269],{"class":439},[367,3815,436],{"class":372},[367,3817,2092],{"class":429},[367,3819,433],{"class":372},[367,3821,436],{"class":372},[367,3823,3280],{"class":439},[367,3825,436],{"class":372},[367,3827,3828],{"class":372},">\u003C\u002F",[367,3830,3302],{"class":376},[367,3832,380],{"class":372},[367,3834,3835,3837,3839,3841,3843,3845,3847,3849,3851,3853,3855,3857,3859,3861,3863,3865,3867,3869,3871,3873],{"class":369,"line":40},[367,3836,424],{"class":372},[367,3838,3302],{"class":376},[367,3840,2068],{"class":429},[367,3842,433],{"class":372},[367,3844,436],{"class":372},[367,3846,3351],{"class":439},[367,3848,436],{"class":372},[367,3850,2080],{"class":429},[367,3852,433],{"class":372},[367,3854,436],{"class":372},[367,3856,3269],{"class":439},[367,3858,436],{"class":372},[367,3860,2092],{"class":429},[367,3862,433],{"class":372},[367,3864,436],{"class":372},[367,3866,3280],{"class":439},[367,3868,436],{"class":372},[367,3870,3828],{"class":372},[367,3872,3302],{"class":376},[367,3874,380],{"class":372},[367,3876,3877,3879,3881],{"class":369,"line":44},[367,3878,492],{"class":372},[367,3880,3248],{"class":376},[367,3882,380],{"class":372},[367,3884,3885,3887,3889],{"class":369,"line":84},[367,3886,501],{"class":372},[367,3888,898],{"class":376},[367,3890,380],{"class":372},[367,3892,3893,3895,3897],{"class":369,"line":96},[367,3894,510],{"class":372},[367,3896,1773],{"class":376},[367,3898,380],{"class":372},[367,3900,3901,3903,3905],{"class":369,"line":88},[367,3902,519],{"class":372},[367,3904,2720],{"class":376},[367,3906,380],{"class":372},[326,3908,3909,3912,3913,533,3916,533,3919,3922],{},[333,3910,3911],{},"\u003Camp-*>"," tags render as-is, so ",[333,3914,3915],{},"\u003Camp-carousel>",[333,3917,3918],{},"\u003Camp-img>",[333,3920,3921],{},"\u003Camp-list>"," etc. pass through to the rendered HTML untouched.",[525,3924,3925],{"type":527},[326,3926,3927,3928,3931,3932,3935,3936,3938],{},"If you want a Vue wrapper around an AMP tag, register it under a PascalCase name (e.g. ",[333,3929,3930],{},"components\u002FAmpCarousel.vue"," → ",[333,3933,3934],{},"\u003CAmpCarousel>","). The kebab form ",[333,3937,3915],{}," always stays native, so the two never collide.",[3940,3941,3943],"h4",{"id":3942},"amp-tailwind","AMP4Email and Tailwind CSS",[326,3945,1012,3946,3949,3950,3953,3954,1494],{},[333,3947,3948],{},"@reference \"@maizzle\u002Ftailwindcss\""," instead of ",[333,3951,3952],{},"@import"," if you need Tailwind utilities or theme variables inside ",[333,3955,3956],{},"\u003Cstyle amp-custom>",[326,3958,3959,3960,3962,3963,1616],{},"This helps avoid emitting duplicate CSS in templates where you're already using Tailwind, like when using the ",[333,3961,76],{}," component or ",[333,3964,3965],{},"\u003CTailwind>",[3940,3967,3969],{"id":3968},"amp-attribute","amp4email vs ⚡4email",[326,3971,1012,3972,3949,3974,3977],{},[333,3973,3122],{},[333,3975,3976],{},"⚡4email",". The two are interchangeable per the AMP spec, but the ⚡ form trips Vue's template compiler and won't work.",[357,3979,3981],{"className":1224,"code":3980,"language":362,"meta":363,"style":363},"\u003Ctemplate>\n  \u003CHtml ⚡4email> \u002F\u002F [!code --]\n  \u003CHtml amp4email> \u002F\u002F [!code ++]\n    \u003C!-- ... -->\n  \u003C\u002FHtml>\n\u003C\u002Ftemplate>\n",[333,3982,3983,3991,4004,4015,4020,4028],{"__ignoreMap":363},[367,3984,3985,3987,3989],{"class":369,"line":18},[367,3986,373],{"class":372},[367,3988,377],{"class":376},[367,3990,380],{"class":372},[367,3992,3995,3997,3999,4002],{"class":3993,"line":13},[369,1239,3994],"remove",[367,3996,385],{"class":372},[367,3998,69],{"class":376},[367,4000,4001],{"class":429}," ⚡4email",[367,4003,882],{"class":372},[367,4005,4007,4009,4011,4013],{"class":4006,"line":32},[369,1239,1240],[367,4008,385],{"class":372},[367,4010,69],{"class":376},[367,4012,3153],{"class":429},[367,4014,882],{"class":372},[367,4016,4017],{"class":369,"line":27},[367,4018,4019],{"class":2767},"    \u003C!-- ... -->\n",[367,4021,4022,4024,4026],{"class":369,"line":52},[367,4023,510],{"class":372},[367,4025,69],{"class":376},[367,4027,380],{"class":372},[367,4029,4030,4032,4034],{"class":369,"line":128},[367,4031,519],{"class":372},[367,4033,377],{"class":376},[367,4035,380],{"class":372},[341,4037,4039],{"id":4038},"output","Output",[326,4041,4042,4043,4046,4047,4049],{},"Built templates are output to the ",[333,4044,4045],{},"dist"," directory as ",[333,4048,673],{}," files.",[326,4051,4052],{},"You may customize this:",[357,4054,4056],{"className":563,"code":4055,"filename":565,"language":566,"meta":363,"style":363},"export default defineConfig({\n  output: {\n    path: 'resources\u002Fviews\u002Femails',\n    extension: 'blade.php',\n  },\n})\n",[333,4057,4058,4068,4077,4093,4109,4113],{"__ignoreMap":363},[367,4059,4060,4062,4064,4066],{"class":369,"line":18},[367,4061,574],{"class":573},[367,4063,577],{"class":573},[367,4065,580],{"class":429},[367,4067,583],{"class":372},[367,4069,4070,4073,4075],{"class":369,"line":13},[367,4071,4072],{"class":399},"  output",[367,4074,591],{"class":372},[367,4076,1049],{"class":372},[367,4078,4079,4082,4084,4086,4089,4091],{"class":369,"line":32},[367,4080,4081],{"class":399},"    path",[367,4083,591],{"class":372},[367,4085,607],{"class":372},[367,4087,4088],{"class":439},"resources\u002Fviews\u002Femails",[367,4090,597],{"class":372},[367,4092,1062],{"class":372},[367,4094,4095,4098,4100,4102,4105,4107],{"class":369,"line":27},[367,4096,4097],{"class":399},"    extension",[367,4099,591],{"class":372},[367,4101,607],{"class":372},[367,4103,4104],{"class":439},"blade.php",[367,4106,597],{"class":372},[367,4108,1062],{"class":372},[367,4110,4111],{"class":369,"line":52},[367,4112,3098],{"class":372},[367,4114,4115],{"class":369,"line":128},[367,4116,620],{"class":372},[326,4118,4119,4120,4123,4124,1494],{},"Directory structure from your content path is preserved: ",[333,4121,4122],{},"emails\u002Fapp\u002Fwelcome.vue"," will be output to ",[333,4125,4126],{},"dist\u002Fapp\u002Fwelcome.html",[341,4128,4130],{"id":4129},"archiving","Archiving",[326,4132,4133,4134,4139],{},"Maizzle only compiles templates that match the ",[1379,4135,4137],{"href":4136},"#template-discovery",[333,4138,559],{}," glob patterns. If a project accumulates a lot of old emails, you might consider \"archiving\" them by keeping them in the repo but excluding them from the build.",[326,4141,4142],{},"You could:",[4144,4145,4146,4157,4169],"ol",{},[4147,4148,4149,4156],"li",{},[4150,4151,4152,4153,4155],"strong",{},"Move it outside the ",[333,4154,559],{}," paths."," Anything that doesn't match the glob is ignored.",[4147,4158,4159,4162,4163,3931,4166,1494],{},[4150,4160,4161],{},"Change the extension"," so the glob no longer matches it. For example, rename ",[333,4164,4165],{},"welcome.vue",[333,4167,4168],{},"welcome.vue.bak",[4147,4170,4171,4174,4175,591,4177,4178,4177,4181,4183,4237,4239,4240,4243],{},[4150,4172,4173],{},"Use a negated glob pattern"," to exclude a directory or file from ",[333,4176,559],{},"\n ",[4179,4180],"br",{},[4179,4182],{},[357,4184,4186],{"className":563,"code":4185,"filename":565,"language":566,"meta":363,"style":363},"export default defineConfig({\n  content: [\n    'emails\u002F**\u002F*.{vue,md}',\n    '!emails\u002Farchive\u002F**\u002F*',\n  ],\n})\n",[333,4187,4188,4198,4206,4217,4228,4233],{"__ignoreMap":363},[367,4189,4190,4192,4194,4196],{"class":369,"line":18},[367,4191,574],{"class":573},[367,4193,577],{"class":573},[367,4195,580],{"class":429},[367,4197,583],{"class":372},[367,4199,4200,4202,4204],{"class":369,"line":13},[367,4201,588],{"class":399},[367,4203,591],{"class":372},[367,4205,718],{"class":372},[367,4207,4208,4211,4213,4215],{"class":369,"line":32},[367,4209,4210],{"class":372},"    '",[367,4212,555],{"class":439},[367,4214,597],{"class":372},[367,4216,1062],{"class":372},[367,4218,4219,4221,4224,4226],{"class":369,"line":27},[367,4220,4210],{"class":372},[367,4222,4223],{"class":439},"!emails\u002Farchive\u002F**\u002F*",[367,4225,597],{"class":372},[367,4227,1062],{"class":372},[367,4229,4230],{"class":369,"line":52},[367,4231,4232],{"class":372},"  ],\n",[367,4234,4235],{"class":369,"line":128},[367,4236,620],{"class":372},[4179,4238],{},"Now templates under ",[333,4241,4242],{},"emails\u002Farchive\u002F"," stay in the repo but are skipped at build time.",[1891,4245,4246],{},"html pre.shiki code .sGGKt, html code.shiki .sGGKt{--shiki-default:#7B6995}html pre.shiki code .sb4Pa, html code.shiki .sb4Pa{--shiki-default:#74DFC4}html pre.shiki code .sLaUg, html code.shiki .sLaUg{--shiki-default:#FFFFFF}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 .sIihq, html code.shiki .sIihq{--shiki-default:#A96BC0}html pre.shiki code .skd8d, html code.shiki .skd8d{--shiki-default:#FFE261}html pre.shiki code .sU-n2, html code.shiki .sU-n2{--shiki-default:#FFF}html pre.shiki code .sVsQ9, html code.shiki .sVsQ9{--shiki-default:#91889B}html pre.shiki code .s0EtI, html code.shiki .s0EtI{--shiki-default:#B381C5}",{"title":363,"searchDepth":13,"depth":13,"links":4248},[4249,4250,4251,4252,4253,4254,4255,4259,4268,4269,4270],{"id":343,"depth":13,"text":344},{"id":548,"depth":13,"text":549},{"id":677,"depth":13,"text":678},{"id":1009,"depth":13,"text":173},{"id":1211,"depth":13,"text":1212},{"id":1365,"depth":13,"text":1366},{"id":1701,"depth":13,"text":1702,"children":4256},[4257,4258],{"id":1725,"depth":32,"text":1726},{"id":1842,"depth":32,"text":1843},{"id":2141,"depth":13,"text":2142,"children":4260},[4261,4263,4264,4265,4266,4267],{"id":2210,"depth":32,"text":4262},"Using \u003Cscript setup>",{"id":2420,"depth":32,"text":2421},{"id":2495,"depth":32,"text":2496},{"id":2557,"depth":32,"text":2558},{"id":2647,"depth":32,"text":2648},{"id":3039,"depth":32,"text":3040},{"id":3122,"depth":13,"text":3123},{"id":4038,"depth":13,"text":4039},{"id":4129,"depth":13,"text":4130},"How to create HTML email templates in Maizzle using Vue SFCs.",{},{"title":188,"description":4271},"docs\u002Fdevelopment\u002Ftemplates","F6UZ262M6mizKdFEe56FVz96RHC3_I3-KsrcdMNujjE",1781015460612]