Installation

Maizzle works as a standalone project, as part of your monorepo setup, or as a Vite plugin in your existing app or in your favorite Vite-powered framework.

Add Maizzle as a plugin to your existing Vite project.

1. Install dependencies

Install the framework in your app:

npm install @maizzle/framework

2. Configure Vite

Add the Maizzle plugin to your Vite config, alongside your app's own plugins:

import { defineConfig } from 'vite'
import { maizzle } from '@maizzle/framework'

export default defineConfig({
  plugins: [
    // ...your app's plugins
    maizzle({
      content: ['src/emails/**/*.vue'],
      output: {
        path: 'build/emails',
      },
    }),
  ],
})

During development, Maizzle starts its own dev server alongside your app's. When you build, email templates are compiled together with the rest of your app.

If you're using TypeScript, add .maizzle/*.d.ts to your include paths for auto-imported component and composable type definitions:

{
  "include": ["src/**/*", ".maizzle/*.d.ts"]
}