MJML plugin for Vite

 

A plugin for compiling mjml files in your Vite pipeline.

npm i -D @webatvantage/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	src/mjml
views	string	Path to views directory in which .mjml files are recompiled when ng-includes are edited.	src/mjml/views
output	string	Path to the directory in which compiled files will be written	mailings
extension	string	Extension that will be used by compiled .mjml files	.html
exclude	`string	Exclude directories from saved as compiled .mjml files	[]
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}