Considering refactoring core to use Vue/Vite

[cossssmin]

I was testing a Vue/Vite-powered Maizzle today and am considering moving Maizzle to that setup just for the much better templating and build tools, not to mention project maturity, the community, the DX and all the opportunities it brings (browser support?).

First, I need to clarify that Maizzle will not go in the direction of Vue Email or React Email.

We will not switch to providing you with just opinionated components that dictate what your HTML structure looks like, and the parts that make Maizzle unique will still be there. You'll still be in full control.

All Transformers will work like today, config files, events system, Tailwind compilation - these will not change in how you use them. We'd very likely keep using PostHTML for Transformers, but I'd investigate other solutions too... maybe there is something else out there that makes more sense when used as a Rollup plugin, since that's what Vite uses.

Changes

What will definitely change though is how you write the emails/layouts/components, since we'd be moving from posthtml-components to Vue SFCs, and the expressions syntax will also be handled by Vue. This would be a breaking change of course.

Templating syntax

So with this new system, you'd write an email like this:

<script setup>
  // Optional, needed only if you need to import stuff or compute things
</script>

<template>
  <!-- Auto-imported Vue SFCs, <Main> here is in ./layouts/Layout.vue -->
  <Layout>
    <table class="w-full">
      <!-- your HTML... -->
    </table>
  </Layout>
</template>

We could abstract some of that boilerplate away, like not having to use the <template> tag, though I think it's better we don't.

Skipping evaluating expressions would also have to change, because Vue works differently. Not a huge deal though:

- <p>@{{ myVar }}</p>
+ <p v-pre>{{ myVar }}</p>

Likewise, outputting unescaped HTML would change:

- <p>{{{ myHtml }}}</p>
+ <p v-html="myHtml" />

So this is basically concerning Vue syntax, which is anyway very HTML-friendly, so to speak. Not a lot of changes really.

Dev server

We'd use Vite with HMR and Hono, instead of the current custom Express+Websockets implementation.

This will be more reliable and probably faster too, but the cool part is that navigating emails in your project would be served on a SPA so the experience would be much nicer.

We may be able to get better types too, so that you can click around in your editor and go to component definitions.

Still early days, but here's a quick demo:

2025-10-10.19-06-47.mp4

---

As I said, very early days and it'll need a lot of polish and stuff ported over, but I'm curious to hear your thoughts on it.

Thanks for reading!