# Vue Email Integration (/framework/content/vue-email) Learn how to use Vue Email to build beautiful email templates You can integrate Novu Framework with [Vue Email](https://vuemail.net/) 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](https://github.com/novuhq/novu-framework-nuxt-example/) ## Quickstart ```bash npm install @vue-email/components ``` Create a new folder called `emails` in your `src` folder. ```typescript export default defineNuxtConfig({ build: { transpile: ['@vue/email'], }, nitro: { esbuild: { options: { target: 'esnext', }, }, }, }); ``` ```vue ``` ```typescript 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](https://vuemail.net/).