You can integrate Novu Framework with Vue Email in a few simple steps. This guide will walk you through the process of creating a new email template using Vue Email and Nuxt.
For a Quickstart Boilerplate project using Nuxt.js, and Vue Email, check out the Vue Email Starter repository
Quickstart
Install Vue.Email components
Install the required Vue.Email components.
npm install vue-email @vue-email/compiler @vue-email/nuxt
Create templates folder
Create a templates folder in the root of your Nuxt app
Update nuxt.config.ts File
Update your nuxt.config.ts file to include the Vue Email module.
export default defineNuxtConfig({
devtools: { enabled: true },
components: true,
modules: [
'@vue-email/nuxt',
],
})
Write your email
Create a new sample-email.vue file in the templates folder for your email template.
<script setup lang="ts">
import { defineProps, withDefaults } from 'vue'
interface Props {
}
const baseUrl = "https://react-email-demo-bdj5iju9r-resend.vercel.app";
const props = withDefaults(defineProps<Props>(), {});
</script>
<template>
<ETailwind>
<EHtml>
<EHead/>
<EPreview>Email Preview Text</EPreview>
<EBody class="bg-white my-auto mx-auto font-sans">
<EContainer class="border border-solid border-[#eaeaea] p-[20px] md:p-7 rounded my-[40px] mx-auto max-w-[465px]">
<EHeading class="text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0">
Hello World!
</EHeading>
</EContainer>
</EBody>
</EHtml>
</ETailwind>
</template>
Write your workflow
Define your Workflow using the above template
import { config } from '@vue-email/compiler';
import { workflow } from '@novu/framework';
const vueEmail = config('templates', {
verbose: false,
options: {},
});
workflow('new-signup', async ({step, payload}) => {
await step.email('send-email', async (inputs) => {
const template = await vueEmail.render('sample-email.vue', {
props: inputs
})
return {
subject: `Welcome to Vue E-mail`,
body: template.html
}
});
});
Learn More
To learn more, refer to Vue Email documentation.
