I am following the guidelines on the Version you are using as a dependency, unsuccessfully.

As stated inside the docs, i set up the following:
const messages = { en: { message: { hello: '{msg} world' } } }

An try to render it inside the template like this:
<e-text> {{ $t("message.hello", { msg: "hello" }) }} </e-text>

Only the "world" gets rendered. 🤨 Any ideas on whats going on here?

btw: Inside the vue-email docs you are linking to Version 8 of vue-18n but if I read your dependencies right, you are using Version 9.
"vue-i18n": "^9.9.0"

hi,

i am setting it up like here https://www.vuemail.net/getting-started/ssr , i have three templates all of them are compiling while i just want to wok on one "WelcomeEmail" ? here is the output when i set verbose true .

💌 Generating output
🚧 Compiling TailwindEmail file
🚧 Compiling VerifyEmail file
🚧 Compiling WelcomeEmail file
🌎 Injecting translations
🎉 Rendering template WelcomeEmail

this is my config

const vueEmail = config("./templates", {
  verbose: true,
  
})

Following vue-email/vue-email#64

I'm getting an error [Vue warn]: Failed to resolve component: as soon as I use props inside the template, like this:

<template>
  <Layout title="Title">
    <div>test</div>
  </Layout>
</template>

I could create a small reproduction of the issue: https://stackblitz.com/edit/stackblitz-starters-bqsmkk?file=index.ts,templates%2FLayout.vue,templates%2FMain.vue (run ts-node index to log the error).

Removing title="Title" fixes it.

Any idea why this happens?

Thanks for this package!

Edit: looks like provide/inject works though, so I will rely on this as a temporary workaround

Hi,

I just tried to update the compiler package from v0.8.7 to v0.8.8 but unfortunately when running my NestJS server I get the following error for the (newly added?) shikiji dependency.

.../node_modules/vue-email/dist/index.cjs:7
const shikiji = require('shikiji');
                ^
Error [ERR_REQUIRE_ESM]: require() of ES Module .../node_modules/vue-email/node_modules/shikiji/dist/index.mjs not supported.
Instead change the require of .../node_modules/vue-email/node_modules/shikiji/dist/index.mjs to a dynamic import() which is available in all CommonJS modules.

Seems like that package is unfortunately not fully CommonJS compatible which I think is unfortunately still mandatory for the use with NestJS.

I just downgraded to v0.8.7 again which works fine again as a 'workaround' for now. But it would be nice if future version could still support CommonJS as NestJS unfortunately hasn't upgraded to ESM yet.

Hi,

I just tried to use the vue-email compiler (v0.8.7) in a node (v20) server environment but I unfortunately came across a little hurdle with the props of a vue component.

In my vue component I'm importing the props interface from an 'external' file because I also need the same interface in some other places.

Unfortunately this leads to the following error:

Error loading component Error: [@vue/compiler-sfc] No fs option provided to `compileScript` in non-Node environment. File system access is required for resolving imported types.

