Skip to main content
Add real-time in-app notifications to Nuxt using the Novu Inbox component and the @novu/js SDK.
This guide uses the @novu/js JavaScript SDK to build the Inbox component in Nuxt. Novu currently does not support a native Nuxt Inbox component.

Add Novu Inbox to my Nuxt app

Open in Cursor
1

​
Create a Novu account

Create a Novu account or sign in to access the Novu dashboard.
2

​
Create a Nuxt application

Run the following command to create a new Nuxt app:
npx nuxi@latest init novu-inbox-nuxt
3

​
Install @novu/js

The Novu JavaScript SDK gives you access to the Inbox component.Run the following command to install the SDK:
npm install @novu/js
4

​
Add the Inbox component

Create the app/components/NovuInbox.vue file to add the Inbox component passing and :
app/components/NovuInbox.vue
<template>
  <div ref="novuInbox"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { NovuUI } from '@novu/js/ui';

const novuInbox = ref<HTMLElement | null>(null);
let novuInstance: NovuUI | null = null;

onMounted(() => {
  if (!novuInbox.value) {
    return;
  }

  const novu = new NovuUI({
    options: {
      applicationIdentifier: 'YOUR_APPLICATION_IDENTIFIER',
      subscriber: 'YOUR_SUBSCRIBER_ID',
    },
  });

  novu.mountComponent({
    name: 'Inbox',
    props: {},
    element: novuInbox.value,
  });

  novuInstance = novu;
});

onUnmounted(() => {
  if (novuInstance && novuInbox.value) {
    novuInstance.unmountComponent(novuInbox.value);
  }
});
</script>
Explore the full nuxt-inbox example in the Novu examples repository.
If you’re signed in to your Novu account, then the and are automatically entered in the code sample above. Otherwise, you can manually retrieve them:
  • applicationIdentifier - In the Novu dashboard, click API Keys, and then locate your unique Application Identifier.
  • subscriberId - This represents a user in your system (typically the user’s ID in your database). For quick start purposes, an auto-generated subscriberId is provided for your Dashboard user.
If you pass a subscriberId that does not exist yet, Novu will automatically create a new subscriber with that ID.
5

​
Add the Inbox component to your application

Import and use the NovuInbox component in app/app.vue. Wrap it with <ClientOnly> so the Inbox renders only in the browser. Nuxt enables SSR by default, and the Inbox does not support server-side rendering.
This is similar to using 'use client' in Next.js. Without <ClientOnly>, you may see errors such as The requested module 'solid-js/web' does not provide an export named 'use'.
app/app.vue
<script setup lang="ts">
import NovuInbox from './components/NovuInbox.vue';
</script>

<template>
  <div>
    <ClientOnly>
      <NovuInbox />
    </ClientOnly>
  </div>
</template>
6

​
Run your application

Start your development server:
npm run dev
Once the application is running, a bell icon will appear on the top left side of the screen. Clicking it opens the notification inbox UI.Currently, there are no notifications. Let’s trigger one!
7

​
Trigger your first notification

In this step, you’ll create a simple workflow to send your first notification via the Inbox component. Follow these steps to set up and trigger a workflow from your Novu dashboard.
  1. Go to your Novu dashboard.
  2. In the sidebar, click Workflows.
  3. Click Create Workflow. Enter a name for your workflow (e.g., “Welcome Notification”).
  4. Click Create Workflow to save it.
  5. Click the Add Step icon in the workflow editor and then select In-App as the step type.
  6. In the In-App template editor, enter the following:
  • Subject: “Welcome to Novu”
  • Body: “Hello, world! ”
  1. Once you’ve added the subject and body, close the editor.
  2. Click Trigger.
  3. Click Test Workflow.
8

​
View the notification in your app

Go back to your Nuxt app, then click the bell icon.You should see the notification you just sent from Novu! 🎉

​
Next steps

Javascript SDK API Reference

Explore JavaScript SDK API reference for more advanced use cases.

Build Workflow

Design and manage advanced notification workflows.

Multi Tenancy

Manage multiple tenants within an organization.