nuxt-generation-emails 1.0.0 → 1.0.2

package/README.md

@@ -133,16 +133,8 @@ Every email is a pair of files:
 
 ```vue
 <script setup lang="ts">
-import { computed } from 'vue'
-import mjml2html from 'mjml-browser'
-import Handlebars from 'handlebars'
-import mjmlSource from './example.mjml?raw'
-
 defineOptions({ name: 'ExampleNge' })
 
-// Auto-imported: registers all .mjml files from components/ as Handlebars partials
-registerMjmlComponents()
-
 interface ContentSection {
   heading: string
   body: string
@@ -163,27 +155,13 @@ const props = withDefaults(defineProps<{
   ],
 })
 
-const compiledTemplate = Handlebars.compile(mjmlSource)
-
-const renderedHtml = computed(() => {
-  try {
-    const mjmlString = compiledTemplate({ ...props })
-    return mjml2html(mjmlString).html
-  }
-  catch (e: unknown) {
-    return `<pre style="color:red;">${e instanceof Error ? e.message : String(e)}</pre>`
-  }
-})
+useNgeTemplate('example', props)
 </script>
-
-<template>
-  <div v-html="renderedHtml" />
-</template>
 ```
 
 ### Key architecture rules
 
-1. **Every Handlebars variable must be a direct prop** — No computed values or transformations. The server-side API route calls `compiledTemplate({ ...templateData })` with the raw POST body, so if a variable isn't a prop, it won't render when sending.
+1. **Every Handlebars variable must be a direct prop** — No computed values or transformations. The server-side API route passes `templateData` straight to the Handlebars template, so if a variable isn't a prop, it won't render when sending.
 2. **Use `withDefaults(defineProps<{...}>())`** — Props and defaults are extracted at build time for the preview UI, API docs, and OpenAPI metadata.
 3. **Make all props optional** (`?:`) — Defaults provide sensible preview values.
 
@@ -241,7 +219,9 @@ Components have access to all the props passed to the parent template — Handle
 
 ### Client-side registration
 
-Call `registerMjmlComponents()` in your Vue SFC to register components for the preview UI. This is auto-imported by the module — no import needed:
+`useNgeTemplate()` automatically registers all components on first call — no manual setup needed.
+
+If you need to register components separately (e.g. in a custom composable), `registerMjmlComponents()` is also auto-imported:
 
 ```ts
 registerMjmlComponents()
@@ -411,7 +391,8 @@ export default defineNuxtConfig({
 
 | Function | Description |
 |----------|-------------|
-| `registerMjmlComponents()` | Registers all `.mjml` files from `components/` as Handlebars partials |
+| `useNgeTemplate(name, props)` | Loads the MJML template, compiles with Handlebars, registers components, and sets the render function — no `<template>` block needed |
+| `registerMjmlComponents()` | Manually registers all `.mjml` files from `components/` as Handlebars partials (called automatically by `useNgeTemplate`) |
 | `encodeStoreToUrlParams(store)` | Encode a props object into URL search parameters |
 | `generateShareableUrl(store)` | Generate a shareable URL with encoded props |
 

package/dist/cli/index.mjs

@@ -5,30 +5,14 @@ import { existsSync, mkdirSync, writeFileSync, readdirSync, statSync } from 'nod
 import { consola } from 'consola';
 import { loadNuxtConfig } from '@nuxt/kit';
 
-function generateVueTemplate(emailName) {
+function generateVueTemplate(emailName, emailRelativePath) {
   const capitalizedEmailName = emailName.charAt(0).toUpperCase() + emailName.slice(1);
   const componentName = `${capitalizedEmailName}Nge`;
+  const templatePath = emailRelativePath ?? emailName;
   const scriptClose = "<\/script>";
-  const templateOpen = "<template>";
-  const templateClose = "</template>";
   return `<script setup lang="ts">
-import { computed } from 'vue'
-import mjml2html from 'mjml-browser'
-import Handlebars from 'handlebars'
-import mjmlSource from './${emailName}.mjml?raw'
-
 defineOptions({ name: '${componentName}' })
 
