> ## Documentation Index
> Fetch the complete documentation index at: https://vuemail.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Compiling emails with Vite
> How Vuemail compiles your emails, and how to compile them in your own code
To preview, build, and export your emails, the Vuemail CLI compiles them with [Vite](https://vite.dev) and
[`@vitejs/plugin-vue`](https://github.com/vitejs/vite-plugin-vue), loading every email through Vite's
server-side module loader. There's nothing to configure: it works with the files you already have.
## What's supported
* **Single file components**, including `
{{ messages.welcome }}
```
## 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`](https://vuemail.dev/docs/guides/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
Node.js can't import `.vue` files on its own, so the code that renders your emails with [`render`](https://vuemail.dev/docs/utilities/render)
has to be compiled with a Vue plugin too. Keep the URLs of images as they are, like the CLI does, by
turning off `transformAssetUrls`.
**Nuxt**
Add the `@vuemaildev/nuxt` module, and import emails from your server routes. See [Nuxt](https://vuemail.dev/docs/getting-started/nuxt.md).
```ts nuxt.config.ts theme={null}
export default defineNuxtConfig({
modules: ['@vuemaildev/nuxt'],
});
```
**Vite**
Build the code that sends your emails for the server with Vite and `@vitejs/plugin-vue`:
```ts vite.config.ts theme={null}
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',
},
});
```
`vite build` outputs `dist/send-welcome-email.js`, which runs with Node.js.
**tsdown**
Bundle the code that sends your emails with [tsdown](https://tsdown.dev) and `unplugin-vue`:
```ts tsdown.config.ts theme={null}
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 } })],
});
```
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.