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

1

Install Vue.Email components

Install the required Vue.Email components.

npm install vue-email @vue-email/compiler @vue-email/nuxt

2

Create templates folder

Create a templates folder in the root of your Nuxt app

3

Update nuxt.config.ts File

Update your nuxt.config.ts file to include the Vue Email module.

nuxt.config.ts

export default defineNuxtConfig({
    devtools: { enabled: true },
    components: true,

    modules: [
        '@vue-email/nuxt',
    ],
})

4

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>

5

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.