docs/framework/quickstart/nuxt.mdx - next - githubmirror/novu

docs/framework/quickstart/nuxt.mdx
123 строки4 KB
George Djabarov
docs(docs): replace em dashes with spaced hyphens (#11970)
19 июл 2026, 13:33
19 июл 2026, 13:3306949a1
---
title: 'Nuxt quickstart for Novu Framework'
sidebarTitle: 'Nuxt'
description: 'Install Novu Framework in a Nuxt app, add the bridge endpoint with the serve helper, and sync your first code-based notification workflow.'
---


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

Start local development by running:

```bash
npx novu dev
```

This opens the Novu Dashboard in **Local mode** - a local environment connected to your running app through a tunnel - where you can preview and test the workflows running on your machine. See [Local development](/framework/studio) for details.

    </Step>
   <Step>
         ## Install packages

Install the Novu Framework package:

```bash
npm install @novu/framework
```

This package provides all the necessary tools to build and manage your notification workflows.

    </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: [testWorkflow] }));
        ```

        The `serve` helper is exported from the Nuxt-specific entry point `@novu/framework/nuxt`. Importing it from the base `@novu/framework` package will fail with `Cannot find name 'serve'`.
    </Step>
    <Step>
        ## Configure your secret key

Add your Novu secret key to your environment variables:

```bash .env
NOVU_SECRET_KEY=your_secret_key
```

    </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.

```ts app/novu/workflows.ts
import { workflow } from '@novu/framework';

export const testWorkflow = workflow('test-workflow', async ({ step }) => {
  await step.email('test-email', async () => {
    return {
      subject: 'Test Email',
      body: 'This is a test email from Novu Framework!',
    };
  });
});
```

    </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

Test your workflow by triggering it from the Local environment or using the Novu API:

```bash
curl -X POST https://api.novu.co/v1/events/trigger \
  -H 'Authorization: ApiKey YOUR_API_KEY' \
  -H 'Content-Type: application/json' \
  -d '{
    "name": "my-workflow",
    "to": "subscriber-id",
    "payload": {}
  }'
```

You should see the notification being processed in the Local environment.

    </Step>
    <Step>
        ## Deploy your application

Deploy your application to your preferred hosting provider. Make sure the `/api/novu` endpoint is accessible from the internet.

For local development and testing, you can use tools like ngrok to expose your local server to the internet.

    </Step>

</Steps>

Now that you have your first workflow running, you can:

- Learn about [Workflow Controls](/framework/controls) to expose no-code editing capabilities
- Explore different [Channel Steps](/framework/email-channel) like Email, SMS, Push, and more
- Set up [Action Steps](/framework/digest) like Delay and Digest
- Check out our [React Email integration](/framework/content/react-email) for building beautiful email templates