innocenzi / vite-plugin-mjml

Vite plugin to add MJML compilation to your build pipeline

MJML plugin for Vite

 

A plugin for compiling mjml files in your Vite pipeline.

npm i -D vite-plugin-mjml

 

Usage

Install vite-plugin-mjml and add it to your Vite configuration:

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

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

When running vite dev, all .mjml files in your input directory will be compiled to output when saved. Similarly, when building for production, all files in input will be compiled as well.

For instance, resources/mail/onboarding/welcome.mjml would be written to resources/views/emails/onboarding/welcome.blade.php.

 

Options

Option	Type	Description	Default
input	string	Path to the directory in which .mjml files are stored	resources/mail
output	string	Path to the directory in which compiled files will be written	resources/views/emails
extension	string	Extension that will be used by compiled .mjml files	.blade.php
mjml	MJMLParsingOptions	Specific MJML compiler options	{}
watch	boolean	Whether to watch and compile on the fly in development mode	true
log	boolean	Whether to print output in the console	true

·

_{Built with ❤︎ by Enzo Innocenzi}