Skip to main content
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

1

Install Vue.Email components

npm install @vue-email/components
2

Create templates folder

Create a new folder called emails in your src folder.
3

Update nuxt.config.ts File

export default defineNuxtConfig({
    build: {
        transpile: ['@vue/email'],
    },
    nitro: {
        esbuild: {
            options: {
                target: 'esnext',
            },
        },
    },
});
4

Write your email

<script setup lang="ts">

defineProps<{
    name: string;
}>();
</script>

<template>
    <VueEmail>
        <Html>
            <Head />
            <Preview>Welcome to Vue Email</Preview>
            <Container>
                <h1>Welcome, {{ name }}!</h1>
                <p>Thanks for trying Vue Email. We're thrilled to have you on board.</p>
            </Container>
        </Html>
    </VueEmail>
</template>
5

Write your workflow


export const testWorkflow = workflow('test-workflow', async ({ step, payload }) => {
    await step.email('send-email', async (controls) => {
        return {
            subject: controls.subject,
            body: renderEmail(payload.userName),
        };
    },
    {
        controlSchema: z.object({
            subject: z.string().default('A Successful Test on Novu from {{userName}}'),
        }),
    });
}, {
    payloadSchema: z.object({
        userName: z.string().default('John Doe'),
    }),
});

​
Learn More

To learn more, refer to Vue Email documentation.