# Nuxt Framework Quickstart Guide (/framework/quickstart/nuxt)

Get started with Novu Framework in a Nuxt application

import DeployApp from '@/snippets/quickstart/deploy.mdx';
import NextStepsStep from '@/snippets/quickstart/next-steps.mdx';
import { PackagesStep } from '@/snippets/quickstart/packages.tsx';
import { SecretStep } from '@/snippets/quickstart/secret.tsx';
import { StudioStep } from '@/snippets/quickstart/studio.tsx';
import { TestStep } from '@/snippets/quickstart/test.tsx';
import { WorkflowStep } from '@/snippets/quickstart/workflow.tsx';

In this guide, we will add a Novu [Bridge Endpoint](/framework/endpoint) to a Nuxt application and send our first test workflow.

<Steps>
  <Step>
    ## Set up your local environment

    <StudioStep />
  </Step>

  <Step>
    ## Install packages

    <PackagesStep />
  </Step>

  <Step>
    ## Add a Novu API Endpoint

    ```typescript app/server/api/novu.ts
    import { serve } from '@novu/framework/nuxt';
    import { testWorkflow } from "../novu/workflows";

    export default defineEventHandler(serve({ workflows: [myWorkflow] }));
    ```
  </Step>

  <Step>
    ## Configure your secret key

    <SecretStep />
  </Step>

  <Step>
    ## Create your workflow definition

    Add a `novu` folder in your app folder as such `app/server/api/novu.ts` that will contain your workflow definitions.

    <WorkflowStep />
  </Step>

  <Step>
    ## Start your application

    Start your Nuxt application with the Novu Endpoint configured.

    ```bash
    cd my-novu-app && npm run dev
    ```

    If your Nuxt application is running on other than `4000` port, restart the `npx novu dev` command with the port:

    ```bash
    npx novu@latest dev --port <YOUR_NUXT_APPLICATION_PORT>
    ```
  </Step>

  <Step>
    ## Test your endpoint

    <TestStep framework="Nuxt" />
  </Step>

  <Step>
    ## Deploy your application

    <DeployApp />
  </Step>
</Steps>

<NextStepsStep />