MyTemplate
76 |  import { MyProps } from '../types';
77 |  
78 |  const props = withDefaults(defineProps<MyProps>(), {
   |                                         ^^^^^^^^^
...
    at ScriptCompileContext.error (.../node_modules/@vue-email/compiler/dist/index.cjs:47006:11)
    at importSourceToScope (.../node_modules/@vue-email/compiler/dist/index.cjs:47568:16)
    at resolveTypeFromImport (.../node_modules/@vue-email/compiler/dist/index.cjs:47562:23)
    at innerResolveTypeReference (.../node_modules/@vue-email/compiler/dist/index.cjs:47472:14)
    at resolveTypeReference (.../node_modules/@vue-email/compiler/dist/index.cjs:47461:36)
    at innerResolveTypeElements (.../node_modules/@vue-email/compiler/dist/index.cjs:47116:24)
    at resolveTypeElements (.../node_modules/@vue-email/compiler/dist/index.cjs:47073:35)
    at resolveRuntimePropsFromType (.../node_modules/@vue-email/compiler/dist/index.cjs:48398:20)
    at genRuntimePropsFromTypes (.../node_modules/@vue-email/compiler/dist/index.cjs:48374:17)
    at genRuntimeProps (.../node_modules/@vue-email/compiler/dist/index.cjs:48364:18)

Is there any way to enable the respective option in order to be able to import prop types?

When using a Component like this: <Header /> it can't be imported.

I believe it is because of the Regex for finding Components:

A Regex Pattern like this might fix the issue: https://regex101.com/r/XUPZyE/1

Hey,

I just tried something like this:

<EText>{{ $t('email.verify.greeting', { username: 'abc' }) }}</EText>

And the greeting message is something like Hi, {username}, and I expect the result would be Hi, abc, but I can only get Hi, .
It seems the $t with named parameters is not work in vue template?

I may be missing something but it seems to be impossible to use composables with SSR rendering.

Trying to import anything that is in the project doesn't work. Is there something I'm missing?

Hey team,

I'm using "nodemailer": "^6.9.9" , "@vue-email/compiler": "^0.8.10", and nestjs latest version. I got an issue when start dev, could you guys help me !!

[email protected] start
nest start

/Users/Work/Sources/goody/server/node_modules/vue-email/dist/index.cjs:7
const shiki = require('shiki');
              ^
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/Work/Sources/goody/server/node_modules/shiki/dist/index.mjs not supported.
Instead change the require of /Users/Work/Sources/goody/server/node_modules/shiki/dist/index.mjs to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/Work/Sources/goody/server/node_modules/vue-email/dist/index.cjs:7:15)

hi,
this is in reference to this page https://www.vuemail.net/getting-started/ssr , the page shows how to render an email to html, how can we render it as plain text. i tried like this but i am still getting html?

const emailText = await vueEmail.render(
  emailTemplate,
  {
    props: data,
  },
  {
    plainText: true,
  },
)

Hi there,

We're using MJML at the moment, in the process to migrate to vue-email. As MJML tags are unknown to Vue (they are processed by MJML after Vue compilation), it warns like this for every tag which makes the logs barely usable:

  console.warn
    [Vue warn]: Failed to resolve component: mjml
    If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

We used to ignore those with:

app.config.compilerOptions.isCustomElement = (tag) => tag === 'mjml' || tag.startsWith('mj-');

Would it be possible to access the app or set the config somehow?

Thanks.

PS. Docs for MJML: https://documentation.mjml.io/

The bundle has inlined the @vue/compiler-sfc, @vue/server-renderer and vue-i18n packages, resulting in an astonishing size of 1.72MB. Is there a specific purpose for it?

I'm not sure if this is something that works right now, but I'm having trouble getting a component to import other components when using the ssr compiler.
For reference, this is the structure of the code I'm working with in a minimal environment:

index.js is just this:

import { config } from "@vue-email/compiler";
const vueEmail = config("./components", {
    verbose: false,
    options: {
        // baseUrl: "https://vue-email-demo.vercel.app/",
    },
});

const html = vueEmail.render("Email.vue").then(console.log);

The setup for Email.vue looks like this:

<script setup>
import { EHtml, EHead, EBody, ETailwind } from 'vue-email';
import EApiTestWorkflowTwoTemplate from "@/components/EApiTestWorkflowTwoTemplate.vue";
</script>

Running this results in Error: Cannot find module '@/components/EApiTestWorkflowTwoTemplate.vue'.

Before trying to do this with SSR, I wanted to prove out this template within a live Vue app and I didn't have any issues like this, but the needs for our project require the SSR utility to produce the rendered html string. Is this possible right now? Am I just not understanding correctly how SSR needs imports to be defined?

This is using "^0.8.0-beta.4".

When using any special characters in the 0.8.0 beta
I get the following Error:

Error loading component [TypeError: invalid utf-8 sequence of 1 bytes from index 3143] {
  code: "ERR_MODULE_NOT_FOUND"
}