[{"data":1,"prerenderedAt":1589},["ShallowReactive",2],{"docs-nav":3,"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Flaravel":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":206,"body":318,"description":1583,"extension":1584,"meta":1585,"navigation":14,"order":18,"path":205,"section":197,"seo":1586,"sidebar":14,"stem":1587,"toc":14,"__hash__":1588},"docs\u002Fdocs\u002Finstallation\u002Fframeworks\u002Flaravel.md",{"type":319,"value":320,"toc":1567},"minimark",[321,325,329,333,336,361,365,370,381,445,449,456,789,799,806,810,817,828,831,908,912,918,1125,1132,1135,1142,1155,1171,1175,1182,1197,1207,1211,1215,1225,1462,1465,1553,1557,1560,1563],[322,323,206],"h1",{"id":324},"laravel",[326,327,328],"p",{},"The Maizzle Vite plugin brings email template development into your Laravel workflow. You author templates as Vue SFCs and they get compiled to Blade templates.",[330,331,227],"h2",{"id":332},"installation",[326,334,335],{},"First, install Maizzle in your Laravel project:",[337,338,343],"pre",{"className":339,"code":340,"language":341,"meta":342,"style":342},"language-bash shiki shiki-themes laserwave","npm install @maizzle\u002Fframework\n","bash","",[344,345,346],"code",{"__ignoreMap":342},[347,348,350,354,358],"span",{"class":349,"line":18},"line",[347,351,353],{"class":352},"sZNF3","npm",[347,355,357],{"class":356},"sXiT_"," install",[347,359,360],{"class":356}," @maizzle\u002Fframework\n",[330,362,364],{"id":363},"setup","Setup",[366,367,369],"h3",{"id":368},"project-structure","Project structure",[326,371,372,373,376,377,380],{},"Create an ",[344,374,375],{},"emails"," directory inside ",[344,378,379],{},"resources\u002Fjs"," for your email templates:",[337,382,388],{"className":383,"code":384,"filename":385,"highlights":386,"language":387,"meta":342,"style":342},"language-text shiki shiki-themes laserwave","├── app\u002F\n├── resources\u002F\n│   ├── js\u002F\n│   │   ├── emails\u002F\n│   │   │   ├── welcome.vue\n│   │   │   └── images\u002F\n│   │   │       └── logo.png\n├── vite.config.ts\n├── tsconfig.json\n└── package.json\n","your-laravel-app",[27,52,128,124],"text",[344,389,390,395,400,405,412,418,424,430,435,440],{"__ignoreMap":342},[347,391,392],{"class":349,"line":18},[347,393,394],{},"├── app\u002F\n",[347,396,397],{"class":349,"line":13},[347,398,399],{},"├── resources\u002F\n",[347,401,402],{"class":349,"line":32},[347,403,404],{},"│   ├── js\u002F\n",[347,406,409],{"class":407,"line":27},[349,408],"highlight",[347,410,411],{},"│   │   ├── emails\u002F\n",[347,413,415],{"class":414,"line":52},[349,408],[347,416,417],{},"│   │   │   ├── welcome.vue\n",[347,419,421],{"class":420,"line":128},[349,408],[347,422,423],{},"│   │   │   └── images\u002F\n",[347,425,427],{"class":426,"line":124},[349,408],[347,428,429],{},"│   │   │       └── logo.png\n",[347,431,432],{"class":349,"line":48},[347,433,434],{},"├── vite.config.ts\n",[347,436,437],{"class":349,"line":23},[347,438,439],{},"├── tsconfig.json\n",[347,441,442],{"class":349,"line":140},[347,443,444],{},"└── package.json\n",[366,446,448],{"id":447},"vite-config","Vite config",[326,450,451,452,455],{},"Register the Maizzle Vite plugin in your ",[344,453,454],{},"vite.config.ts",":",[337,457,462],{"className":458,"code":459,"highlights":460,"language":461,"meta":342,"style":342},"language-ts shiki shiki-themes laserwave","import laravel from 'laravel-vite-plugin'\nimport tailwindcss from '@tailwindcss\u002Fvite'\nimport vue from '@vitejs\u002Fplugin-vue'\nimport { defineConfig } from 'vite'\nimport { maizzle } from '@maizzle\u002Fframework'\n\nexport default defineConfig({\n  plugins: [\n    laravel({\n      input: ['resources\u002Fcss\u002Fapp.css', 'resources\u002Fjs\u002Fapp.ts'],\n      refresh: true,\n    }),\n    tailwindcss(),\n    vue(),\n    maizzle({\n      root: 'resources\u002Fjs\u002Femails',\n      output: {\n        path: 'resources\u002Fviews\u002Femails',\n        extension: 'blade.php',\n      },\n      static: {\n        source: ['resources\u002Fjs\u002Femails\u002Fimages'],\n      },\n    }),\n  ],\n})\n",[52,132,66,112,40,44,84,96,88,100,144],"ts",[344,463,464,487,503,519,541,562,567,580,591,598,629,643,648,656,663,671,688,699,716,733,739,749,768,773,778,784],{"__ignoreMap":342},[347,465,466,470,474,477,481,484],{"class":349,"line":18},[347,467,469],{"class":468},"s0ZPN","import",[347,471,473],{"class":472},"sU-n2"," laravel",[347,475,476],{"class":468}," from",[347,478,480],{"class":479},"sGGKt"," '",[347,482,483],{"class":356},"laravel-vite-plugin",[347,485,486],{"class":479},"'\n",[347,488,489,491,494,496,498,501],{"class":349,"line":13},[347,490,469],{"class":468},[347,492,493],{"class":472}," tailwindcss",[347,495,476],{"class":468},[347,497,480],{"class":479},[347,499,500],{"class":356},"@tailwindcss\u002Fvite",[347,502,486],{"class":479},[347,504,505,507,510,512,514,517],{"class":349,"line":32},[347,506,469],{"class":468},[347,508,509],{"class":472}," vue",[347,511,476],{"class":468},[347,513,480],{"class":479},[347,515,516],{"class":356},"@vitejs\u002Fplugin-vue",[347,518,486],{"class":479},[347,520,521,523,526,529,532,534,536,539],{"class":349,"line":27},[347,522,469],{"class":468},[347,524,525],{"class":479}," {",[347,527,528],{"class":472}," defineConfig",[347,530,531],{"class":479}," }",[347,533,476],{"class":468},[347,535,480],{"class":479},[347,537,538],{"class":356},"vite",[347,540,486],{"class":479},[347,542,544,546,548,551,553,555,557,560],{"class":543,"line":52},[349,408],[347,545,469],{"class":468},[347,547,525],{"class":479},[347,549,550],{"class":472}," maizzle",[347,552,531],{"class":479},[347,554,476],{"class":468},[347,556,480],{"class":479},[347,558,559],{"class":356},"@maizzle\u002Fframework",[347,561,486],{"class":479},[347,563,564],{"class":349,"line":128},[347,565,566],{"emptyLinePlaceholder":14},"\n",[347,568,569,572,575,577],{"class":349,"line":124},[347,570,571],{"class":468},"export",[347,573,574],{"class":468}," default",[347,576,528],{"class":352},[347,578,579],{"class":479},"({\n",[347,581,582,586,588],{"class":349,"line":48},[347,583,585],{"class":584},"sLaUg","  plugins",[347,587,455],{"class":479},[347,589,590],{"class":479}," [\n",[347,592,593,596],{"class":349,"line":23},[347,594,595],{"class":352},"    laravel",[347,597,579],{"class":479},[347,599,600,603,605,608,611,614,616,619,621,624,626],{"class":349,"line":140},[347,601,602],{"class":584},"      input",[347,604,455],{"class":479},[347,606,607],{"class":479}," [",[347,609,610],{"class":479},"'",[347,612,613],{"class":356},"resources\u002Fcss\u002Fapp.css",[347,615,610],{"class":479},[347,617,618],{"class":479},",",[347,620,480],{"class":479},[347,622,623],{"class":356},"resources\u002Fjs\u002Fapp.ts",[347,625,610],{"class":479},[347,627,628],{"class":479},"],\n",[347,630,631,634,636,640],{"class":349,"line":56},[347,632,633],{"class":584},"      refresh",[347,635,455],{"class":479},[347,637,639],{"class":638},"skd8d"," true",[347,641,642],{"class":479},",\n",[347,644,645],{"class":349,"line":80},[347,646,647],{"class":479},"    }),\n",[347,649,650,653],{"class":349,"line":36},[347,651,652],{"class":352},"    tailwindcss",[347,654,655],{"class":479},"(),\n",[347,657,658,661],{"class":349,"line":73},[347,659,660],{"class":352},"    vue",[347,662,655],{"class":479},[347,664,666,669],{"class":665,"line":132},[349,408],[347,667,668],{"class":352},"    maizzle",[347,670,579],{"class":479},[347,672,674,677,679,681,684,686],{"class":673,"line":66},[349,408],[347,675,676],{"class":584},"      root",[347,678,455],{"class":479},[347,680,480],{"class":479},[347,682,683],{"class":356},"resources\u002Fjs\u002Femails",[347,685,610],{"class":479},[347,687,642],{"class":479},[347,689,691,694,696],{"class":690,"line":112},[349,408],[347,692,693],{"class":584},"      output",[347,695,455],{"class":479},[347,697,698],{"class":479}," {\n",[347,700,702,705,707,709,712,714],{"class":701,"line":40},[349,408],[347,703,704],{"class":584},"        path",[347,706,455],{"class":479},[347,708,480],{"class":479},[347,710,711],{"class":356},"resources\u002Fviews\u002Femails",[347,713,610],{"class":479},[347,715,642],{"class":479},[347,717,719,722,724,726,729,731],{"class":718,"line":44},[349,408],[347,720,721],{"class":584},"        extension",[347,723,455],{"class":479},[347,725,480],{"class":479},[347,727,728],{"class":356},"blade.php",[347,730,610],{"class":479},[347,732,642],{"class":479},[347,734,736],{"class":735,"line":84},[349,408],[347,737,738],{"class":479},"      },\n",[347,740,742,745,747],{"class":741,"line":96},[349,408],[347,743,744],{"class":584},"      static",[347,746,455],{"class":479},[347,748,698],{"class":479},[347,750,752,755,757,759,761,764,766],{"class":751,"line":88},[349,408],[347,753,754],{"class":584},"        source",[347,756,455],{"class":479},[347,758,607],{"class":479},[347,760,610],{"class":479},[347,762,763],{"class":356},"resources\u002Fjs\u002Femails\u002Fimages",[347,765,610],{"class":479},[347,767,628],{"class":479},[347,769,771],{"class":770,"line":100},[349,408],[347,772,738],{"class":479},[347,774,776],{"class":775,"line":144},[349,408],[347,777,647],{"class":479},[347,779,781],{"class":349,"line":780},25,[347,782,783],{"class":479},"  ],\n",[347,785,786],{"class":349,"line":92},[347,787,788],{"class":479},"})\n",[326,790,791,792,795,796,798],{},"Set ",[344,793,794],{},"output.extension"," to ",[344,797,728],{}," so Laravel can use compiled email templates as views.",[326,800,801,802,805],{},"See ",[803,804,173],"a",{"href":172}," for all available options.",[366,807,809],{"id":808},"typescript","TypeScript",[326,811,812,813,816],{},"Maizzle detects Laravel projects and generates type declarations for auto-imported components and composables relative to ",[344,814,815],{},"root"," location.",[326,818,819,820,823,824,827],{},"Laravel's default ",[344,821,822],{},"tsconfig.json"," typically includes ",[344,825,826],{},"resources\u002Fjs\u002F**\u002F*.d.ts",", which covers the generated types automatically.",[326,829,830],{},"If your tsconfig doesn't include them, add the path:",[337,832,836],{"className":833,"code":834,"filename":822,"language":835,"meta":342,"style":342},"language-json shiki shiki-themes laserwave has-diff","{\n  \u002F\u002F ...\n  \"include\": [\n    \"resources\u002Fjs\u002F**\u002F*.ts\",\n    \"resources\u002Fjs\u002F**\u002F*.d.ts\",\n    \"resources\u002Fjs\u002F**\u002F*.vue\" \u002F\u002F [!code ++]\n  ]\n}\n","json",[344,837,838,843,849,864,876,886,898,903],{"__ignoreMap":342},[347,839,840],{"class":349,"line":18},[347,841,842],{"class":479},"{\n",[347,844,845],{"class":349,"line":13},[347,846,848],{"class":847},"sVsQ9","  \u002F\u002F ...\n",[347,850,851,854,857,860,862],{"class":349,"line":32},[347,852,853],{"class":479},"  \"",[347,855,856],{"class":468},"include",[347,858,859],{"class":479},"\"",[347,861,455],{"class":479},[347,863,590],{"class":479},[347,865,866,869,872,874],{"class":349,"line":27},[347,867,868],{"class":479},"    \"",[347,870,871],{"class":356},"resources\u002Fjs\u002F**\u002F*.ts",[347,873,859],{"class":479},[347,875,642],{"class":479},[347,877,878,880,882,884],{"class":349,"line":52},[347,879,868],{"class":479},[347,881,826],{"class":356},[347,883,859],{"class":479},[347,885,642],{"class":479},[347,887,891,893,896],{"class":888,"line":128},[349,889,890],"diff","add",[347,892,868],{"class":479},[347,894,895],{"class":356},"resources\u002Fjs\u002F**\u002F*.vue",[347,897,859],{"class":479},[347,899,900],{"class":349,"line":124},[347,901,902],{"class":479},"  ]\n",[347,904,905],{"class":349,"line":48},[347,906,907],{"class":479},"}\n",[330,909,911],{"id":910},"usage","Usage",[326,913,914,915,917],{},"Create Vue SFC email templates in your ",[344,916,683],{}," directory.",[337,919,924],{"className":920,"code":921,"filename":922,"language":923,"meta":342,"style":342},"language-vue shiki shiki-themes laserwave","\u003Cscript setup>\n  defineConfig({\n    user: 'world',\n  })\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CLayout>\n    \u003CContainer class=\"max-w-xl\">\n      \u003CHeading>\n        Hello, {{ user }}!\n      \u003C\u002FHeading>\n      \u003CText>\n        Welcome aboard!\n      \u003C\u002FText>\n      \u003CButton href=\"https:\u002F\u002Fexample.com\">\n        Verify email\n      \u003C\u002FButton>\n    \u003C\u002FContainer>\n  \u003C\u002FLayout>\n\u003C\u002Ftemplate>\n","resources\u002Fjs\u002Femails\u002Fwelcome.vue","vue",[344,925,926,941,948,964,969,978,982,991,1000,1022,1031,1036,1045,1053,1058,1066,1086,1091,1099,1108,1117],{"__ignoreMap":342},[347,927,928,931,935,938],{"class":349,"line":18},[347,929,930],{"class":479},"\u003C",[347,932,934],{"class":933},"sb4Pa","script",[347,936,937],{"class":352}," setup",[347,939,940],{"class":479},">\n",[347,942,943,946],{"class":349,"line":13},[347,944,945],{"class":352},"  defineConfig",[347,947,579],{"class":479},[347,949,950,953,955,957,960,962],{"class":349,"line":32},[347,951,952],{"class":468},"    user",[347,954,455],{"class":479},[347,956,480],{"class":479},[347,958,959],{"class":356},"world",[347,961,610],{"class":479},[347,963,642],{"class":479},[347,965,966],{"class":349,"line":27},[347,967,968],{"class":479},"  })\n",[347,970,971,974,976],{"class":349,"line":52},[347,972,973],{"class":479},"\u003C\u002F",[347,975,934],{"class":933},[347,977,940],{"class":479},[347,979,980],{"class":349,"line":128},[347,981,566],{"emptyLinePlaceholder":14},[347,983,984,986,989],{"class":349,"line":124},[347,985,930],{"class":479},[347,987,988],{"class":933},"template",[347,990,940],{"class":479},[347,992,993,996,998],{"class":349,"line":48},[347,994,995],{"class":479},"  \u003C",[347,997,76],{"class":933},[347,999,940],{"class":479},[347,1001,1002,1005,1007,1010,1013,1015,1018,1020],{"class":349,"line":23},[347,1003,1004],{"class":479},"    \u003C",[347,1006,51],{"class":933},[347,1008,1009],{"class":352}," class",[347,1011,1012],{"class":479},"=",[347,1014,859],{"class":479},[347,1016,1017],{"class":356},"max-w-xl",[347,1019,859],{"class":479},[347,1021,940],{"class":479},[347,1023,1024,1027,1029],{"class":349,"line":140},[347,1025,1026],{"class":479},"      \u003C",[347,1028,62],{"class":933},[347,1030,940],{"class":479},[347,1032,1033],{"class":349,"line":56},[347,1034,1035],{"class":584},"        Hello, {{ user }}!\n",[347,1037,1038,1041,1043],{"class":349,"line":80},[347,1039,1040],{"class":479},"      \u003C\u002F",[347,1042,62],{"class":933},[347,1044,940],{"class":479},[347,1046,1047,1049,1051],{"class":349,"line":36},[347,1048,1026],{"class":479},[347,1050,139],{"class":933},[347,1052,940],{"class":479},[347,1054,1055],{"class":349,"line":73},[347,1056,1057],{"class":584},"        Welcome aboard!\n",[347,1059,1060,1062,1064],{"class":349,"line":132},[347,1061,1040],{"class":479},[347,1063,139],{"class":933},[347,1065,940],{"class":479},[347,1067,1068,1070,1072,1075,1077,1079,1082,1084],{"class":349,"line":66},[347,1069,1026],{"class":479},[347,1071,35],{"class":933},[347,1073,1074],{"class":352}," href",[347,1076,1012],{"class":479},[347,1078,859],{"class":479},[347,1080,1081],{"class":356},"https:\u002F\u002Fexample.com",[347,1083,859],{"class":479},[347,1085,940],{"class":479},[347,1087,1088],{"class":349,"line":112},[347,1089,1090],{"class":584},"        Verify email\n",[347,1092,1093,1095,1097],{"class":349,"line":40},[347,1094,1040],{"class":479},[347,1096,35],{"class":933},[347,1098,940],{"class":479},[347,1100,1101,1104,1106],{"class":349,"line":44},[347,1102,1103],{"class":479},"    \u003C\u002F",[347,1105,51],{"class":933},[347,1107,940],{"class":479},[347,1109,1110,1113,1115],{"class":349,"line":84},[347,1111,1112],{"class":479},"  \u003C\u002F",[347,1114,76],{"class":933},[347,1116,940],{"class":479},[347,1118,1119,1121,1123],{"class":349,"line":96},[347,1120,973],{"class":479},[347,1122,988],{"class":933},[347,1124,940],{"class":479},[326,1126,1127,1128,1131],{},"On build, this will compile to ",[344,1129,1130],{},"resources\u002Fviews\u002Femails\u002Fwelcome.blade.php",".",[366,1133,174],{"id":1134},"development",[326,1136,1137,1138,1141],{},"Run ",[344,1139,1140],{},"composer dev"," as usual to start the dev server.",[337,1143,1145],{"className":339,"code":1144,"language":341,"meta":342,"style":342},"composer dev\n",[344,1146,1147],{"__ignoreMap":342},[347,1148,1149,1152],{"class":349,"line":18},[347,1150,1151],{"class":352},"composer",[347,1153,1154],{"class":356}," dev\n",[1156,1157,1158,1165],"ul",{},[1159,1160,1161,1162],"li",{},"Your Laravel app will typically be available at ",[344,1163,1164],{},"http:\u002F\u002Flocalhost:8000",[1159,1166,1167,1168],{},"Access the Maizzle dev UI at ",[344,1169,1170],{},"http:\u002F\u002Flocalhost:3000",[366,1172,1174],{"id":1173},"production-build","Production build",[326,1176,1177,1178,1181],{},"When you run ",[344,1179,1180],{},"npm run build",", Maizzle compiles your email templates to Blade files:",[337,1183,1185],{"className":339,"code":1184,"language":341,"meta":342,"style":342},"npm run build\n",[344,1186,1187],{"__ignoreMap":342},[347,1188,1189,1191,1194],{"class":349,"line":18},[347,1190,353],{"class":352},[347,1192,1193],{"class":356}," run",[347,1195,1196],{"class":356}," build\n",[326,1198,1199,1200,1203,1204,1131],{},"This outputs production-ready ",[344,1201,1202],{},".blade.php"," email templates in ",[344,1205,1206],{},"resources\u002Fviews\u002Femails\u002F",[330,1208,1210],{"id":1209},"sending-emails","Sending emails",[366,1212,1214],{"id":1213},"using-blade-output","Using Blade output",[326,1216,1217,1218,1220,1221,1224],{},"The compiled ",[344,1219,1202],{}," files can be used directly with Laravel's ",[344,1222,1223],{},"Mail"," facade:",[337,1226,1231],{"className":1227,"code":1228,"filename":1229,"language":1230,"meta":342,"style":342},"language-php shiki shiki-themes laserwave","namespace App\\Mail;\n\nuse Illuminate\\Mail\\Mailable;\nuse Illuminate\\Mail\\Mailables\\Content;\nuse Illuminate\\Mail\\Mailables\\Envelope;\n\nclass WelcomeEmail extends Mailable\n{\n    public function envelope(): Envelope\n    {\n        return new Envelope(\n            subject: 'Welcome!',\n        );\n    }\n\n    public function content(): Content\n    {\n        return new Content(\n            html: 'emails.welcome',\n        );\n    }\n}\n","app\u002FMail\u002FWelcomeEmail.php","php",[344,1232,1233,1250,1254,1273,1295,1316,1320,1331,1335,1354,1359,1373,1389,1394,1399,1403,1419,1423,1434,1450,1454,1458],{"__ignoreMap":342},[347,1234,1235,1238,1242,1245,1247],{"class":349,"line":18},[347,1236,1237],{"class":468},"namespace",[347,1239,1241],{"class":1240},"sIihq"," App",[347,1243,1244],{"class":479},"\\",[347,1246,1223],{"class":1240},[347,1248,1249],{"class":479},";\n",[347,1251,1252],{"class":349,"line":13},[347,1253,566],{"emptyLinePlaceholder":14},[347,1255,1256,1259,1262,1264,1266,1268,1271],{"class":349,"line":32},[347,1257,1258],{"class":468},"use",[347,1260,1261],{"class":584}," Illuminate",[347,1263,1244],{"class":479},[347,1265,1223],{"class":584},[347,1267,1244],{"class":479},[347,1269,1270],{"class":584},"Mailable",[347,1272,1249],{"class":479},[347,1274,1275,1277,1279,1281,1283,1285,1288,1290,1293],{"class":349,"line":27},[347,1276,1258],{"class":468},[347,1278,1261],{"class":584},[347,1280,1244],{"class":479},[347,1282,1223],{"class":584},[347,1284,1244],{"class":479},[347,1286,1287],{"class":584},"Mailables",[347,1289,1244],{"class":479},[347,1291,1292],{"class":584},"Content",[347,1294,1249],{"class":479},[347,1296,1297,1299,1301,1303,1305,1307,1309,1311,1314],{"class":349,"line":52},[347,1298,1258],{"class":468},[347,1300,1261],{"class":584},[347,1302,1244],{"class":479},[347,1304,1223],{"class":584},[347,1306,1244],{"class":479},[347,1308,1287],{"class":584},[347,1310,1244],{"class":479},[347,1312,1313],{"class":584},"Envelope",[347,1315,1249],{"class":479},[347,1317,1318],{"class":349,"line":128},[347,1319,566],{"emptyLinePlaceholder":14},[347,1321,1322,1325,1328],{"class":349,"line":124},[347,1323,1324],{"class":1240},"class",[347,1326,1327],{"class":1240}," WelcomeEmail",[347,1329,1330],{"class":584}," extends Mailable\n",[347,1332,1333],{"class":349,"line":48},[347,1334,842],{"class":479},[347,1336,1337,1340,1343,1346,1349,1351],{"class":349,"line":23},[347,1338,1339],{"class":584},"    public ",[347,1341,1342],{"class":1240},"function",[347,1344,1345],{"class":352}," envelope",[347,1347,1348],{"class":479},"()",[347,1350,455],{"class":933},[347,1352,1353],{"class":584}," Envelope\n",[347,1355,1356],{"class":349,"line":140},[347,1357,1358],{"class":479},"    {\n",[347,1360,1361,1364,1367,1370],{"class":349,"line":56},[347,1362,1363],{"class":468},"        return",[347,1365,1366],{"class":468}," new",[347,1368,1369],{"class":584}," Envelope",[347,1371,1372],{"class":479},"(\n",[347,1374,1375,1378,1380,1382,1385,1387],{"class":349,"line":80},[347,1376,1377],{"class":352},"            subject",[347,1379,455],{"class":479},[347,1381,480],{"class":479},[347,1383,1384],{"class":356},"Welcome!",[347,1386,610],{"class":479},[347,1388,642],{"class":479},[347,1390,1391],{"class":349,"line":36},[347,1392,1393],{"class":479},"        );\n",[347,1395,1396],{"class":349,"line":73},[347,1397,1398],{"class":479},"    }\n",[347,1400,1401],{"class":349,"line":132},[347,1402,566],{"emptyLinePlaceholder":14},[347,1404,1405,1407,1409,1412,1414,1416],{"class":349,"line":66},[347,1406,1339],{"class":584},[347,1408,1342],{"class":1240},[347,1410,1411],{"class":352}," content",[347,1413,1348],{"class":479},[347,1415,455],{"class":933},[347,1417,1418],{"class":584}," Content\n",[347,1420,1421],{"class":349,"line":112},[347,1422,1358],{"class":479},[347,1424,1425,1427,1429,1432],{"class":349,"line":40},[347,1426,1363],{"class":468},[347,1428,1366],{"class":468},[347,1430,1431],{"class":584}," Content",[347,1433,1372],{"class":479},[347,1435,1436,1439,1441,1443,1446,1448],{"class":349,"line":44},[347,1437,1438],{"class":352},"            html",[347,1440,455],{"class":479},[347,1442,480],{"class":479},[347,1444,1445],{"class":356},"emails.welcome",[347,1447,610],{"class":479},[347,1449,642],{"class":479},[347,1451,1452],{"class":349,"line":84},[347,1453,1393],{"class":479},[347,1455,1456],{"class":349,"line":96},[347,1457,1398],{"class":479},[347,1459,1460],{"class":349,"line":88},[347,1461,907],{"class":479},[326,1463,1464],{},"Then, send it:",[337,1466,1469],{"className":1227,"code":1467,"filename":1468,"language":1230,"meta":342,"style":342},"use App\\Mail\\WelcomeEmail;\nuse Illuminate\\Support\\Facades\\Mail;\n\nMail::to('user@example.com')->send(new WelcomeEmail());\n","routes\u002Fweb.php",[344,1470,1471,1488,1510,1514],{"__ignoreMap":342},[347,1472,1473,1475,1477,1479,1481,1483,1486],{"class":349,"line":18},[347,1474,1258],{"class":468},[347,1476,1241],{"class":584},[347,1478,1244],{"class":479},[347,1480,1223],{"class":584},[347,1482,1244],{"class":479},[347,1484,1485],{"class":584},"WelcomeEmail",[347,1487,1249],{"class":479},[347,1489,1490,1492,1494,1496,1499,1501,1504,1506,1508],{"class":349,"line":13},[347,1491,1258],{"class":468},[347,1493,1261],{"class":584},[347,1495,1244],{"class":479},[347,1497,1498],{"class":584},"Support",[347,1500,1244],{"class":479},[347,1502,1503],{"class":584},"Facades",[347,1505,1244],{"class":479},[347,1507,1223],{"class":584},[347,1509,1249],{"class":479},[347,1511,1512],{"class":349,"line":32},[347,1513,566],{"emptyLinePlaceholder":14},[347,1515,1516,1518,1521,1524,1527,1529,1532,1534,1537,1540,1543,1545,1548,1550],{"class":349,"line":27},[347,1517,1223],{"class":584},[347,1519,1520],{"class":933},"::",[347,1522,1523],{"class":352},"to",[347,1525,1526],{"class":479},"(",[347,1528,610],{"class":479},[347,1530,1531],{"class":356},"user@example.com",[347,1533,610],{"class":479},[347,1535,1536],{"class":479},")",[347,1538,1539],{"class":933},"->",[347,1541,1542],{"class":352},"send",[347,1544,1526],{"class":479},[347,1546,1547],{"class":468},"new",[347,1549,1327],{"class":584},[347,1551,1552],{"class":479},"());\n",[330,1554,1556],{"id":1555},"other-frameworks","Other frameworks",[326,1558,1559],{},"Not using Laravel? Check out the other framework guides:",[1561,1562],"framework-guides",{":exclude":324},[1564,1565,1566],"style",{},"html pre.shiki code .sZNF3, html code.shiki .sZNF3{--shiki-default:#EB64B9}html pre.shiki code .sXiT_, html code.shiki .sXiT_{--shiki-default:#B4DCE7}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s0ZPN, html code.shiki .s0ZPN{--shiki-default:#40B4C4}html pre.shiki code .sU-n2, html code.shiki .sU-n2{--shiki-default:#FFF}html pre.shiki code .sGGKt, html code.shiki .sGGKt{--shiki-default:#7B6995}html pre.shiki code .sLaUg, html code.shiki .sLaUg{--shiki-default:#FFFFFF}html pre.shiki code .skd8d, html code.shiki .skd8d{--shiki-default:#FFE261}html pre.shiki code .sVsQ9, html code.shiki .sVsQ9{--shiki-default:#91889B}html pre.shiki code .sb4Pa, html code.shiki .sb4Pa{--shiki-default:#74DFC4}html pre.shiki code .sIihq, html code.shiki .sIihq{--shiki-default:#A96BC0}",{"title":342,"searchDepth":13,"depth":13,"links":1568},[1569,1570,1575,1579,1582],{"id":332,"depth":13,"text":227},{"id":363,"depth":13,"text":364,"children":1571},[1572,1573,1574],{"id":368,"depth":32,"text":369},{"id":447,"depth":32,"text":448},{"id":808,"depth":32,"text":809},{"id":910,"depth":13,"text":911,"children":1576},[1577,1578],{"id":1134,"depth":32,"text":174},{"id":1173,"depth":32,"text":1174},{"id":1209,"depth":13,"text":1210,"children":1580},[1581],{"id":1213,"depth":32,"text":1214},{"id":1555,"depth":13,"text":1556},"How to use Maizzle with Laravel to build email templates alongside your web application.","md",{},{"title":206,"description":1583},"docs\u002Finstallation\u002Fframeworks\u002Flaravel","GzT0ZXEmaNhBqVsPod1PgHJ3PjNBtCMjAmpUkFQ-26M",1782913026814]