Maizzle 6
It's finally here 🥳
Maizzle 6 is a complete framework rewrite.
It uses Vite for the build system and dev server, and it can even be used as a Vite plugin in your existing vite.config.js. We've moved to using Vue for templating - not only do you get a much better DX when coding emails, but the vast Vue ecosystem means you can do a lot more things, and LLMs will now be better at using Maizzle.
Given the above, this version is not backwards-compatible.
Features
- Vite build system and dev server
- Maizzle as a Vite plugin
- Vue templating with SFCs
- Tailwind CSS 4
- Revamped dev UI
Getting started
We're working on docs and upgrade/migration guides and some things might change in this beta period, for now you can rely on your IDEs autocomplete to show what's possible, like new components, config options etc.
There are a lot of breaking changes which we'll document as we rewrite the docs, but for now the best way to test it out is to create a new Maizzle project:
npx create-maizzle@latestChoose the "Maizzle 6 (beta)" starter when prompted.
Vite plugin
If you want to test Maizzle 6 as a Vite plugin in an existing project, install it first:
npm i @maizzle/framework@next @maizzle/tailwindcss... then, in your vite.config.js, add the plugin, for example:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'
import { maizzle } from '@maizzle/framework'
export default defineConfig({
plugins: [
// Host app's own plugins
vue(),
tailwindcss(),
maizzle({
content: ['./src/emails/**/*.vue'],
output: {
path: 'resources/views/emails',
extension: 'blade.php',
},
css: {
safe: true,
purge: true,
inline: true,
}
}),
],
})You'll see the Maizzle dev server running on localhost:3000.
Components
We now have built-in components, try one of the following after starting the dev server:
<Button><Spacer><Divider><Outlook><NotOutlook><NoWidows><Vml><WithUrl>
Composables
There are a few composables available to you in the <script> part of a template, like defineConfig() or useDoctype() or usePlaintext().