Vue.js support

[mklueh]

Hello,

Would it theoretically be possible to somehow support Vue.js or at least compile individual components into HTML and inject them into templates?

I'm wondering how to easily get consistency in design and share design parts between the application and the mail templates

[cossssmin]

You might be able to run it inside an event like beforeCreate or beforeRender, not sure though...

Regarding consistency between app/email components that would be a dream for sure, but the reality is that whatever you have coded for the web will at best not render the same in an email client, and will very likely look completely broken in clients like Outlook.

Since you've opened the subject, just laying out some thoughts...

It would be fantastic if we somehow refactored at least the Components in Maizzle to work more like in Vue and Nuxt specifically... like you'd define the components folder like today, and it would autoload all of them and you'd write the tag and pass data just like in Nuxt, i.e.:

<!-- src/components/EmailFooter.html -->
<div>{{ copyright }}</div>

<!-- used in a template -->
<email-footer :copyright="(C) 2022 Maizzle" />

This could possibly run before PostHTML to avoid any complications like with self-closing tags or with passing data/expressions, completely removing the need for posthtml-modules (which currently does the job but could do way better).

It would be a 'true' components approach and it would even allow creating predefined components that people with no HTML email experience could use to easily develop emails - kind of like in MJML but truly open and customizable.

Would love to work with someone to bring this in Maizzle, it's something I don't have a lot of experience with so I'm open to ideas :)

[mklueh]

Regarding consistency between app/email components that would be a dream for sure, but the reality is that whatever you have coded for the web will at best not render the same in an email client, and will very likely look completely broken in clients like Outlook.

Not sure if I understand it correctly, but my impression was, it does not matter if the HTML components are glued together using PostHTML + TailwindCSS vs Vue.js + TailwindCSS. Why would the Vue approach produce any different results in that case that would break in Outlook?

It would certainly be beneficial for the overall adoption of this approach.

In a perfect world, I'd even imagine Maizzle being a Nuxt Module, that re-uses a command like "nuxt generate:mail".
(Not sure if it would require a modification of the Nuxt 3 CLI but I'd guess so.)

Instead of rendering everything from the pages directory, it uses the mail directory and produces one rendered HTML email template per Vue template that can be synced with Sendgrid during the CI process.

It would create a fluent workflow allowing rapid adjustments of designs accross everything and use the power of Nuxt 3.

Not only that, you could even make use of CMS systems to manage your email content, be it with @nuxt/content or hosted solutions like https://directus.cloud/

Since you've opened the subject, just laying out some thoughts...

It would be fantastic if we somehow refactored at least the Components in Maizzle to work more like in Vue and Nuxt specifically... like you'd define the components folder like today, and it would autoload all of them and you'd write the tag and pass data just like in Nuxt, i.e.:

<!-- src/components/EmailFooter.html -->
<div>{{ copyright }}</div>

<!-- used in a template -->
<email-footer :copyright="(C) 2022 Maizzle" />

This could possibly run before PostHTML to avoid any complications like with self-closing tags or with passing data/expressions, completely removing the need for posthtml-modules (which currently does the job but could do way better).

Sounds like a conflicting approach indeed that would call into question if it even makes sense to combine both.

Regarding the handlebars brackets, I could imagine just providing a special component within the Nuxt Module for convenience like

<maiz-holder name="userName" />

that just renders as

{{ userName }}

So you would not have to deal with escaped handlebar structures in your Vue components at all.

[cossssmin]

Why would the Vue approach produce any different results in that case that would break in Outlook?

I understood you'd be using components coded for web in an HTML email - there are many things that Outlook on Windows does not support, starting with basic stuff like width/max-width, padding on any elements except table cells or even CSS background images (flex/grid is out of the question).

[mklueh]

I see, but those issues are not Vue related. It should not make any difference if you use Vue or PostHTML to stick some components together and run some CSS transformations afterwards imo