[{"data":1,"prerenderedAt":2307},["ShallowReactive",2],{"docs-nav":3,"\u002Fdocs\u002Fcomponents\u002Foverview":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":103,"body":318,"description":2302,"extension":1588,"meta":2303,"navigation":14,"order":104,"path":102,"section":31,"seo":2304,"sidebar":14,"stem":2305,"toc":14,"__hash__":2306},"docs\u002Fdocs\u002Fcomponents\u002Foverview.md",{"type":319,"value":320,"toc":2283},"minimark",[321,325,329,332,337,349,361,365,368,373,480,484,568,572,711,715,735,849,852,917,921,924,929,939,1107,1177,1181,1184,1248,1251,1568,1571,1583,1614,1689,1699,1721,1728,1783,1867,1877,1881,1887,1955,1959,1962,1970,1987,1991,1998,2077,2087,2091,2101,2185,2223,2231,2235,2256,2262,2279],[322,323,31],"h1",{"id":324},"components",[326,327,328],"p",{},"Maizzle includes 30+ Vue components that produce email-client-compatible HTML.",[326,330,331],{},"They make it easy to create layouts that render well across email clients without needing to write complex tables or inline styles. You can also create your own components to encapsulate reusable patterns and custom logic.",[333,334,336],"h2",{"id":335},"auto-import","Auto-import",[326,338,339,340,348],{},"All built-in components are automatically available in your templates, there is no need to manually import them. Also, any components that you add to paths defined in ",[341,342,344],"a",{"href":343},"\u002Fdocs\u002Fdevelopment\u002Fconfiguration#componentssource",[345,346,347],"code",{},"components.source"," are auto-imported as well.",[350,351,353],"callout",{"type":352},"info",[326,354,355,356,360],{},"If your editor isn't picking up auto-imported components, make sure to ",[341,357,359],{"href":358},"\u002Fdocs\u002Feditor-setup#type-declarations","update your editor setup",", or simply restart its TS server\u002Fextension host.",[333,362,364],{"id":363},"built-in-components","Built-in components",[326,366,367],{},"The built-in components cover the most common HTML email design patterns in a modern workflow, from basic structures or content elements to special components that enable Tailwind support or render Markdown.",[369,370,372],"h3",{"id":371},"structure","Structure",[374,375,376,389],"table",{},[377,378,379],"thead",{},[380,381,382,386],"tr",{},[383,384,385],"th",{},"Component",[383,387,388],{},"Description",[390,391,392,410,423,435,444,453,462,471],"tbody",{},[380,393,394,399],{},[395,396,397],"td",{},[341,398,69],{"href":68},[395,400,401,402,405,406,409],{},"Document root with ",[345,403,404],{},"lang",", ",[345,407,408],{},"dir",", and VML namespace attributes",[380,411,412,416],{},[395,413,414],{},[341,415,59],{"href":58},[395,417,418,419,422],{},"Email ",[345,420,421],{},"\u003Chead>"," with essential meta tags",[380,424,425,429],{},[395,426,427],{},[341,428,30],{"href":29},[395,430,431,434],{},[345,432,433],{},"\u003Cbody>"," element with resets",[380,436,437,441],{},[395,438,439],{},[341,440,51],{"href":50},[395,442,443],{},"Centered content wrapper",[380,445,446,450],{},[395,447,448],{},[341,449,127],{"href":126},[395,451,452],{},"Full-width content block",[380,454,455,459],{},[395,456,457],{},[341,458,123],{"href":122},[395,460,461],{},"Container for columns",[380,463,464,468],{},[395,465,466],{},[341,467,47],{"href":46},[395,469,470],{},"Individual column within a Row",[380,472,473,477],{},[395,474,475],{},[341,476,76],{"href":75},[395,478,479],{},"Opinionated email layout wrapper",[369,481,483],{"id":482},"content","Content",[374,485,486,494],{},[377,487,488],{},[380,489,490,492],{},[383,491,385],{},[383,493,388],{},[390,495,496,505,514,523,532,541,550,559],{},[380,497,498,502],{},[395,499,500],{},[341,501,35],{"href":34},[395,503,504],{},"CTA button element",[380,506,507,511],{},[395,508,509],{},[341,510,72],{"href":71},[395,512,513],{},"Responsive image with dark mode support",[380,515,516,520],{},[395,517,518],{},[341,519,131],{"href":130},[395,521,522],{},"Vertical and horizontal spacing",[380,524,525,529],{},[395,526,527],{},[341,528,65],{"href":64},[395,530,531],{},"Horizontal line separator",[380,533,534,538],{},[395,535,536],{},[341,537,111],{"href":110},[395,539,540],{},"Hidden inbox preview text",[380,542,543,547],{},[395,544,545],{},[341,546,62],{"href":61},[395,548,549],{},"Headings with semantic markup",[380,551,552,556],{},[395,553,554],{},[341,555,139],{"href":138},[395,557,558],{},"Semantic text wrapper",[380,560,561,565],{},[395,562,563],{},[341,564,79],{"href":78},[395,566,567],{},"Unstyled hyperlink",[369,569,571],{"id":570},"special","Special",[374,573,574,582],{},[377,575,576],{},[380,577,578,580],{},[383,579,385],{},[383,581,388],{},[390,583,584,593,602,611,620,629,638,647,656,666,675,684,693,702],{},[380,585,586,590],{},[395,587,588],{},[341,589,135],{"href":134},[395,591,592],{},"Enables Tailwind CSS for styling",[380,594,595,599],{},[395,596,597],{},[341,598,83],{"href":82},[395,600,601],{},"Render markdown content",[380,603,604,608],{},[395,605,606],{},[341,607,55],{"href":54},[395,609,610],{},"Use custom fonts",[380,612,613,617],{},[395,614,615],{},[341,616,39],{"href":38},[395,618,619],{},"Syntax-highlighted code blocks",[380,621,622,626],{},[395,623,624],{},[341,625,43],{"href":42},[395,627,628],{},"Inline code formatting",[380,630,631,635],{},[395,632,633],{},[341,634,95],{"href":94},[395,636,637],{},"Show content only in Outlook",[380,639,640,644],{},[395,641,642],{},[341,643,87],{"href":86},[395,645,646],{},"Hide content from Outlook",[380,648,649,653],{},[395,650,651],{},[341,652,107],{"href":106},[395,654,655],{},"Show content in plaintext only",[380,657,658,663],{},[395,659,660],{},[341,661,662],{"href":106},"NotPlaintext",[395,664,665],{},"Strip content from plaintext output",[380,667,668,672],{},[395,669,670],{},[341,671,115],{"href":114},[395,673,674],{},"Generate inline QR codes using tables",[380,676,677,681],{},[395,678,679],{},[341,680,99],{"href":98},[395,682,683],{},"Outlook background images with VML",[380,685,686,690],{},[395,687,688],{},[341,689,91],{"href":90},[395,691,692],{},"Prevent orphaned words",[380,694,695,699],{},[395,696,697],{},[341,698,147],{"href":146},[395,700,701],{},"Add base URLs and tracking query params",[380,703,704,708],{},[395,705,706],{},[341,707,119],{"href":118},[395,709,710],{},"Emit content verbatim, bypassing Vue parsing",[333,712,714],{"id":713},"creating-components","Creating components",[326,716,717,718,721,722,727,728,730,731,734],{},"To define your own component, start by creating a ",[345,719,720],{},".vue"," ",[723,724,726],"abbr",{"title":725},"Single File Component","SFC"," in your project's ",[345,729,324],{}," directory. For example, here's an ",[345,732,733],{},"Alert"," component that wraps content in a styled box:",[736,737,743],"pre",{"className":738,"code":739,"filename":740,"language":741,"meta":742,"style":742},"language-vue shiki shiki-themes laserwave","\u003Cscript setup>\n  \u002F\u002F Component logic goes here\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"p-4 border-l-4 border-yellow-500 bg-yellow-100 text-yellow-700\">\n    \u003Cslot \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","components\u002FAlert.vue","vue","",[345,744,745,764,770,779,784,793,818,832,841],{"__ignoreMap":742},[746,747,749,753,757,761],"span",{"class":748,"line":18},"line",[746,750,752],{"class":751},"sGGKt","\u003C",[746,754,756],{"class":755},"sb4Pa","script",[746,758,760],{"class":759},"sZNF3"," setup",[746,762,763],{"class":751},">\n",[746,765,766],{"class":748,"line":13},[746,767,769],{"class":768},"sVsQ9","  \u002F\u002F Component logic goes here\n",[746,771,772,775,777],{"class":748,"line":32},[746,773,774],{"class":751},"\u003C\u002F",[746,776,756],{"class":755},[746,778,763],{"class":751},[746,780,781],{"class":748,"line":27},[746,782,783],{"emptyLinePlaceholder":14},"\n",[746,785,786,788,791],{"class":748,"line":52},[746,787,752],{"class":751},[746,789,790],{"class":755},"template",[746,792,763],{"class":751},[746,794,795,798,801,804,807,810,814,816],{"class":748,"line":128},[746,796,797],{"class":751},"  \u003C",[746,799,800],{"class":755},"div",[746,802,803],{"class":759}," class",[746,805,806],{"class":751},"=",[746,808,809],{"class":751},"\"",[746,811,813],{"class":812},"sXiT_","p-4 border-l-4 border-yellow-500 bg-yellow-100 text-yellow-700",[746,815,809],{"class":751},[746,817,763],{"class":751},[746,819,820,823,826,830],{"class":748,"line":124},[746,821,822],{"class":751},"    \u003C",[746,824,825],{"class":755},"slot",[746,827,829],{"class":828},"sLaUg"," \u002F",[746,831,763],{"class":751},[746,833,834,837,839],{"class":748,"line":48},[746,835,836],{"class":751},"  \u003C\u002F",[746,838,800],{"class":755},[746,840,763],{"class":751},[746,842,843,845,847],{"class":748,"line":23},[746,844,774],{"class":751},[746,846,790],{"class":755},[746,848,763],{"class":751},[326,850,851],{},"Save the file and use it in any template:",[736,853,857],{"className":738,"code":854,"filename":855,"highlights":856,"language":741,"meta":742,"style":742},"\u003Ctemplate>\n  \u003CLayout>\n    \u003CAlert>\n      Hurry while stocks last!\n    \u003C\u002FAlert>\n  \u003C\u002FLayout>\n\u003C\u002Ftemplate>\n","emails\u002Fwelcome.vue",[32,27,52],[345,858,859,867,875,885,891,901,909],{"__ignoreMap":742},[746,860,861,863,865],{"class":748,"line":18},[746,862,752],{"class":751},[746,864,790],{"class":755},[746,866,763],{"class":751},[746,868,869,871,873],{"class":748,"line":13},[746,870,797],{"class":751},[746,872,76],{"class":755},[746,874,763],{"class":751},[746,876,879,881,883],{"class":877,"line":32},[748,878],"highlight",[746,880,822],{"class":751},[746,882,733],{"class":755},[746,884,763],{"class":751},[746,886,888],{"class":887,"line":27},[748,878],[746,889,890],{"class":828},"      Hurry while stocks last!\n",[746,892,894,897,899],{"class":893,"line":52},[748,878],[746,895,896],{"class":751},"    \u003C\u002F",[746,898,733],{"class":755},[746,900,763],{"class":751},[746,902,903,905,907],{"class":748,"line":128},[746,904,836],{"class":751},[746,906,76],{"class":755},[746,908,763],{"class":751},[746,910,911,913,915],{"class":748,"line":124},[746,912,774],{"class":751},[746,914,790],{"class":755},[746,916,763],{"class":751},[369,918,920],{"id":919},"props","Props",[326,922,923],{},"Most built-in components accept props to customize their behavior and appearance.",[326,925,926,927,360],{},"Your editor should pick up props for both built-in and custom components, showing you type hints and autocompletion as you work. If not, make sure to ",[341,928,359],{"href":358},[326,930,931,932,935,936,938],{},"If you're not familiar with Vue, props are custom attributes that you can pass to components to configure them. For example, let's add a ",[345,933,934],{},"type"," prop to the ",[345,937,733],{}," component:",[736,940,942],{"className":738,"code":941,"filename":740,"language":741,"meta":742,"style":742},"\u003Cscript setup>\n  defineProps({\n    type: {\n      type: String,\n      default: 'warning',\n    },\n  })\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv :class=\"[\n    'p-4 border-l-4',\n    type === 'warning' ? 'border-yellow-500 bg-yellow-100 text-yellow-700' : '',\n    type === 'error' ? 'border-red-500 bg-red-100 text-red-700' : '',\n    type === 'info' ? 'border-blue-500 bg-blue-100 text-blue-700' : '',\n  ]\">\n    \u003Cslot \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[345,943,944,954,962,974,988,1006,1011,1016,1024,1028,1036,1052,1057,1062,1067,1072,1081,1091,1099],{"__ignoreMap":742},[746,945,946,948,950,952],{"class":748,"line":18},[746,947,752],{"class":751},[746,949,756],{"class":755},[746,951,760],{"class":759},[746,953,763],{"class":751},[746,955,956,959],{"class":748,"line":13},[746,957,958],{"class":759},"  defineProps",[746,960,961],{"class":751},"({\n",[746,963,964,968,971],{"class":748,"line":32},[746,965,967],{"class":966},"s0ZPN","    type",[746,969,970],{"class":751},":",[746,972,973],{"class":751}," {\n",[746,975,976,979,981,985],{"class":748,"line":27},[746,977,978],{"class":966},"      type",[746,980,970],{"class":751},[746,982,984],{"class":983},"sU-n2"," String",[746,986,987],{"class":751},",\n",[746,989,990,993,995,998,1001,1004],{"class":748,"line":52},[746,991,992],{"class":966},"      default",[746,994,970],{"class":751},[746,996,997],{"class":751}," '",[746,999,1000],{"class":812},"warning",[746,1002,1003],{"class":751},"'",[746,1005,987],{"class":751},[746,1007,1008],{"class":748,"line":128},[746,1009,1010],{"class":751},"    },\n",[746,1012,1013],{"class":748,"line":124},[746,1014,1015],{"class":751},"  })\n",[746,1017,1018,1020,1022],{"class":748,"line":48},[746,1019,774],{"class":751},[746,1021,756],{"class":755},[746,1023,763],{"class":751},[746,1025,1026],{"class":748,"line":23},[746,1027,783],{"emptyLinePlaceholder":14},[746,1029,1030,1032,1034],{"class":748,"line":140},[746,1031,752],{"class":751},[746,1033,790],{"class":755},[746,1035,763],{"class":751},[746,1037,1038,1040,1042,1045,1047,1049],{"class":748,"line":56},[746,1039,797],{"class":751},[746,1041,800],{"class":755},[746,1043,1044],{"class":759}," :class",[746,1046,806],{"class":751},[746,1048,809],{"class":751},[746,1050,1051],{"class":812},"[\n",[746,1053,1054],{"class":748,"line":80},[746,1055,1056],{"class":812},"    'p-4 border-l-4',\n",[746,1058,1059],{"class":748,"line":36},[746,1060,1061],{"class":812},"    type === 'warning' ? 'border-yellow-500 bg-yellow-100 text-yellow-700' : '',\n",[746,1063,1064],{"class":748,"line":73},[746,1065,1066],{"class":812},"    type === 'error' ? 'border-red-500 bg-red-100 text-red-700' : '',\n",[746,1068,1069],{"class":748,"line":132},[746,1070,1071],{"class":812},"    type === 'info' ? 'border-blue-500 bg-blue-100 text-blue-700' : '',\n",[746,1073,1074,1077,1079],{"class":748,"line":66},[746,1075,1076],{"class":812},"  ]",[746,1078,809],{"class":751},[746,1080,763],{"class":751},[746,1082,1083,1085,1087,1089],{"class":748,"line":112},[746,1084,822],{"class":751},[746,1086,825],{"class":755},[746,1088,829],{"class":828},[746,1090,763],{"class":751},[746,1092,1093,1095,1097],{"class":748,"line":40},[746,1094,836],{"class":751},[746,1096,800],{"class":755},[746,1098,763],{"class":751},[746,1100,1101,1103,1105],{"class":748,"line":44},[746,1102,774],{"class":751},[746,1104,790],{"class":755},[746,1106,763],{"class":751},[736,1108,1110],{"className":738,"code":1109,"filename":855,"language":741,"meta":742,"style":742},"\u003Ctemplate>\n  \u003CLayout>\n    \u003CAlert type=\"error\">\n      Now you really screwed up.\n    \u003C\u002FAlert>\n  \u003C\u002FLayout>\n\u003C\u002Ftemplate>\n",[345,1111,1112,1120,1128,1148,1153,1161,1169],{"__ignoreMap":742},[746,1113,1114,1116,1118],{"class":748,"line":18},[746,1115,752],{"class":751},[746,1117,790],{"class":755},[746,1119,763],{"class":751},[746,1121,1122,1124,1126],{"class":748,"line":13},[746,1123,797],{"class":751},[746,1125,76],{"class":755},[746,1127,763],{"class":751},[746,1129,1130,1132,1134,1137,1139,1141,1144,1146],{"class":748,"line":32},[746,1131,822],{"class":751},[746,1133,733],{"class":755},[746,1135,1136],{"class":759}," type",[746,1138,806],{"class":751},[746,1140,809],{"class":751},[746,1142,1143],{"class":812},"error",[746,1145,809],{"class":751},[746,1147,763],{"class":751},[746,1149,1150],{"class":748,"line":27},[746,1151,1152],{"class":828},"      Now you really screwed up.\n",[746,1154,1155,1157,1159],{"class":748,"line":52},[746,1156,896],{"class":751},[746,1158,733],{"class":755},[746,1160,763],{"class":751},[746,1162,1163,1165,1167],{"class":748,"line":128},[746,1164,836],{"class":751},[746,1166,76],{"class":755},[746,1168,763],{"class":751},[746,1170,1171,1173,1175],{"class":748,"line":124},[746,1172,774],{"class":751},[746,1174,790],{"class":755},[746,1176,763],{"class":751},[369,1178,1180],{"id":1179},"slots","Slots",[326,1182,1183],{},"Use slots to pass content into your components:",[736,1185,1189],{"className":1186,"code":1187,"filename":1188,"language":741,"meta":742,"style":742},"language-vue shiki shiki-themes laserwave has-diff","\u003Ctemplate>\n  \u003Cdiv class=\"bg-white rounded-lg p-6\">\n    \u003Cslot \u002F> \u002F\u002F [!code ++]\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","components\u002FCard.vue",[345,1190,1191,1199,1218,1232,1240],{"__ignoreMap":742},[746,1192,1193,1195,1197],{"class":748,"line":18},[746,1194,752],{"class":751},[746,1196,790],{"class":755},[746,1198,763],{"class":751},[746,1200,1201,1203,1205,1207,1209,1211,1214,1216],{"class":748,"line":13},[746,1202,797],{"class":751},[746,1204,800],{"class":755},[746,1206,803],{"class":759},[746,1208,806],{"class":751},[746,1210,809],{"class":751},[746,1212,1213],{"class":812},"bg-white rounded-lg p-6",[746,1215,809],{"class":751},[746,1217,763],{"class":751},[746,1219,1223,1225,1227,1229],{"class":1220,"line":32},[748,1221,1222],"diff","add",[746,1224,822],{"class":751},[746,1226,825],{"class":755},[746,1228,829],{"class":828},[746,1230,1231],{"class":751},">",[746,1233,1234,1236,1238],{"class":748,"line":27},[746,1235,836],{"class":751},[746,1237,800],{"class":755},[746,1239,763],{"class":751},[746,1241,1242,1244,1246],{"class":748,"line":52},[746,1243,774],{"class":751},[746,1245,790],{"class":755},[746,1247,763],{"class":751},[326,1249,1250],{},"Named slots work too:",[1252,1253,1254,1412],"code-tabs",{},[1255,1256,1257],"code-tab",{"label":1188},[736,1258,1260],{"className":738,"code":1259,"filename":1188,"language":741,"meta":742,"style":742},"\u003Ctemplate>\n  \u003Cdiv class=\"bg-white rounded-lg p-6\">\n    \u003Cdiv class=\"mb-4\">\n      \u003Cslot name=\"header\" \u002F>\n    \u003C\u002Fdiv>\n    \u003Cslot \u002F>\n    \u003Cdiv class=\"mt-4\">\n      \u003Cslot name=\"footer\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[345,1261,1262,1270,1288,1307,1330,1338,1348,1367,1388,1396,1404],{"__ignoreMap":742},[746,1263,1264,1266,1268],{"class":748,"line":18},[746,1265,752],{"class":751},[746,1267,790],{"class":755},[746,1269,763],{"class":751},[746,1271,1272,1274,1276,1278,1280,1282,1284,1286],{"class":748,"line":13},[746,1273,797],{"class":751},[746,1275,800],{"class":755},[746,1277,803],{"class":759},[746,1279,806],{"class":751},[746,1281,809],{"class":751},[746,1283,1213],{"class":812},[746,1285,809],{"class":751},[746,1287,763],{"class":751},[746,1289,1290,1292,1294,1296,1298,1300,1303,1305],{"class":748,"line":32},[746,1291,822],{"class":751},[746,1293,800],{"class":755},[746,1295,803],{"class":759},[746,1297,806],{"class":751},[746,1299,809],{"class":751},[746,1301,1302],{"class":812},"mb-4",[746,1304,809],{"class":751},[746,1306,763],{"class":751},[746,1308,1309,1312,1314,1317,1319,1321,1324,1326,1328],{"class":748,"line":27},[746,1310,1311],{"class":751},"      \u003C",[746,1313,825],{"class":755},[746,1315,1316],{"class":759}," name",[746,1318,806],{"class":751},[746,1320,809],{"class":751},[746,1322,1323],{"class":812},"header",[746,1325,809],{"class":751},[746,1327,829],{"class":828},[746,1329,763],{"class":751},[746,1331,1332,1334,1336],{"class":748,"line":52},[746,1333,896],{"class":751},[746,1335,800],{"class":755},[746,1337,763],{"class":751},[746,1339,1340,1342,1344,1346],{"class":748,"line":128},[746,1341,822],{"class":751},[746,1343,825],{"class":755},[746,1345,829],{"class":828},[746,1347,763],{"class":751},[746,1349,1350,1352,1354,1356,1358,1360,1363,1365],{"class":748,"line":124},[746,1351,822],{"class":751},[746,1353,800],{"class":755},[746,1355,803],{"class":759},[746,1357,806],{"class":751},[746,1359,809],{"class":751},[746,1361,1362],{"class":812},"mt-4",[746,1364,809],{"class":751},[746,1366,763],{"class":751},[746,1368,1369,1371,1373,1375,1377,1379,1382,1384,1386],{"class":748,"line":48},[746,1370,1311],{"class":751},[746,1372,825],{"class":755},[746,1374,1316],{"class":759},[746,1376,806],{"class":751},[746,1378,809],{"class":751},[746,1380,1381],{"class":812},"footer",[746,1383,809],{"class":751},[746,1385,829],{"class":828},[746,1387,763],{"class":751},[746,1389,1390,1392,1394],{"class":748,"line":23},[746,1391,896],{"class":751},[746,1393,800],{"class":755},[746,1395,763],{"class":751},[746,1397,1398,1400,1402],{"class":748,"line":140},[746,1399,836],{"class":751},[746,1401,800],{"class":755},[746,1403,763],{"class":751},[746,1405,1406,1408,1410],{"class":748,"line":56},[746,1407,774],{"class":751},[746,1409,790],{"class":755},[746,1411,763],{"class":751},[1255,1413,1415],{"label":1414},"emails\u002Fpromo.vue",[736,1416,1418],{"className":738,"code":1417,"filename":1414,"language":741,"meta":742,"style":742},"\u003Ctemplate>\n  \u003CCard>\n    \u003Ctemplate #header>\n      \u003CHeading tag=\"h2\">Special Offer\u003C\u002FHeading>\n    \u003C\u002Ftemplate>\n    \u003CText>Get 50% off your first order.\u003C\u002FText>\n    \u003Ctemplate #footer>\n      \u003CButton href=\"https:\u002F\u002Fexample.com\">Shop Now\u003C\u002FButton>\n    \u003C\u002Ftemplate>\n  \u003C\u002FCard>\n\u003C\u002Ftemplate>\n",[345,1419,1420,1428,1437,1450,1478,1486,1503,1515,1544,1552,1560],{"__ignoreMap":742},[746,1421,1422,1424,1426],{"class":748,"line":18},[746,1423,752],{"class":751},[746,1425,790],{"class":755},[746,1427,763],{"class":751},[746,1429,1430,1432,1435],{"class":748,"line":13},[746,1431,797],{"class":751},[746,1433,1434],{"class":755},"Card",[746,1436,763],{"class":751},[746,1438,1439,1441,1443,1446,1448],{"class":748,"line":32},[746,1440,822],{"class":751},[746,1442,790],{"class":755},[746,1444,1445],{"class":751}," #",[746,1447,1323],{"class":759},[746,1449,763],{"class":751},[746,1451,1452,1454,1456,1459,1461,1463,1465,1467,1469,1472,1474,1476],{"class":748,"line":27},[746,1453,1311],{"class":751},[746,1455,62],{"class":755},[746,1457,1458],{"class":759}," tag",[746,1460,806],{"class":751},[746,1462,809],{"class":751},[746,1464,333],{"class":812},[746,1466,809],{"class":751},[746,1468,1231],{"class":751},[746,1470,1471],{"class":828},"Special Offer",[746,1473,774],{"class":751},[746,1475,62],{"class":755},[746,1477,763],{"class":751},[746,1479,1480,1482,1484],{"class":748,"line":52},[746,1481,896],{"class":751},[746,1483,790],{"class":755},[746,1485,763],{"class":751},[746,1487,1488,1490,1492,1494,1497,1499,1501],{"class":748,"line":128},[746,1489,822],{"class":751},[746,1491,139],{"class":755},[746,1493,1231],{"class":751},[746,1495,1496],{"class":828},"Get 50% off your first order.",[746,1498,774],{"class":751},[746,1500,139],{"class":755},[746,1502,763],{"class":751},[746,1504,1505,1507,1509,1511,1513],{"class":748,"line":124},[746,1506,822],{"class":751},[746,1508,790],{"class":755},[746,1510,1445],{"class":751},[746,1512,1381],{"class":759},[746,1514,763],{"class":751},[746,1516,1517,1519,1521,1524,1526,1528,1531,1533,1535,1538,1540,1542],{"class":748,"line":48},[746,1518,1311],{"class":751},[746,1520,35],{"class":755},[746,1522,1523],{"class":759}," href",[746,1525,806],{"class":751},[746,1527,809],{"class":751},[746,1529,1530],{"class":812},"https:\u002F\u002Fexample.com",[746,1532,809],{"class":751},[746,1534,1231],{"class":751},[746,1536,1537],{"class":828},"Shop Now",[746,1539,774],{"class":751},[746,1541,35],{"class":755},[746,1543,763],{"class":751},[746,1545,1546,1548,1550],{"class":748,"line":23},[746,1547,896],{"class":751},[746,1549,790],{"class":755},[746,1551,763],{"class":751},[746,1553,1554,1556,1558],{"class":748,"line":140},[746,1555,836],{"class":751},[746,1557,1434],{"class":755},[746,1559,763],{"class":751},[746,1561,1562,1564,1566],{"class":748,"line":56},[746,1563,774],{"class":751},[746,1565,790],{"class":755},[746,1567,763],{"class":751},[369,1569,83],{"id":1570},"markdown",[326,1572,1573,1574,1577,1578,1580,1581,938],{},"Components can also be authored as ",[345,1575,1576],{},".md"," files. Drop one into your ",[345,1579,324],{}," directory and Maizzle auto-registers it under its PascalCased filename, just like a ",[345,1582,720],{},[736,1584,1589],{"className":1585,"code":1586,"filename":1587,"language":1588,"meta":742,"style":742},"language-md shiki shiki-themes laserwave","## Big Sale\n\nGet **50% off** your first order this weekend only.\n\n\u003CButton href=\"https:\u002F\u002Fexample.com\">Shop now\u003C\u002FButton>\n","components\u002FPromo.md","md",[345,1590,1591,1596,1600,1605,1609],{"__ignoreMap":742},[746,1592,1593],{"class":748,"line":18},[746,1594,1595],{},"## Big Sale\n",[746,1597,1598],{"class":748,"line":13},[746,1599,783],{"emptyLinePlaceholder":14},[746,1601,1602],{"class":748,"line":32},[746,1603,1604],{},"Get **50% off** your first order this weekend only.\n",[746,1606,1607],{"class":748,"line":27},[746,1608,783],{"emptyLinePlaceholder":14},[746,1610,1611],{"class":748,"line":52},[746,1612,1613],{},"\u003CButton href=\"https:\u002F\u002Fexample.com\">Shop now\u003C\u002FButton>\n",[736,1615,1617],{"className":1186,"code":1616,"filename":855,"language":741,"meta":742,"style":742},"\u003Ctemplate>\n  \u003CLayout>\n    \u003CContainer class=\"max-w-xl\">\n      \u003CPromo \u002F> \u002F\u002F [!code ++]\n    \u003C\u002FContainer>\n  \u003C\u002FLayout>\n\u003C\u002Ftemplate>\n",[345,1618,1619,1627,1635,1654,1665,1673,1681],{"__ignoreMap":742},[746,1620,1621,1623,1625],{"class":748,"line":18},[746,1622,752],{"class":751},[746,1624,790],{"class":755},[746,1626,763],{"class":751},[746,1628,1629,1631,1633],{"class":748,"line":13},[746,1630,797],{"class":751},[746,1632,76],{"class":755},[746,1634,763],{"class":751},[746,1636,1637,1639,1641,1643,1645,1647,1650,1652],{"class":748,"line":32},[746,1638,822],{"class":751},[746,1640,51],{"class":755},[746,1642,803],{"class":759},[746,1644,806],{"class":751},[746,1646,809],{"class":751},[746,1648,1649],{"class":812},"max-w-xl",[746,1651,809],{"class":751},[746,1653,763],{"class":751},[746,1655,1657,1659,1662],{"class":1656,"line":27},[748,1221,1222],[746,1658,1311],{"class":751},[746,1660,1661],{"class":755},"Promo",[746,1663,1664],{"class":751}," \u002F>",[746,1666,1667,1669,1671],{"class":748,"line":52},[746,1668,896],{"class":751},[746,1670,51],{"class":755},[746,1672,763],{"class":751},[746,1674,1675,1677,1679],{"class":748,"line":128},[746,1676,836],{"class":751},[746,1678,76],{"class":755},[746,1680,763],{"class":751},[746,1682,1683,1685,1687],{"class":748,"line":124},[746,1684,774],{"class":751},[746,1686,790],{"class":755},[746,1688,763],{"class":751},[326,1690,1691,1692,405,1695,1698],{},"You can mix Vue components freely inside the markdown — ",[345,1693,1694],{},"\u003CButton>",[345,1696,1697],{},"\u003CImg>",", your own components, anything auto-imported.",[350,1700,1701],{"type":352},[326,1702,1703,1704,1706,1707,1713,1714,1716,1717,1720],{},"Unlike ",[345,1705,1576],{}," files used as entry-point templates (which are auto-wrapped in ",[341,1708,1710],{"href":1709},"\u002Fdocs\u002Fdevelopment\u002Ftemplates#default-layout",[345,1711,1712],{},"MarkdownLayout","), ",[345,1715,1576],{}," files inside a ",[345,1718,1719],{},"components\u002F"," directory are treated as plain fragments, meaning they render exactly what their content produces, with no wrapping shell added.",[326,1722,1723,1724,1727],{},"To accept props or use logic, add a ",[345,1725,1726],{},"\u003Cscript setup>"," block at the top:",[736,1729,1731],{"className":1585,"code":1730,"filename":1587,"language":1588,"meta":742,"style":742},"\u003Cscript setup>\ndefineProps({\n  discount: { type: Number, default: 50 },\n})\n\u003C\u002Fscript>\n\n## Big Sale\n\nGet **{{ discount }}% off** your first order this weekend only.\n\n\u003CButton href=\"https:\u002F\u002Fexample.com\">Shop now\u003C\u002FButton>\n",[345,1732,1733,1738,1743,1748,1753,1758,1762,1766,1770,1775,1779],{"__ignoreMap":742},[746,1734,1735],{"class":748,"line":18},[746,1736,1737],{},"\u003Cscript setup>\n",[746,1739,1740],{"class":748,"line":13},[746,1741,1742],{},"defineProps({\n",[746,1744,1745],{"class":748,"line":32},[746,1746,1747],{},"  discount: { type: Number, default: 50 },\n",[746,1749,1750],{"class":748,"line":27},[746,1751,1752],{},"})\n",[746,1754,1755],{"class":748,"line":52},[746,1756,1757],{},"\u003C\u002Fscript>\n",[746,1759,1760],{"class":748,"line":128},[746,1761,783],{"emptyLinePlaceholder":14},[746,1763,1764],{"class":748,"line":124},[746,1765,1595],{},[746,1767,1768],{"class":748,"line":48},[746,1769,783],{"emptyLinePlaceholder":14},[746,1771,1772],{"class":748,"line":23},[746,1773,1774],{},"Get **{{ discount }}% off** your first order this weekend only.\n",[746,1776,1777],{"class":748,"line":140},[746,1778,783],{"emptyLinePlaceholder":14},[746,1780,1781],{"class":748,"line":56},[746,1782,1613],{},[736,1784,1786],{"className":738,"code":1785,"filename":855,"language":741,"meta":742,"style":742},"\u003Ctemplate>\n  \u003CLayout>\n    \u003CContainer class=\"max-w-xl\">\n      \u003CPromo :discount=\"25\" \u002F>\n    \u003C\u002FContainer>\n  \u003C\u002FLayout>\n\u003C\u002Ftemplate>\n",[345,1787,1788,1796,1804,1822,1843,1851,1859],{"__ignoreMap":742},[746,1789,1790,1792,1794],{"class":748,"line":18},[746,1791,752],{"class":751},[746,1793,790],{"class":755},[746,1795,763],{"class":751},[746,1797,1798,1800,1802],{"class":748,"line":13},[746,1799,797],{"class":751},[746,1801,76],{"class":755},[746,1803,763],{"class":751},[746,1805,1806,1808,1810,1812,1814,1816,1818,1820],{"class":748,"line":32},[746,1807,822],{"class":751},[746,1809,51],{"class":755},[746,1811,803],{"class":759},[746,1813,806],{"class":751},[746,1815,809],{"class":751},[746,1817,1649],{"class":812},[746,1819,809],{"class":751},[746,1821,763],{"class":751},[746,1823,1824,1826,1828,1831,1833,1835,1838,1840],{"class":748,"line":27},[746,1825,1311],{"class":751},[746,1827,1661],{"class":755},[746,1829,1830],{"class":759}," :discount",[746,1832,806],{"class":751},[746,1834,809],{"class":751},[746,1836,1837],{"class":812},"25",[746,1839,809],{"class":751},[746,1841,1842],{"class":751}," \u002F>\n",[746,1844,1845,1847,1849],{"class":748,"line":52},[746,1846,896],{"class":751},[746,1848,51],{"class":755},[746,1850,763],{"class":751},[746,1852,1853,1855,1857],{"class":748,"line":128},[746,1854,836],{"class":751},[746,1856,76],{"class":755},[746,1858,763],{"class":751},[746,1860,1861,1863,1865],{"class":748,"line":124},[746,1862,774],{"class":751},[746,1864,790],{"class":755},[746,1866,763],{"class":751},[326,1868,1869,1870,1872,1873,1876],{},"Slots work the same as in ",[345,1871,720],{}," components — drop a ",[345,1874,1875],{},"\u003Cslot \u002F>"," anywhere in the markdown body to receive content from the parent template.",[333,1878,1880],{"id":1879},"locations","Locations",[326,1882,1883,1884,1886],{},"By default, Maizzle looks for custom components in the ",[345,1885,324],{}," directory at the root of your project. You may configure additional directories:",[736,1888,1893],{"className":1889,"code":1890,"filename":1891,"language":1892,"meta":742,"style":742},"language-ts shiki shiki-themes laserwave","export default defineConfig({\n  components: {\n    source: ['components', 'src\u002Fshared\u002Femail-components'],\n  },\n})\n","maizzle.config.ts","ts",[345,1894,1895,1908,1917,1946,1951],{"__ignoreMap":742},[746,1896,1897,1900,1903,1906],{"class":748,"line":18},[746,1898,1899],{"class":966},"export",[746,1901,1902],{"class":966}," default",[746,1904,1905],{"class":759}," defineConfig",[746,1907,961],{"class":751},[746,1909,1910,1913,1915],{"class":748,"line":13},[746,1911,1912],{"class":828},"  components",[746,1914,970],{"class":751},[746,1916,973],{"class":751},[746,1918,1919,1922,1924,1927,1929,1931,1933,1936,1938,1941,1943],{"class":748,"line":32},[746,1920,1921],{"class":828},"    source",[746,1923,970],{"class":751},[746,1925,1926],{"class":751}," [",[746,1928,1003],{"class":751},[746,1930,324],{"class":812},[746,1932,1003],{"class":751},[746,1934,1935],{"class":751},",",[746,1937,997],{"class":751},[746,1939,1940],{"class":812},"src\u002Fshared\u002Femail-components",[746,1942,1003],{"class":751},[746,1944,1945],{"class":751},"],\n",[746,1947,1948],{"class":748,"line":27},[746,1949,1950],{"class":751},"  },\n",[746,1952,1953],{"class":748,"line":52},[746,1954,1752],{"class":751},[369,1956,1958],{"id":1957},"folder-namespacing","Folder namespacing",[326,1960,1961],{},"Subfolder names automatically become a prefix on the component name. This means you can have multiple components with the same filename across different folders without conflicts:",[736,1963,1968],{"className":1964,"code":1966,"language":1967},[1965],"language-text","components\u002F\n├── card\u002F\n│   └── Header.vue   ← \u003CCardHeader \u002F>\n└── alert\u002F\n    └── Header.vue   ← \u003CAlertHeader \u002F>\n","text",[345,1969,1966],{"__ignoreMap":742},[350,1971,1972],{"type":352},[326,1973,1974,1975,1978,1979,1982,1983,1986],{},"If a filename already begins with the folder name (e.g. ",[345,1976,1977],{},"card\u002FCardFooter.vue","), the prefix is not duplicated — you'd still use ",[345,1980,1981],{},"\u003CCardFooter \u002F>",", not ",[345,1984,1985],{},"\u003CCardCardFooter \u002F>",".",[369,1988,1990],{"id":1989},"custom-prefixes","Custom prefixes",[326,1992,1993,1994,1997],{},"For finer control, pass an object with a ",[345,1995,1996],{},"prefix"," instead of a string. Useful when you want a recognizable namespace that doesn't match the folder name:",[736,1999,2001],{"className":1889,"code":2000,"filename":1891,"language":1892,"meta":742,"style":742},"export default defineConfig({\n  components: {\n    source: [\n      { path: 'src\u002Fwidgets', prefix: 'W' },\n    ],\n  },\n})\n",[345,2002,2003,2013,2021,2030,2064,2069,2073],{"__ignoreMap":742},[746,2004,2005,2007,2009,2011],{"class":748,"line":18},[746,2006,1899],{"class":966},[746,2008,1902],{"class":966},[746,2010,1905],{"class":759},[746,2012,961],{"class":751},[746,2014,2015,2017,2019],{"class":748,"line":13},[746,2016,1912],{"class":828},[746,2018,970],{"class":751},[746,2020,973],{"class":751},[746,2022,2023,2025,2027],{"class":748,"line":32},[746,2024,1921],{"class":828},[746,2026,970],{"class":751},[746,2028,2029],{"class":751}," [\n",[746,2031,2032,2035,2038,2040,2042,2045,2047,2049,2052,2054,2056,2059,2061],{"class":748,"line":27},[746,2033,2034],{"class":751},"      {",[746,2036,2037],{"class":828}," path",[746,2039,970],{"class":751},[746,2041,997],{"class":751},[746,2043,2044],{"class":812},"src\u002Fwidgets",[746,2046,1003],{"class":751},[746,2048,1935],{"class":751},[746,2050,2051],{"class":828}," prefix",[746,2053,970],{"class":751},[746,2055,997],{"class":751},[746,2057,2058],{"class":812},"W",[746,2060,1003],{"class":751},[746,2062,2063],{"class":751}," },\n",[746,2065,2066],{"class":748,"line":52},[746,2067,2068],{"class":751},"    ],\n",[746,2070,2071],{"class":748,"line":128},[746,2072,1950],{"class":751},[746,2074,2075],{"class":748,"line":124},[746,2076,1752],{"class":751},[326,2078,2079,2080,2083,2084,1986],{},"Result: ",[345,2081,2082],{},"src\u002Fwidgets\u002FButton.vue"," is used as ",[345,2085,2086],{},"\u003CWButton \u002F>",[369,2088,2090],{"id":2089},"flattening-nested-folders","Flattening nested folders",[326,2092,2093,2094,2097,2098,2100],{},"Set ",[345,2095,2096],{},"pathPrefix: false"," to skip intermediate folder names. The ",[345,2099,1996],{}," is still applied, but subfolder structure is ignored — handy for icon sets or design-system primitives where folders are organizational only:",[736,2102,2104],{"className":1889,"code":2103,"filename":1891,"language":1892,"meta":742,"style":742},"export default defineConfig({\n  components: {\n    source: [\n      { path: 'src\u002Ficons', prefix: 'Icon', pathPrefix: false },\n    ],\n  },\n})\n",[345,2105,2106,2116,2124,2132,2173,2177,2181],{"__ignoreMap":742},[746,2107,2108,2110,2112,2114],{"class":748,"line":18},[746,2109,1899],{"class":966},[746,2111,1902],{"class":966},[746,2113,1905],{"class":759},[746,2115,961],{"class":751},[746,2117,2118,2120,2122],{"class":748,"line":13},[746,2119,1912],{"class":828},[746,2121,970],{"class":751},[746,2123,973],{"class":751},[746,2125,2126,2128,2130],{"class":748,"line":32},[746,2127,1921],{"class":828},[746,2129,970],{"class":751},[746,2131,2029],{"class":751},[746,2133,2134,2136,2138,2140,2142,2145,2147,2149,2151,2153,2155,2158,2160,2162,2165,2167,2171],{"class":748,"line":27},[746,2135,2034],{"class":751},[746,2137,2037],{"class":828},[746,2139,970],{"class":751},[746,2141,997],{"class":751},[746,2143,2144],{"class":812},"src\u002Ficons",[746,2146,1003],{"class":751},[746,2148,1935],{"class":751},[746,2150,2051],{"class":828},[746,2152,970],{"class":751},[746,2154,997],{"class":751},[746,2156,2157],{"class":812},"Icon",[746,2159,1003],{"class":751},[746,2161,1935],{"class":751},[746,2163,2164],{"class":828}," pathPrefix",[746,2166,970],{"class":751},[746,2168,2170],{"class":2169},"skd8d"," false",[746,2172,2063],{"class":751},[746,2174,2175],{"class":748,"line":52},[746,2176,2068],{"class":751},[746,2178,2179],{"class":748,"line":128},[746,2180,1950],{"class":751},[746,2182,2183],{"class":748,"line":124},[746,2184,1752],{"class":751},[374,2186,2187,2197],{},[377,2188,2189],{},[380,2190,2191,2194],{},[383,2192,2193],{},"File path",[383,2195,2196],{},"Resolved name",[390,2198,2199,2211],{},[380,2200,2201,2206],{},[395,2202,2203],{},[345,2204,2205],{},"src\u002Ficons\u002Fsocial\u002FTwitter.vue",[395,2207,2208],{},[345,2209,2210],{},"\u003CIconTwitter \u002F>",[380,2212,2213,2218],{},[395,2214,2215],{},[345,2216,2217],{},"src\u002Ficons\u002Fui\u002FChevron.vue",[395,2219,2220],{},[345,2221,2222],{},"\u003CIconChevron \u002F>",[350,2224,2225],{"type":1000},[326,2226,2227,2228,2230],{},"With ",[345,2229,2096],{},", two files with the same basename in different folders will collide on the same component name. Maizzle throws an error at startup pointing at both files — rename one or split them into separate sources.",[369,2232,2234],{"id":2233},"overriding-built-in-components","Overriding built-in components",[326,2236,2237,2238,2242,2243,2245,2246,2248,2249,2252,2253,1986],{},"You can override any ",[341,2239,2241],{"href":2240},"#built-in-components","built-in component"," by creating a file with the same name in your ",[345,2244,1719],{}," directory (or any directory listed in ",[345,2247,347],{},"). For example, ",[345,2250,2251],{},"components\u002FLayout.vue"," in your project will override the built-in ",[345,2254,2255],{},"\u003CLayout \u002F>",[736,2257,2260],{"className":2258,"code":2259,"language":1967},[1965],"components\u002F\n└── Layout.vue   ← replaces the built-in \u003CLayout \u002F>\nemails\u002F\n└── welcome.vue  ← will use your custom \u003CLayout \u002F>\n",[345,2261,2259],{"__ignoreMap":742},[350,2263,2264],{"type":1000},[326,2265,2266,2267,2270,2271,2274,2275,2278],{},"Shadow detection runs once when the dev server starts. If you ",[2268,2269,1222],"strong",{}," or ",[2268,2272,2273],{},"delete"," a top-level component that shadows a built-in while ",[345,2276,2277],{},"maizzle serve"," is running, restart the dev server so the change takes effect.",[2280,2281,2282],"style",{},"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 .sZNF3, html code.shiki .sZNF3{--shiki-default:#EB64B9}html pre.shiki code .sVsQ9, html code.shiki .sVsQ9{--shiki-default:#91889B}html pre.shiki code .sXiT_, html code.shiki .sXiT_{--shiki-default:#B4DCE7}html pre.shiki code .sLaUg, html code.shiki .sLaUg{--shiki-default:#FFFFFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s0ZPN, html code.shiki .s0ZPN{--shiki-default:#40B4C4}html pre.shiki code .sU-n2, html code.shiki .sU-n2{--shiki-default:#FFF}html pre.shiki code .skd8d, html code.shiki .skd8d{--shiki-default:#FFE261}",{"title":742,"searchDepth":13,"depth":13,"links":2284},[2285,2286,2291,2296],{"id":335,"depth":13,"text":336},{"id":363,"depth":13,"text":364,"children":2287},[2288,2289,2290],{"id":371,"depth":32,"text":372},{"id":482,"depth":32,"text":483},{"id":570,"depth":32,"text":571},{"id":713,"depth":13,"text":714,"children":2292},[2293,2294,2295],{"id":919,"depth":32,"text":920},{"id":1179,"depth":32,"text":1180},{"id":1570,"depth":32,"text":83},{"id":1879,"depth":13,"text":1880,"children":2297},[2298,2299,2300,2301],{"id":1957,"depth":32,"text":1958},{"id":1989,"depth":32,"text":1990},{"id":2089,"depth":32,"text":2090},{"id":2233,"depth":32,"text":2234},"How components work in Maizzle: auto-imports, built-in email components, creating your own.",{},{"title":103,"description":2302},"docs\u002Fcomponents\u002Foverview","HIi5o71NK4EesSI9Cw1y7UiPHSaIt2Q-E4w1h62nOgY",1781015461169]