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



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: [

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 = "";

    const props = withDefaults(defineProps<Props>(), {});

            <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!


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'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.