[{"data":1,"prerenderedAt":1588},["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":1582,"extension":1583,"meta":1584,"navigation":14,"order":18,"path":205,"section":197,"seo":1585,"sidebar":14,"stem":1586,"toc":14,"__hash__":1587},"docs\u002Fdocs\u002Finstallation\u002Fframeworks\u002Flaravel.md",{"type":319,"value":320,"toc":1566},"minimark",[321,325,329,333,336,361,365,370,381,445,449,456,788,798,805,809,816,827,830,907,911,917,1124,1131,1134,1141,1154,1170,1174,1181,1196,1206,1210,1214,1224,1461,1464,1552,1556,1559,1562],[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],"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,777,783],{"__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,775],{"class":349,"line":144},[347,776,647],{"class":479},[347,778,780],{"class":349,"line":779},25,[347,781,782],{"class":479},"  ],\n",[347,784,785],{"class":349,"line":92},[347,786,787],{"class":479},"})\n",[326,789,790,791,794,795,797],{},"Set ",[344,792,793],{},"output.extension"," to ",[344,796,728],{}," so Laravel can use compiled email templates as views.",[326,799,800,801,804],{},"See ",[802,803,173],"a",{"href":172}," for all available options.",[366,806,808],{"id":807},"typescript","TypeScript",[326,810,811,812,815],{},"Maizzle detects Laravel projects and generates type declarations for auto-imported components and composables relative to ",[344,813,814],{},"root"," location.",[326,817,818,819,822,823,826],{},"Laravel's default ",[344,820,821],{},"tsconfig.json"," typically includes ",[344,824,825],{},"resources\u002Fjs\u002F**\u002F*.d.ts",", which covers the generated types automatically.",[326,828,829],{},"If your tsconfig doesn't include them, add the path:",[337,831,835],{"className":832,"code":833,"filename":821,"language":834,"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,836,837,842,848,863,875,885,897,902],{"__ignoreMap":342},[347,838,839],{"class":349,"line":18},[347,840,841],{"class":479},"{\n",[347,843,844],{"class":349,"line":13},[347,845,847],{"class":846},"sVsQ9","  \u002F\u002F ...\n",[347,849,850,853,856,859,861],{"class":349,"line":32},[347,851,852],{"class":479},"  \"",[347,854,855],{"class":468},"include",[347,857,858],{"class":479},"\"",[347,860,455],{"class":479},[347,862,590],{"class":479},[347,864,865,868,871,873],{"class":349,"line":27},[347,866,867],{"class":479},"    \"",[347,869,870],{"class":356},"resources\u002Fjs\u002F**\u002F*.ts",[347,872,858],{"class":479},[347,874,642],{"class":479},[347,876,877,879,881,883],{"class":349,"line":52},[347,878,867],{"class":479},[347,880,825],{"class":356},[347,882,858],{"class":479},[347,884,642],{"class":479},[347,886,890,892,895],{"class":887,"line":128},[349,888,889],"diff","add",[347,891,867],{"class":479},[347,893,894],{"class":356},"resources\u002Fjs\u002F**\u002F*.vue",[347,896,858],{"class":479},[347,898,899],{"class":349,"line":124},[347,900,901],{"class":479},"  ]\n",[347,903,904],{"class":349,"line":48},[347,905,906],{"class":479},"}\n",[330,908,910],{"id":909},"usage","Usage",[326,912,913,914,916],{},"Create Vue SFC email templates in your ",[344,915,683],{}," directory.",[337,918,923],{"className":919,"code":920,"filename":921,"language":922,"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,924,925,940,947,963,968,977,981,990,999,1021,1030,1035,1044,1052,1057,1065,1085,1090,1098,1107,1116],{"__ignoreMap":342},[347,926,927,930,934,937],{"class":349,"line":18},[347,928,929],{"class":479},"\u003C",[347,931,933],{"class":932},"sb4Pa","script",[347,935,936],{"class":352}," setup",[347,938,939],{"class":479},">\n",[347,941,942,945],{"class":349,"line":13},[347,943,944],{"class":352},"  defineConfig",[347,946,579],{"class":479},[347,948,949,952,954,956,959,961],{"class":349,"line":32},[347,950,951],{"class":468},"    user",[347,953,455],{"class":479},[347,955,480],{"class":479},[347,957,958],{"class":356},"world",[347,960,610],{"class":479},[347,962,642],{"class":479},[347,964,965],{"class":349,"line":27},[347,966,967],{"class":479},"  })\n",[347,969,970,973,975],{"class":349,"line":52},[347,971,972],{"class":479},"\u003C\u002F",[347,974,933],{"class":932},[347,976,939],{"class":479},[347,978,979],{"class":349,"line":128},[347,980,566],{"emptyLinePlaceholder":14},[347,982,983,985,988],{"class":349,"line":124},[347,984,929],{"class":479},[347,986,987],{"class":932},"template",[347,989,939],{"class":479},[347,991,992,995,997],{"class":349,"line":48},[347,993,994],{"class":479},"  \u003C",[347,996,76],{"class":932},[347,998,939],{"class":479},[347,1000,1001,1004,1006,1009,1012,1014,1017,1019],{"class":349,"line":23},[347,1002,1003],{"class":479},"    \u003C",[347,1005,51],{"class":932},[347,1007,1008],{"class":352}," class",[347,1010,1011],{"class":479},"=",[347,1013,858],{"class":479},[347,1015,1016],{"class":356},"max-w-xl",[347,1018,858],{"class":479},[347,1020,939],{"class":479},[347,1022,1023,1026,1028],{"class":349,"line":140},[347,1024,1025],{"class":479},"      \u003C",[347,1027,62],{"class":932},[347,1029,939],{"class":479},[347,1031,1032],{"class":349,"line":56},[347,1033,1034],{"class":584},"        Hello, {{ user }}!\n",[347,1036,1037,1040,1042],{"class":349,"line":80},[347,1038,1039],{"class":479},"      \u003C\u002F",[347,1041,62],{"class":932},[347,1043,939],{"class":479},[347,1045,1046,1048,1050],{"class":349,"line":36},[347,1047,1025],{"class":479},[347,1049,139],{"class":932},[347,1051,939],{"class":479},[347,1053,1054],{"class":349,"line":73},[347,1055,1056],{"class":584},"        Welcome aboard!\n",[347,1058,1059,1061,1063],{"class":349,"line":132},[347,1060,1039],{"class":479},[347,1062,139],{"class":932},[347,1064,939],{"class":479},[347,1066,1067,1069,1071,1074,1076,1078,1081,1083],{"class":349,"line":66},[347,1068,1025],{"class":479},[347,1070,35],{"class":932},[347,1072,1073],{"class":352}," href",[347,1075,1011],{"class":479},[347,1077,858],{"class":479},[347,1079,1080],{"class":356},"https:\u002F\u002Fexample.com",[347,1082,858],{"class":479},[347,1084,939],{"class":479},[347,1086,1087],{"class":349,"line":112},[347,1088,1089],{"class":584},"        Verify email\n",[347,1091,1092,1094,1096],{"class":349,"line":40},[347,1093,1039],{"class":479},[347,1095,35],{"class":932},[347,1097,939],{"class":479},[347,1099,1100,1103,1105],{"class":349,"line":44},[347,1101,1102],{"class":479},"    \u003C\u002F",[347,1104,51],{"class":932},[347,1106,939],{"class":479},[347,1108,1109,1112,1114],{"class":349,"line":84},[347,1110,1111],{"class":479},"  \u003C\u002F",[347,1113,76],{"class":932},[347,1115,939],{"class":479},[347,1117,1118,1120,1122],{"class":349,"line":96},[347,1119,972],{"class":479},[347,1121,987],{"class":932},[347,1123,939],{"class":479},[326,1125,1126,1127,1130],{},"On build, this will compile to ",[344,1128,1129],{},"resources\u002Fviews\u002Femails\u002Fwelcome.blade.php",".",[366,1132,174],{"id":1133},"development",[326,1135,1136,1137,1140],{},"Run ",[344,1138,1139],{},"composer dev"," as usual to start the dev server.",[337,1142,1144],{"className":339,"code":1143,"language":341,"meta":342,"style":342},"composer dev\n",[344,1145,1146],{"__ignoreMap":342},[347,1147,1148,1151],{"class":349,"line":18},[347,1149,1150],{"class":352},"composer",[347,1152,1153],{"class":356}," dev\n",[1155,1156,1157,1164],"ul",{},[1158,1159,1160,1161],"li",{},"Your Laravel app will typically be available at ",[344,1162,1163],{},"http:\u002F\u002Flocalhost:8000",[1158,1165,1166,1167],{},"Access the Maizzle dev UI at ",[344,1168,1169],{},"http:\u002F\u002Flocalhost:3000",[366,1171,1173],{"id":1172},"production-build","Production build",[326,1175,1176,1177,1180],{},"When you run ",[344,1178,1179],{},"npm run build",", Maizzle compiles your email templates to Blade files:",[337,1182,1184],{"className":339,"code":1183,"language":341,"meta":342,"style":342},"npm run build\n",[344,1185,1186],{"__ignoreMap":342},[347,1187,1188,1190,1193],{"class":349,"line":18},[347,1189,353],{"class":352},[347,1191,1192],{"class":356}," run",[347,1194,1195],{"class":356}," build\n",[326,1197,1198,1199,1202,1203,1130],{},"This outputs production-ready ",[344,1200,1201],{},".blade.php"," email templates in ",[344,1204,1205],{},"resources\u002Fviews\u002Femails\u002F",[330,1207,1209],{"id":1208},"sending-emails","Sending emails",[366,1211,1213],{"id":1212},"using-blade-output","Using Blade output",[326,1215,1216,1217,1219,1220,1223],{},"The compiled ",[344,1218,1201],{}," files can be used directly with Laravel's ",[344,1221,1222],{},"Mail"," facade:",[337,1225,1230],{"className":1226,"code":1227,"filename":1228,"language":1229,"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,1231,1232,1249,1253,1272,1294,1315,1319,1330,1334,1353,1358,1372,1388,1393,1398,1402,1418,1422,1433,1449,1453,1457],{"__ignoreMap":342},[347,1233,1234,1237,1241,1244,1246],{"class":349,"line":18},[347,1235,1236],{"class":468},"namespace",[347,1238,1240],{"class":1239},"sIihq"," App",[347,1242,1243],{"class":479},"\\",[347,1245,1222],{"class":1239},[347,1247,1248],{"class":479},";\n",[347,1250,1251],{"class":349,"line":13},[347,1252,566],{"emptyLinePlaceholder":14},[347,1254,1255,1258,1261,1263,1265,1267,1270],{"class":349,"line":32},[347,1256,1257],{"class":468},"use",[347,1259,1260],{"class":584}," Illuminate",[347,1262,1243],{"class":479},[347,1264,1222],{"class":584},[347,1266,1243],{"class":479},[347,1268,1269],{"class":584},"Mailable",[347,1271,1248],{"class":479},[347,1273,1274,1276,1278,1280,1282,1284,1287,1289,1292],{"class":349,"line":27},[347,1275,1257],{"class":468},[347,1277,1260],{"class":584},[347,1279,1243],{"class":479},[347,1281,1222],{"class":584},[347,1283,1243],{"class":479},[347,1285,1286],{"class":584},"Mailables",[347,1288,1243],{"class":479},[347,1290,1291],{"class":584},"Content",[347,1293,1248],{"class":479},[347,1295,1296,1298,1300,1302,1304,1306,1308,1310,1313],{"class":349,"line":52},[347,1297,1257],{"class":468},[347,1299,1260],{"class":584},[347,1301,1243],{"class":479},[347,1303,1222],{"class":584},[347,1305,1243],{"class":479},[347,1307,1286],{"class":584},[347,1309,1243],{"class":479},[347,1311,1312],{"class":584},"Envelope",[347,1314,1248],{"class":479},[347,1316,1317],{"class":349,"line":128},[347,1318,566],{"emptyLinePlaceholder":14},[347,1320,1321,1324,1327],{"class":349,"line":124},[347,1322,1323],{"class":1239},"class",[347,1325,1326],{"class":1239}," WelcomeEmail",[347,1328,1329],{"class":584}," extends Mailable\n",[347,1331,1332],{"class":349,"line":48},[347,1333,841],{"class":479},[347,1335,1336,1339,1342,1345,1348,1350],{"class":349,"line":23},[347,1337,1338],{"class":584},"    public ",[347,1340,1341],{"class":1239},"function",[347,1343,1344],{"class":352}," envelope",[347,1346,1347],{"class":479},"()",[347,1349,455],{"class":932},[347,1351,1352],{"class":584}," Envelope\n",[347,1354,1355],{"class":349,"line":140},[347,1356,1357],{"class":479},"    {\n",[347,1359,1360,1363,1366,1369],{"class":349,"line":56},[347,1361,1362],{"class":468},"        return",[347,1364,1365],{"class":468}," new",[347,1367,1368],{"class":584}," Envelope",[347,1370,1371],{"class":479},"(\n",[347,1373,1374,1377,1379,1381,1384,1386],{"class":349,"line":80},[347,1375,1376],{"class":352},"            subject",[347,1378,455],{"class":479},[347,1380,480],{"class":479},[347,1382,1383],{"class":356},"Welcome!",[347,1385,610],{"class":479},[347,1387,642],{"class":479},[347,1389,1390],{"class":349,"line":36},[347,1391,1392],{"class":479},"        );\n",[347,1394,1395],{"class":349,"line":73},[347,1396,1397],{"class":479},"    }\n",[347,1399,1400],{"class":349,"line":132},[347,1401,566],{"emptyLinePlaceholder":14},[347,1403,1404,1406,1408,1411,1413,1415],{"class":349,"line":66},[347,1405,1338],{"class":584},[347,1407,1341],{"class":1239},[347,1409,1410],{"class":352}," content",[347,1412,1347],{"class":479},[347,1414,455],{"class":932},[347,1416,1417],{"class":584}," Content\n",[347,1419,1420],{"class":349,"line":112},[347,1421,1357],{"class":479},[347,1423,1424,1426,1428,1431],{"class":349,"line":40},[347,1425,1362],{"class":468},[347,1427,1365],{"class":468},[347,1429,1430],{"class":584}," Content",[347,1432,1371],{"class":479},[347,1434,1435,1438,1440,1442,1445,1447],{"class":349,"line":44},[347,1436,1437],{"class":352},"            html",[347,1439,455],{"class":479},[347,1441,480],{"class":479},[347,1443,1444],{"class":356},"emails.welcome",[347,1446,610],{"class":479},[347,1448,642],{"class":479},[347,1450,1451],{"class":349,"line":84},[347,1452,1392],{"class":479},[347,1454,1455],{"class":349,"line":96},[347,1456,1397],{"class":479},[347,1458,1459],{"class":349,"line":88},[347,1460,906],{"class":479},[326,1462,1463],{},"Then, send it:",[337,1465,1468],{"className":1226,"code":1466,"filename":1467,"language":1229,"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,1469,1470,1487,1509,1513],{"__ignoreMap":342},[347,1471,1472,1474,1476,1478,1480,1482,1485],{"class":349,"line":18},[347,1473,1257],{"class":468},[347,1475,1240],{"class":584},[347,1477,1243],{"class":479},[347,1479,1222],{"class":584},[347,1481,1243],{"class":479},[347,1483,1484],{"class":584},"WelcomeEmail",[347,1486,1248],{"class":479},[347,1488,1489,1491,1493,1495,1498,1500,1503,1505,1507],{"class":349,"line":13},[347,1490,1257],{"class":468},[347,1492,1260],{"class":584},[347,1494,1243],{"class":479},[347,1496,1497],{"class":584},"Support",[347,1499,1243],{"class":479},[347,1501,1502],{"class":584},"Facades",[347,1504,1243],{"class":479},[347,1506,1222],{"class":584},[347,1508,1248],{"class":479},[347,1510,1511],{"class":349,"line":32},[347,1512,566],{"emptyLinePlaceholder":14},[347,1514,1515,1517,1520,1523,1526,1528,1531,1533,1536,1539,1542,1544,1547,1549],{"class":349,"line":27},[347,1516,1222],{"class":584},[347,1518,1519],{"class":932},"::",[347,1521,1522],{"class":352},"to",[347,1524,1525],{"class":479},"(",[347,1527,610],{"class":479},[347,1529,1530],{"class":356},"user@example.com",[347,1532,610],{"class":479},[347,1534,1535],{"class":479},")",[347,1537,1538],{"class":932},"->",[347,1540,1541],{"class":352},"send",[347,1543,1525],{"class":479},[347,1545,1546],{"class":468},"new",[347,1548,1326],{"class":584},[347,1550,1551],{"class":479},"());\n",[330,1553,1555],{"id":1554},"other-frameworks","Other frameworks",[326,1557,1558],{},"Not using Laravel? Check out the other framework guides:",[1560,1561],"framework-guides",{":exclude":324},[1563,1564,1565],"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":1567},[1568,1569,1574,1578,1581],{"id":332,"depth":13,"text":227},{"id":363,"depth":13,"text":364,"children":1570},[1571,1572,1573],{"id":368,"depth":32,"text":369},{"id":447,"depth":32,"text":448},{"id":807,"depth":32,"text":808},{"id":909,"depth":13,"text":910,"children":1575},[1576,1577],{"id":1133,"depth":32,"text":174},{"id":1172,"depth":32,"text":1173},{"id":1208,"depth":13,"text":1209,"children":1579},[1580],{"id":1212,"depth":32,"text":1213},{"id":1554,"depth":13,"text":1555},"How to use Maizzle with Laravel to build email templates alongside your web application.","md",{},{"title":206,"description":1582},"docs\u002Finstallation\u002Fframeworks\u002Flaravel","c-XsITFXbhGFZXfwSnnEwegWND5ZbaogsIbLdTjr-vY",1781015475343]