Nuxt | Novu Documentation

In this guide, we will add a Novu Bridge Endpoint to a Nuxt application and send our first test workflow.

Set up your local environment

Start Local Studio

Start the Local Studio by running:

npx novu dev

The Local Studio will be available at http://localhost:2022. This is where you can preview and test your workflows.

Install packages

Install Required Packages

Install the Novu Framework package:

npm install @novu/framework

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

Add a Novu API Endpoint

import { serve } from '@novu/framework/nuxt';
import { testWorkflow } from "../novu/workflows";
 
export default defineEventHandler(serve({ workflows: [myWorkflow] }));

Configure your secret key

Add Your Secret Key

Add your Novu Secret Key to your environment variables:

# .env
NOVU_SECRET_KEY=your_secret_key

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.

Start your application

Start your Nuxt application with the Novu Endpoint configured.

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:

npx novu@latest dev --port <YOUR_NUXT_APPLICATION_PORT>

Test your endpoint

Test Your Workflow

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

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 your Local Studio.

Deploy your application

Deploy Your App

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.

Next Steps

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