-/**
- * MJML Components (reusable MJML snippets)
- * Place .mjml files in emails/components/ and they are auto-registered
- * as Handlebars partials on the server side.
- *
- * For client-side preview, uncomment the line below to register them here too.
- * Then use {{> componentName}} in your .mjml template.
- */
-// registerMjmlComponents()
-
 /**
  * Define interfaces for complex prop types here.
  * Every Handlebars variable in the .mjml template must map to a prop
@@ -60,28 +44,13 @@ const props = withDefaults(defineProps<{
   ],
 })
 
-const compiledTemplate = Handlebars.compile(mjmlSource)
-
-const renderedHtml = computed(() => {
-  try {
-    const mjmlString = compiledTemplate({ ...props })
-    const result = mjml2html(mjmlString)
-    return result.html
-  }
-  catch (e: unknown) {
-    console.error('[${emailName}.vue] Error rendering MJML:', e)
-    return \`<pre style="color:red;">\${
-      e instanceof Error ? e.message : String(e)
-    }\\n\${
-      e instanceof Error ? e.stack : ''
-    }</pre>\`
-  }
-})
+/**
+ * useNgeTemplate auto-loads the sibling .mjml file, compiles it with
+ * Handlebars, and returns a reactive ComputedRef<string> of rendered HTML.
+ * MJML components from components/ are registered automatically.
+ */
+useNgeTemplate('${templatePath}', props)
 ${scriptClose}
-
-${templateOpen}
-  <div v-html="renderedHtml" />
-${templateClose}
 `;
 }
 
@@ -231,7 +200,7 @@ function createEmailFiles(targetDir, emailName, emailPath) {
   const mjmlFile = join(targetDir, `${emailName}.mjml`);
   checkFileExists(vueFile);
   checkFileExists(mjmlFile);
-  const vueTemplate = generateVueTemplate(emailName);
+  const vueTemplate = generateVueTemplate(emailName, emailPath);
   const mjmlTemplate = generateMjmlTemplate(emailName);
   writeFileSync(vueFile, vueTemplate, "utf-8");
   consola.success(`Created email template: ${vueFile}`);
@@ -379,20 +348,9 @@ function exampleMjml() {
 }
 function exampleVue() {
   const scriptClose = "<\/script>";
-  const templateOpen = "<template>";
-  const templateClose = "</template>";
-  const bt = "`";
-  const ds = "$";
   return `<script setup lang="ts">
-import { computed } from 'vue'
-import mjml2html from 'mjml-browser'
-import Handlebars from 'handlebars'
-import mjmlSource from './example.mjml?raw'
-
 defineOptions({ name: 'ExampleNge' })
 
-registerMjmlComponents()
-
 interface ContentSection {
   heading: string
   body: string
@@ -422,24 +380,8 @@ const props = withDefaults(defineProps<{
   ],
 })
 
-const compiledTemplate = Handlebars.compile(mjmlSource)
-
-const renderedHtml = computed(() => {
-  try {
-    const mjmlString = compiledTemplate({ ...props })
-    const result = mjml2html(mjmlString)
-    return result.html
-  }
-  catch (e: unknown) {
-    console.error('[example.vue] Error rendering MJML:', e)
-    return ${bt}<pre style="color:red;">${ds}{e instanceof Error ? e.message : String(e)}\\n${ds}{e instanceof Error ? e.stack : ''}</pre>${bt}
-  }
-})
+useNgeTemplate('example', props)
 ${scriptClose}
-
-${templateOpen}
-  <div v-html="renderedHtml" />
-${templateClose}
 `;
 }
 const setupCommand = defineCommand({

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=4.0.0"
   },
-  "version": "1.0.0",
+  "version": "1.0.2",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -597,6 +597,82 @@ export function registerMjmlComponents(): void {
     Handlebars.registerPartial(name, source as string)
   }
 }
