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.