Vue Email

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

npm install @vue-email/components

Create templates folder

Create a new folder called emails in your src folder.

Update nuxt.config.ts File

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

Write your email

<script setup lang="ts">
import { VueEmail, Button, Container, Head, Html, Preview } from '@vue-email/components';
 
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>

Write your workflow

import { workflow } from '@novu/framework';
import { renderEmail } from './emails/test-email';
import { z } from 'zod';
 
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.

Quickstart

Learn More

On this page