{"id":22741,"library":"vite-plugin-mjml","title":"vite-plugin-mjml","description":"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.","status":"active","version":"0.4.0","language":"javascript","source_language":"en","source_url":"https://github.com/innocenzi/vite-plugin-mjml","tags":["javascript","typescript"],"install":[{"cmd":"npm install vite-plugin-mjml","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-mjml","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-mjml","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency for compiling MJML to HTML","package":"mjml","optional":false}],"imports":[{"note":"Default export; CJS require works in Node < 22 but ESM is recommended","wrong":"const mjml = require('vite-plugin-mjml')","symbol":"mjml","correct":"import mjml from 'vite-plugin-mjml'"},{"note":"The package uses a default export, not named export. Common mistake.","wrong":"import { mjml } from 'vite-plugin-mjml'","symbol":"default export","correct":"import mjmlPlugin from 'vite-plugin-mjml'"}],"quickstart":{"code":"import { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\nimport mjml from 'vite-plugin-mjml'\n\nexport default defineConfig({\n\tplugins: [\n\t\tvue(),\n\t\tmjml({\n\t\t\tinput: 'resources/mail',\n\t\t\toutput: 'resources/views/emails',\n\t\t\textension: '.blade.php',\n\t\t}),\n\t],\n})","lang":"typescript","description":"Shows how to add the plugin to a Vite config with MJML input/output paths and custom output extension."},"warnings":[{"fix":"Upgrade to vite-plugin-mjml@^0.3.0 and use Vite ^3.0.","message":"v0.3.0 upgraded to Vite 3; plugins for Vite 2 are incompatible.","severity":"breaking","affected_versions":"<0.3.0"},{"fix":"Rely on Vite's own logging for now.","message":"The 'log' option may be deprecated in future; undocumented changes.","severity":"deprecated","affected_versions":">=0.0.0"},{"fix":"Be selective with input glob patterns or use exclude option since v0.4.0.","message":"MJML compilation is slow; large mail folders may impact Vite startup time.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"npm install mjml --save-dev","cause":"Missing runtime dependency mjml","error":"Error: Cannot find module 'mjml'"},{"fix":"Pass a single string path to the 'input' option.","cause":"Provided non-string to input option (e.g., array)","error":"Error: The 'input' directory must be a string"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}