+`
+    });
+    const templateGlobPath = `~/${configuredEmailDir}`;
+    addTemplate({
+      filename: "nge/use-template.ts",
+      write: true,
+      getContents: () => `import { computed, h, getCurrentInstance } from 'vue'
+import type { ComputedRef } from 'vue'
+import mjml2html from 'mjml-browser'
+import Handlebars from 'handlebars'
+import { registerMjmlComponents } from './register-components'
+
+const mjmlTemplates: Record<string, string> = import.meta.glob(
+  ['${templateGlobPath}/**/*.mjml', '!${templateGlobPath}/components/**'],
+  { query: '?raw', import: 'default', eager: true }
+) as Record<string, string>
+
+// Build a lookup map: 'example' | 'v1/test' | 'v1/rmi/bid' \u2192 raw MJML source
+const templateMap: Record<string, string> = {}
+for (const [path, source] of Object.entries(mjmlTemplates)) {
+  const segments = path.split('/')
+  const dirIdx = segments.lastIndexOf('${configuredEmailDir}')
+  const relativeParts = dirIdx >= 0 ? segments.slice(dirIdx + 1) : [segments[segments.length - 1]]
+  const name = relativeParts.join('/').replace('.mjml', '')
+  templateMap[name] = source
+}
+
+let _componentsRegistered = false
+
+/**
+ * Load and render an MJML email template by name.
+ * Registers MJML components (Handlebars partials) automatically on first call.
+ * Sets the component's render function so no <template> block is needed.
+ *
+ * @param name - Template name relative to the emails directory (e.g. 'example', 'v1/test')
+ * @param props - Reactive props object from defineProps
+ * @returns ComputedRef<string> containing the rendered HTML
+ */
+export function useNgeTemplate(name: string, props: Record<string, unknown>): ComputedRef<string> {
+  if (!_componentsRegistered) {
+    registerMjmlComponents()
+    _componentsRegistered = true
+  }
+
+  const source = templateMap[name]
+  if (!source) {
+    const available = Object.keys(templateMap).join(', ')
+    console.error(\`[nuxt-gen-emails] Template "\${name}" not found. Available: \${available}\`)
+    const fallback = computed(() => \`<pre style="color:red;">Template "\${name}" not found</pre>\`)
+    const instance = getCurrentInstance()
+    if (instance) instance.render = () => h('div', { innerHTML: fallback.value })
+    return fallback
+  }
+
+  const compiled = Handlebars.compile(source)
+
+  const renderedHtml = computed(() => {
+    try {
+      const mjmlString = compiled({ ...props })
+      const result = mjml2html(mjmlString)
+      return result.html
+    }
+    catch (e: unknown) {
+      console.error(\`[\${name}] Error rendering MJML:\`, e)
+      return \`<pre style="color:red;">\${e instanceof Error ? e.message : String(e)}\\n\${e instanceof Error ? e.stack : ''}</pre>\`
+    }
+  })
+
+  // Set render function on the component instance so no <template> block is needed
+  const instance = getCurrentInstance()
+  if (instance) {
+    instance.render = () => h('div', { innerHTML: renderedHtml.value })
+  }
+
+  return renderedHtml
+}
 `
     });
     nuxt.options.runtimeConfig.nuxtGenEmails = {
@@ -614,6 +690,10 @@ export function registerMjmlComponents(): void {
       {
         name: "registerMjmlComponents",
         from: join(nuxt.options.buildDir, "nge/register-components")
+      },
+      {
+        name: "useNgeTemplate",
+        from: join(nuxt.options.buildDir, "nge/use-template")
       }
     ]);
     addServerImports([

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-generation-emails",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "A Nuxt module for authoring, previewing, and sending transactional email templates with MJML and Handlebars.",
   "author": "nullcarry@icloud.com",
   "repository": {
@@ -63,8 +63,8 @@
   },
   "dependencies": {
     "@nuxt/kit": "^4.3.1",
-    "citty": "^0.1.6",
-    "consola": "^3.4.0",
+    "citty": "^0.2.1",
+    "consola": "^3.4.2",
     "handlebars": "^4.7.8",
     "mjml": "^4.18.0",
     "mjml-browser": "^4.18.0",
@@ -75,8 +75,7 @@
     "vue": "^3.5.0"
   },
   "devDependencies": {
-    "@nuxt/devtools": "^3.1.1",
-    "@nuxt/eslint-config": "^1.14.0",
+    "@nuxt/eslint-config": "^1.15.2",
     "@nuxt/module-builder": "^1.0.2",
     "@nuxt/schema": "^4.3.1",
     "@nuxt/test-utils": "^4.0.0",
@@ -84,11 +83,10 @@
     "@types/mjml-browser": "^4.15.0",
     "@types/node": "latest",
     "changelogen": "^0.6.2",
-    "eslint": "^10.0.0",
-    "nuxt": "^4.3.1",
-    "tailwindcss": "^4.1.18",
+    "eslint": "^10.0.2",
+    "nuxt": "^4.1.3",
     "typescript": "~5.9.3",
     "vitest": "^4.0.18",
-    "vue-tsc": "^3.2.4"
+    "vue-tsc": "^3.2.5"
   }
 }