Compiling emails with Vite

​

What’s supported

• Single file components, including <script setup lang="ts">
• TypeScript, in .vue files and in the modules they import
• Path aliases from the paths of your tsconfig.json, like "@/*": ["./*"]
• JSON imports, like import messages from '../messages/en.json'
• Raw imports, with the ?raw suffix, like import theme from './theme.css?raw', which is how you can keep the CSS for the theme prop of Tailwind in a .css file. Not every bundler supports ?raw though: for emails your Nuxt server routes import too, keep that CSS in a string exported from a .ts file instead, as in the Nuxt guide
• Dependencies, from node_modules or from other packages of your workspace
• Static files: image URLs in templates, like <Img src="/static/logo.png" />, stay URLs instead of becoming module imports, so the preview can serve them from emails/static

<script setup lang="ts">
import { Body, Html, Tailwind, Text } from '@vuemaildev/vuemail';
import Footer from '@/emails/_components/footer.vue';
import messages from '../messages/en.json';
import theme from './theme.css?raw';
</script>

<template>
  <Html>
    <Tailwind :theme="theme">
      <Body>
        <Text class="text-brand">{{ messages.welcome }}</Text>
        <Footer />
      </Body>
    </Tailwind>
  </Html>
</template>

​

What’s not supported

• Your Vite configuration: the CLI doesn’t load vite.config.ts, so plugins you add there don’t apply to your emails. Pass the plugins your emails need with --vite-plugins instead.
• .env files: they aren’t loaded either. process.env has the environment variables of the process running the CLI, set by your shell or your tooling.

​

Compiling emails in your own code

export default defineNuxtConfig({
  modules: ['@vuemaildev/nuxt'],
});

import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [vue({ template: { transformAssetUrls: false } })],
  build: {
    ssr: 'src/send-welcome-email.ts',
  },
});

import { defineConfig } from 'tsdown';
import vue from 'unplugin-vue/rolldown';

export default defineConfig({
  entry: ['src/send-welcome-email.ts'],
  platform: 'node',
  plugins: [vue({ template: { transformAssetUrls: false } })],
});