Registry / web-framework / vite-plugin-mjml

vite-plugin-mjml

library0.4.0jsnpmunverified

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.

web-framework

npm install vite-plugin-mjml

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-MJML

vite-plugin-mjml

web-frameworkjavascriptv0.4.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

mjml

✓ import mjml from 'vite-plugin-mjml'

✗ const mjml = require('vite-plugin-mjml')

Default export; CJS require works in Node < 22 but ESM is recommended

default export

✓ import mjmlPlugin from 'vite-plugin-mjml'

✗ import { mjml } from 'vite-plugin-mjml'

The package uses a default export, not named export. Common mistake.

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', }), ], })

Debug

Known issues

breakingv0.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.

affects: <0.3.0

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

fix

Rely on Vite's own logging for now.

affects: >=0.0.0

gotchaMJML 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.

affects: >=0.0.0

Errors

Common errors & fixes

Error: Cannot find module 'mjml'

Missing runtime dependency mjml

fix

npm install mjml --save-dev

Error: The 'input' directory must be a string

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

fix

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

Upgrade

Version history

0.4.0latest on npm

Audit

Dependencies

mjmlrequiredRuntime dependency for compiling MJML to HTML

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/innocenzi/vite-plugin-mjml ↗

packagehttps://www.npmjs.com/package/vite-plugin-mjml ↗