Please state clearly (docs) whether vue-email can be used standalone or just inside a vue app

[juni0r]

There's a related open issue about importing Vue SFCs in typescript which apparently isn't a trivial thing to do. I think this is a very crucial point that deserves more attention and needs - if not a solution - at least better communication on your part.

Please make it abundantly clear in the documentation whether vue-email can be used as a standalone node package to render email templates. If there is additional setup or special runtime environment required to make this work, please provide some instructions on how to set this up or state it clear that there is no point in even trying.

I think vue-email is perceived as a library similar to MJML which runs completely standalone and you can render email templates from node without any further setup or dealing with the intricacies of React components.

Note that the code in the usage section of the docs simply doesn't work. If you set this up precisely as described there you'll get:

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".vue" for ./MyTemplate.vue

I just need to know whether this is possible or not, because then I simply can't use vue-email which is sad, but at least I know that I need to find a different solution.

Thanks!

[juni0r]

So I eventually found a way that involves running scripts that need to import Vue SFCs with vite-node.

In a Nuxt app, I added a separate vite.config.ts in the subfolder scripts:

📄 scripts/vite.config.ts

import vue from '@vitejs/plugin-vue'
import tsconfigPaths from 'vite-tsconfig-paths'

export default {
  plugins: [vue(), tsconfigPaths()],
}

It uses @vitejs/plugin-vue to support loading of SFCs and vite-tsconfig-paths to use the path aliases from Nuxt (such as ~/server or #imports). In order for that to work properly however I had to explicitely set baseUrl in tsconfig.ts

📄 tsconfig.ts

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "baseUrl": "./.nuxt/"
  }
}

NOTE: Some people have reported that adding this line to tsconfig.ts breaks their app. I did not experience this, so you have to see if it works for you.

Then I use this to run my scripts, such as

$> vite-node --config scripts/vite.config.ts scripts/worker.ts

I still believe you should look into this and perhaps find a way to have vue-email run standalone out of the box, because it makes the package so incredibly more useful.

[MickL]

Hey, you can use vue-mail in every environment since it is using Vue's createSSRApp() and then renders a string with renderToString(app).

How to do it with Nuxt or Nitro or Vite is shown in the docs here: https://vuemail.net/getting-started/nuxt-nitro

As you mentioned already, you have to be able to import Vue files. In Vite currently Rollup is used (soon Rolldown!) so you need to add a Rollup Plugin, in this case @vitejs/plugin-vue.

Should this still be documented better? If yes, it could be explicitly noted that it works in any backend with a link to Nuxt / Nitro page for Vite projects. Are you willing to make a PR maybe?

[juni0r]

Frankly, at this point I don't care anymore since we've given up on vue-email entirely for being a notoriously problematic package with little to no support from the authors/community.

We use MJML now and never looked back.

Sorry to say this. We would have loved to stay within the Vue ecosystem and we invested quite a lot to make it work, but it just didn't pay off.

[MickL]

I agree that this project seems to be abandoned by the maintainer atm but otherwise you already got it. You just were not able to import a Vue file and that is a common problem not related to vue-email BUT it was described in the Nuxt/Nitro page :)

MJML looks interesting, thanks for the recommendation! Does it support Tailwind?

[juni0r]

It seemed for a while that I had got it, but then there were issues with importing types, nested components, Tailwind classes and config, and many more.

No, MJML doesn't support Tailwind, but it's very modular and supports reuse with partials and layouts. It's very well designed and battle tested. There's some duplication with our Tailwind config, such as colors, but that's nothing in comparison to the constant headaches caused by vue-email. There was some effort in migration, but it was well worth it.