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