> ## Documentation Index
> Fetch the complete documentation index at: https://v0.x-docs.novu.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Vue E-mail

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

<Steps>
  <Step title="Install Vue.Email components">
    Install the required Vue.Email components.

    ```bash theme={null}
    npm install vue-email @vue-email/compiler @vue-email/nuxt
    ```
  </Step>

  <Step title="Create templates folder">
    Create a `templates` folder in the root of your Nuxt app
  </Step>

  <Step title="Update nuxt.config.ts File">
    Update your `nuxt.config.ts` file to include the Vue Email module.

    ```ts nuxt.config.ts theme={null}
    export default defineNuxtConfig({
        devtools: { enabled: true },
        components: true,

        modules: [
            '@vue-email/nuxt',
        ],
    })
    ```
  </Step>

  <Step title="Write your email">
    Create a new `sample-email.vue` file in the `templates` folder for your email template.

    ```vue theme={null}
    <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>

    ```
  </Step>

  <Step title="Write your workflow">
    Define your Workflow using the above template

    ```ts theme={null}
    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
            }
        });
    });
    ```
  </Step>
</Steps>

## Learn More

To learn more, refer to [Vue Email documentation](https://vuemail.net/).