[{"data":1,"prerenderedAt":524},["ShallowReactive",2],{"navigation_docs":3,"-getting-started-migrating-to-v4":159,"-getting-started-migrating-to-v4-surround":519},[4,45,148],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"\u002Fgetting-started","1.getting-started",[10,15,20,25,30,35,40],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F2.introduction","i-lucide-mail",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F3.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"icon":24},"Usage","\u002Fgetting-started\u002Fusage","1.getting-started\u002F4.usage","i-lucide-play",{"title":26,"path":27,"stem":28,"icon":29},"Migrate","\u002Fgetting-started\u002Fmigrating-from-vue-email","1.getting-started\u002F5.migrating-from-vue-email","i-lucide-arrow-right",{"title":31,"path":32,"stem":33,"icon":34},"Project Structure","\u002Fgetting-started\u002Fproject-structure","1.getting-started\u002F6.project-structure","i-lucide-folder",{"title":36,"path":37,"stem":38,"icon":39},"i18n","\u002Fgetting-started\u002Fi18n","1.getting-started\u002F7.i18n","i-lucide-globe",{"title":41,"path":42,"stem":43,"icon":44},"Migrating to v4","\u002Fgetting-started\u002Fmigrating-to-v4","1.getting-started\u002F8.migrating-to-v4","i-lucide-arrow-up-circle",{"title":46,"icon":47,"path":48,"stem":49,"children":50,"page":6},"Components","i-lucide-component","\u002Fcomponents","2.components",[51,56,61,66,71,76,81,86,91,96,101,105,110,115,120,125,130,135,140,144],{"title":52,"path":53,"stem":54,"icon":55},"Body","\u002Fcomponents\u002Fbody","2.components\u002Fbody","i-lucide-layout",{"title":57,"path":58,"stem":59,"icon":60},"Button","\u002Fcomponents\u002Fbutton","2.components\u002Fbutton","i-lucide-mouse-pointer-click",{"title":62,"path":63,"stem":64,"icon":65},"CodeBlock","\u002Fcomponents\u002Fcode-block","2.components\u002Fcode-block","i-lucide-code",{"title":67,"path":68,"stem":69,"icon":70},"CodeInline","\u002Fcomponents\u002Fcode-inline","2.components\u002Fcode-inline","i-lucide-code-2",{"title":72,"path":73,"stem":74,"icon":75},"Column","\u002Fcomponents\u002Fcolumn","2.components\u002Fcolumn","i-lucide-columns",{"title":77,"path":78,"stem":79,"icon":80},"Container","\u002Fcomponents\u002Fcontainer","2.components\u002Fcontainer","i-lucide-square",{"title":82,"path":83,"stem":84,"icon":85},"Font","\u002Fcomponents\u002Ffont","2.components\u002Ffont","i-lucide-type",{"title":87,"path":88,"stem":89,"icon":90},"Head","\u002Fcomponents\u002Fhead","2.components\u002Fhead","i-lucide-info",{"title":92,"path":93,"stem":94,"icon":95},"Heading","\u002Fcomponents\u002Fheading","2.components\u002Fheading","i-lucide-heading",{"title":97,"path":98,"stem":99,"icon":100},"Horizontal Rule","\u002Fcomponents\u002Fhr","2.components\u002Fhr","i-lucide-minus",{"title":102,"path":103,"stem":104,"icon":65},"Html","\u002Fcomponents\u002Fhtml","2.components\u002Fhtml",{"title":106,"path":107,"stem":108,"icon":109},"Image","\u002Fcomponents\u002Fimg","2.components\u002Fimg","i-lucide-image",{"title":111,"path":112,"stem":113,"icon":114},"Link","\u002Fcomponents\u002Flink","2.components\u002Flink","i-lucide-link",{"title":116,"path":117,"stem":118,"icon":119},"Markdown","\u002Fcomponents\u002Fmarkdown","2.components\u002Fmarkdown","i-lucide-hash",{"title":121,"path":122,"stem":123,"icon":124},"Preview","\u002Fcomponents\u002Fpreview","2.components\u002Fpreview","i-lucide-eye",{"title":126,"path":127,"stem":128,"icon":129},"Row","\u002Fcomponents\u002Frow","2.components\u002Frow","i-lucide-rows",{"title":131,"path":132,"stem":133,"icon":134},"Section","\u002Fcomponents\u002Fsection","2.components\u002Fsection","i-lucide-rectangle-horizontal",{"title":136,"path":137,"stem":138,"icon":139},"Style","\u002Fcomponents\u002Fstyle","2.components\u002Fstyle","i-lucide-paintbrush",{"title":141,"path":142,"stem":143,"icon":14},"Subject","\u002Fcomponents\u002Fsubject","2.components\u002Fsubject",{"title":145,"path":146,"stem":147,"icon":85},"Text","\u002Fcomponents\u002Ftext","2.components\u002Ftext",{"title":149,"icon":150,"path":151,"stem":152,"children":153,"page":6},"Development","i-lucide-square-code","\u002Fdevelopment","3.development",[154],{"title":155,"path":156,"stem":157,"icon":158},"Vue SFC Imports","\u002Fdevelopment\u002Fdynamic-imports-virtual-files","3.development\u002F1.dynamic-imports-virtual-files","i-lucide-import",{"id":160,"title":41,"body":161,"description":511,"extension":512,"links":513,"meta":514,"navigation":515,"path":42,"seo":516,"stem":43,"__hash__":518},"docs\u002F1.getting-started\u002F8.migrating-to-v4.md",{"type":162,"value":163,"toc":499},"minimark",[164,168,173,181,192,199,206,224,231,272,279,298,313,317,324,380,386,393,422,426,449,464,471,480,484,495],[165,166,167],"p",{},"Version 4 supports Nuxt 4.1 and newer only. The internals are simpler, and the API has one return type.",[169,170,172],"h2",{"id":171},"nuxt-41-or-newer","Nuxt 4.1 or newer",[165,174,175,176,180],{},"The module requires ",[177,178,179],"code",{},"nuxt >= 4.1.0",". Upgrade Nuxt before you upgrade the module.",[165,182,183,184,187,188,191],{},"With an older version, your package manager reports a peer dependency conflict on install. If the module is installed anyway, Nuxt disables it and logs ",[177,185,186],{},"Module nuxt-email-renderer is disabled due to incompatibility issues"," at startup. Errors such as ",[177,189,190],{},"renderEmailComponent is not defined"," follow from that.",[165,193,194,195,198],{},"Nuxt 5 and its experimental Nitro Vite environment (",[177,196,197],{},"experimental.nitroViteEnvironment",") are not supported in v4. Stay on v3 if you depend on them; a later major release will target Nuxt 5.",[169,200,202,205],{"id":201},"renderemailcomponent-always-returns-an-object",[177,203,204],{},"renderEmailComponent"," always returns an object",[165,207,208,209,211,212,215,216,219,220,223],{},"In v3, ",[177,210,204],{}," returned a string, or ",[177,213,214],{},"{ html, subject }"," when the template used ",[177,217,218],{},"\u003CESubject>",". With ",[177,221,222],{},"plainText: true",", the plain text replaced the HTML.",[165,225,226,227,230],{},"In v4 it always returns ",[177,228,229],{},"{ html, text?, subject? }",":",[232,233,239],"pre",{"className":234,"code":235,"filename":236,"language":237,"meta":238,"style":238},"language-diff shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","- const result = await renderEmailComponent('Welcome', props)\n- const html = typeof result === 'string' ? result : result.html\n+ const { html, subject } = await renderEmailComponent('Welcome', props)\n","server\u002Fapi\u002Fsend-email.post.ts","diff","",[177,240,241,254,262],{"__ignoreMap":238},[242,243,246,250],"span",{"class":244,"line":245},"line",1,[242,247,249],{"class":248},"sMK4o","-",[242,251,253],{"class":252},"swJcz"," const result = await renderEmailComponent('Welcome', props)\n",[242,255,257,259],{"class":244,"line":256},2,[242,258,249],{"class":248},[242,260,261],{"class":252}," const html = typeof result === 'string' ? result : result.html\n",[242,263,265,268],{"class":244,"line":264},3,[242,266,267],{"class":248},"+",[242,269,271],{"class":270},"sfazB"," const { html, subject } = await renderEmailComponent('Welcome', props)\n",[165,273,274,275,278],{},"Plain text is now returned as ",[177,276,277],{},"text",", next to the HTML:",[232,280,282],{"className":234,"code":281,"language":237,"meta":238,"style":238},"- const text = await renderEmailComponent('Welcome', props, { plainText: true })\n+ const { html, text } = await renderEmailComponent('Welcome', props, { plainText: true })\n",[177,283,284,291],{"__ignoreMap":238},[242,285,286,288],{"class":244,"line":245},[242,287,249],{"class":248},[242,289,290],{"class":252}," const text = await renderEmailComponent('Welcome', props, { plainText: true })\n",[242,292,293,295],{"class":244,"line":256},[242,294,267],{"class":248},[242,296,297],{"class":270}," const { html, text } = await renderEmailComponent('Welcome', props, { plainText: true })\n",[165,299,300,301,304,305,308,309,312],{},"The ",[177,302,303],{},"RenderResult"," and ",[177,306,307],{},"RenderOptions"," types are exported from ",[177,310,311],{},"nuxt-email-renderer",".",[169,314,316],{"id":315},"devtools-endpoints-moved","DevTools endpoints moved",[165,318,319,320,323],{},"The dev-only endpoints used by the DevTools tab moved under the module's own prefix, so they no longer collide with your ",[177,321,322],{},"\u002Fapi\u002Femails"," routes:",[325,326,327,340],"table",{},[328,329,330],"thead",{},[331,332,333,337],"tr",{},[334,335,336],"th",{},"v3",[334,338,339],{},"v4",[341,342,343,356,368],"tbody",{},[331,344,345,351],{},[346,347,348],"td",{},[177,349,350],{},"GET \u002Fapi\u002Femails",[346,352,353],{},[177,354,355],{},"GET \u002F__nuxt-email-renderer\u002Fapi\u002Ftemplates",[331,357,358,363],{},[346,359,360],{},[177,361,362],{},"POST \u002Fapi\u002Femails\u002Frender",[346,364,365],{},[177,366,367],{},"POST \u002F__nuxt-email-renderer\u002Fapi\u002Frender",[331,369,370,375],{},[346,371,372],{},[177,373,374],{},"POST \u002Fapi\u002Femails\u002Fsource",[346,376,377],{},[177,378,379],{},"POST \u002F__nuxt-email-renderer\u002Fapi\u002Fsource",[165,381,300,382,385],{},[177,383,384],{},"nuxt-email-renderer:devtools:resolveProps"," hook works as before and is now typed in server code.",[169,387,389,390],{"id":388},"templates-directory-follows-srcdir","Templates directory follows ",[177,391,392],{},"srcDir",[165,394,395,396,399,400,403,404,406,407,410,411,413,414,417,418,421],{},"Without ",[177,397,398],{},"emailsDir",", the module looks for ",[177,401,402],{},"emails"," in each layer's ",[177,405,392],{}," (",[177,408,409],{},"app\u002Femails"," by default), then in the layer root. Projects with a custom ",[177,412,392],{}," such as ",[177,415,416],{},"src"," now get ",[177,419,420],{},"src\u002Femails"," detected automatically.",[169,423,425],{"id":424},"i18n-locale-files","i18n locale files",[165,427,428,429,432,433,436,437,440,441,444,445,448],{},"Locale files are read from ",[177,430,431],{},"\u003Clayer>\u002F\u003CrestructureDir>\u002F\u003ClangDir>"," only, which is where ",[177,434,435],{},"@nuxtjs\u002Fi18n"," v10 reads them (",[177,438,439],{},"i18n\u002Flocales"," by default). The fallback to ",[177,442,443],{},"\u003Clayer>\u002F\u003ClangDir>"," was removed. Set ",[177,446,447],{},"restructureDir: false"," if your locale files live in the layer root.",[165,450,451,452,455,456,459,460,463],{},"A ",[177,453,454],{},"vueI18n"," config wrapped in ",[177,457,458],{},"defineI18nConfig"," and placed in ",[177,461,462],{},"i18n\u002Fi18n.config.ts"," now works.",[169,465,467,470],{"id":466},"emarkdown-escapes-code",[177,468,469],{},"EMarkdown"," escapes code",[165,472,473,475,476,479],{},[177,474,469],{}," now uses marked 18. HTML inside fenced code blocks is escaped and shown as code, as in inline code. Before, it was inserted into the email as markup. Image ",[177,477,478],{},"alt"," texts contain the plain text of the Markdown alt text, without formatting characters.",[169,481,483],{"id":482},"typed-email-components","Typed email components",[165,485,486,487,490,491,494],{},"The built-in components are registered as global components with their real prop types instead of ",[177,488,489],{},"any",". ",[177,492,493],{},"vue-tsc"," may report prop errors in email templates that went unnoticed before.",[496,497,498],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":238,"searchDepth":256,"depth":256,"links":500},[501,502,504,505,507,508,510],{"id":171,"depth":256,"text":172},{"id":201,"depth":256,"text":503},"renderEmailComponent always returns an object",{"id":315,"depth":256,"text":316},{"id":388,"depth":256,"text":506},"Templates directory follows srcDir",{"id":424,"depth":256,"text":425},{"id":466,"depth":256,"text":509},"EMarkdown escapes code",{"id":482,"depth":256,"text":483},"Upgrade from Nuxt Email Renderer v3 to v4.","md",null,{},{"icon":44},{"description":517,"title":41},"Breaking changes and upgrade steps from Nuxt Email Renderer v3 to v4.","Qam2pIuKqgBSj4taEIQCb0WaMm31pSc8MwOhD5Dm7-c",[520,522],{"title":36,"path":37,"stem":38,"description":521,"icon":39,"children":-1},"Learn how to use internationalization in your email templates",{"title":52,"path":53,"stem":54,"description":523,"icon":55,"children":-1},"The main body element of your email.",1794206545063]