vite-plugin-mjml

0.4.0 verified Mon Apr 27 auth: no javascript

Vite plugin that compiles MJML templates to HTML (or other extension) files during dev and build. Version 0.4.0 is current, released 2024-01. Uses the popular mjml Node.js library under the hood. Key differentiator: integrates MJML compilation directly into Vite's pipeline, watches for changes in dev, and outputs to a configurable directory with custom extension (e.g., .blade.php). Alternatives require manual compilation or separate build steps. Release cadence: infrequent, last two versions were bug fixes.

Common errors

error Error: Cannot find module 'mjml' ↓

cause Missing runtime dependency mjml

fix

npm install mjml --save-dev

error Error: The 'input' directory must be a string ↓

cause Provided non-string to input option (e.g., array)

fix

Pass a single string path to the 'input' option.

Warnings

breaking v0.3.0 upgraded to Vite 3; plugins for Vite 2 are incompatible. ↓

fix Upgrade to vite-plugin-mjml@^0.3.0 and use Vite ^3.0.

deprecated The 'log' option may be deprecated in future; undocumented changes. ↓

fix Rely on Vite's own logging for now.

gotcha MJML compilation is slow; large mail folders may impact Vite startup time. ↓

fix Be selective with input glob patterns or use exclude option since v0.4.0.

Install

npm install vite-plugin-mjml

yarn add vite-plugin-mjml

pnpm add vite-plugin-mjml

Imports

mjml
wrong
```
const mjml = require('vite-plugin-mjml')
```
correct
```
import mjml from 'vite-plugin-mjml'
```
Default export; CJS require works in Node < 22 but ESM is recommended
default export
wrong
```
import { mjml } from 'vite-plugin-mjml'
```
correct
```
import mjmlPlugin from 'vite-plugin-mjml'
```
The package uses a default export, not named export. Common mistake.

Quickstart

Shows how to add the plugin to a Vite config with MJML input/output paths and custom output extension.

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

export default defineConfig({
	plugins: [
		vue(),
		mjml({
			input: 'resources/mail',
			output: 'resources/views/emails',
			extension: '.blade.php',
		}),
	],
})