[{"data":1,"prerenderedAt":583},["ShallowReactive",2],{"docs-nav":3,"\u002Fdocs\u002Feditor-setup":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":191,"body":318,"description":577,"extension":578,"meta":579,"navigation":14,"order":32,"path":190,"section":22,"seo":580,"sidebar":14,"stem":581,"toc":14,"__hash__":582},"docs\u002Fdocs\u002Feditor-setup.md",{"type":319,"value":320,"toc":567},"minimark",[321,325,329,334,339,356,360,367,371,379,387,391,402,412,419,478,492,495,502,513,524,527,542,548,552,563],[322,323,191],"h1",{"id":324},"editor-setup",[326,327,328],"p",{},"Configuring your editor can help speed up your development workflow and ensures consistency when working in a team.",[330,331,333],"h2",{"id":332},"vs-code","VS Code",[335,336,338],"h3",{"id":337},"vue-official-volar","Vue - Official (Volar)",[326,340,341,342,350,351,355],{},"Install the ",[343,344,349],"a",{"href":345,"rel":346,"target":348},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=Vue.volar",[347],"nofollow","_blank","Vue - Official"," extension for Vue SFC support. This gives you syntax highlighting, IntelliSense, and type checking in ",[352,353,354],"code",{},".vue"," files.",[335,357,359],{"id":358},"tailwind-css-intellisense","Tailwind CSS IntelliSense",[326,361,341,362,366],{},[343,363,359],{"href":364,"rel":365,"target":348},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=bradlc.vscode-tailwindcss",[347]," extension for class name autocomplete, hover previews, and linting.",[330,368,370],{"id":369},"jetbrains-ides","JetBrains IDEs",[326,372,373,374,378],{},"WebStorm, PhpStorm, and other JetBrains IDEs have built-in Vue support. Make sure the Vue plugin is enabled in ",[375,376,377],"strong",{},"Settings → Plugins",".",[326,380,381,382,386],{},"For Tailwind CSS support, install the ",[343,383,255],{"href":384,"rel":385,"target":348},"https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F15321-tailwind-css",[347]," plugin.",[330,388,390],{"id":389},"type-declarations","Type declarations",[326,392,393,394,397,398,401],{},"After installing dependencies or when you run ",[352,395,396],{},"maizzle serve",", type declarations are generated in ",[352,399,400],{},".maizzle\u002F",":",[403,404,409],"pre",{"className":405,"code":407,"language":408},[406],"language-text",".maizzle\u002F\n├── auto-imports.d.ts  ← composables like defineConfig, useHead etc.\n└── components.d.ts    ← built-in components like Button, Container etc.\n","text",[352,410,407],{"__ignoreMap":411},"",[326,413,414,415,418],{},"These provide autocomplete and type checking for all auto-imported components and composables. Make sure your ",[352,416,417],{},"tsconfig.json"," includes them:",[403,420,424],{"className":421,"code":422,"filename":417,"language":423,"meta":411,"style":411},"language-json shiki shiki-themes laserwave","{\n  \"include\": [\"**\u002F*.vue\", \".maizzle\u002F*.d.ts\"]\n}\n","json",[352,425,426,434,473],{"__ignoreMap":411},[427,428,430],"span",{"class":429,"line":18},"line",[427,431,433],{"class":432},"sGGKt","{\n",[427,435,436,439,443,446,448,451,453,457,459,462,465,468,470],{"class":429,"line":13},[427,437,438],{"class":432},"  \"",[427,440,442],{"class":441},"s0ZPN","include",[427,444,445],{"class":432},"\"",[427,447,401],{"class":432},[427,449,450],{"class":432}," [",[427,452,445],{"class":432},[427,454,456],{"class":455},"sXiT_","**\u002F*.vue",[427,458,445],{"class":432},[427,460,461],{"class":432},",",[427,463,464],{"class":432}," \"",[427,466,467],{"class":455},".maizzle\u002F*.d.ts",[427,469,445],{"class":432},[427,471,472],{"class":432},"]\n",[427,474,475],{"class":429,"line":32},[427,476,477],{"class":432},"}\n",[479,480,482],"callout",{"type":481},"info",[326,483,484,485,487,488,491],{},"If you're using Maizzle inside a framework like Nuxt or SvelteKit, you may need a separate ",[352,486,417],{}," in your emails directory. See the ",[343,489,490],{"href":211},"framework guides"," for details.",[330,493,494],{"id":494},"pnpm",[326,496,497,498,501],{},"If you use pnpm, transitive dependencies aren't hoisted to the project's top-level ",[352,499,500],{},"node_modules"," by default. Editor tooling (Volar, ESLint, etc.) may then fail to resolve types from packages Maizzle pulls in indirectly — autocomplete for components, composables, and Tailwind classes can stop working even when builds succeed.",[326,503,504,505,508,509,512],{},"Fix it by enabling ",[352,506,507],{},"shamefully-hoist"," in an ",[352,510,511],{},".npmrc"," at the project root:",[403,514,518],{"className":515,"code":516,"filename":511,"language":517,"meta":411,"style":411},"language-ini shiki shiki-themes laserwave","shamefully-hoist=true\n","ini",[352,519,520],{"__ignoreMap":411},[427,521,522],{"class":429,"line":18},[427,523,516],{},[326,525,526],{},"Then reinstall:",[403,528,532],{"className":529,"code":530,"language":531,"meta":411,"style":411},"language-bash shiki shiki-themes laserwave","pnpm install\n","bash",[352,533,534],{"__ignoreMap":411},[427,535,536,539],{"class":429,"line":18},[427,537,494],{"class":538},"sZNF3",[427,540,541],{"class":455}," install\n",[326,543,544,545,547],{},"This flattens transitive deps into the top-level ",[352,546,500],{}," so editors and type checkers can find them — the same layout npm and yarn produce by default.",[330,549,551],{"id":550},"postcss-syntax","PostCSS syntax",[326,553,554,555,558,559,562],{},"Tailwind CSS includes some custom at-rules, like ",[352,556,557],{},"@apply"," or ",[352,560,561],{},"@layer",", which may trigger warnings in your editor. This is handled automatically by the Tailwind CSS IntelliSense extension if you're using VS Code. For other editors, or if you need full PostCSS language support, you might need to install an extension.",[564,565,566],"style",{},"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 .sGGKt, html code.shiki .sGGKt{--shiki-default:#7B6995}html pre.shiki code .s0ZPN, html code.shiki .s0ZPN{--shiki-default:#40B4C4}html pre.shiki code .sXiT_, html code.shiki .sXiT_{--shiki-default:#B4DCE7}html pre.shiki code .sZNF3, html code.shiki .sZNF3{--shiki-default:#EB64B9}",{"title":411,"searchDepth":13,"depth":13,"links":568},[569,573,574,575,576],{"id":332,"depth":13,"text":333,"children":570},[571,572],{"id":337,"depth":32,"text":338},{"id":358,"depth":32,"text":359},{"id":369,"depth":13,"text":370},{"id":389,"depth":13,"text":390},{"id":494,"depth":13,"text":494},{"id":550,"depth":13,"text":551},"Configure your editor for the best Maizzle development experience.","md",{},{"title":191,"description":577},"docs\u002Feditor-setup","peJFF_IV_mUTEjcp2ykd38xKBrVwYvw9AZc0gDUlwSM",1781013239032]