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

docs/platform/quickstart/nuxt.mdx
280 строк8 KB
George Djabarov
docs(docs): replace em dashes with spaced hyphens (#11970)
19 июл 2026, 13:33
19 июл 2026, 13:3306949a1
---
title: 'Nuxt In-App Notifications Quickstart - Novu Inbox'
description: "Create a Novu account and integrate the Novu Inbox component into your Nuxt application to display real-time in-app notifications for your subscribers."
sidebarTitle: 'Nuxt'
---


Add real-time in-app notifications to Nuxt using the Novu Inbox component and the `@novu/js` SDK.

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

<Prompt description="Add Novu Inbox to my Nuxt app" icon="sparkles" actions={["copy", "cursor"]}>
# Add Novu Inbox to Nuxt App

Install `@novu/js`. Mount the Inbox in your header, navbar, or sidebar. Wrap the Inbox in `<ClientOnly>` because Nuxt renders with SSR by default and the Inbox is client-only.

Latest docs: https://docs.novu.co/platform/quickstart/nuxt

## Install

```bash
npm install @novu/js
```

## Component

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

## Usage in Nuxt

```vue
<template>
  <ClientOnly>
    <NovuInbox />
  </ClientOnly>
</template>
```

## Subscriber ID

Use the app's existing auth system to get a unique user identifier for subscriberId. If no auth system exists, use `YOUR_SUBSCRIBER_ID`.

## Appearance

Extract design tokens from the host app and apply via the appearance configuration. Only set values extracted from the host app's design system.

## Rules

ALWAYS:

- Detect the project's package manager and use it for installation
- Wrap the Inbox in `<ClientOnly>` because Nuxt uses SSR by default
- Mount the Inbox inline in existing UI - no new pages or wrappers
- Follow Nuxt conventions (Composition API, existing project patterns)
- Use the existing auth system to source subscriberId when available

NEVER:

- Render the Inbox during server-side rendering
- Create wrapper components or new pages just for the inbox
- Add code comments
- Introduce styles not in the host app

## Verify Before Responding

1. Is `@novu/js` installed with the project's package manager?
2. Is the Inbox wrapped in `<ClientOnly>`?
3. Is the Inbox mounted inline in existing UI?
4. Is subscriberId sourced from the auth system when available?

If any fails, revise.
</Prompt>

<Steps>
  <Step>
  ### Create a Novu account
    [Create a Novu account](https://dashboard.novu.co/auth/sign-up) or [sign in](https://dashboard.novu.co/auth/sign-in) to access the Novu dashboard.
  </Step>

  <Step>
  ### Create a Nuxt application
    Run the following command to create a new Nuxt app:

    ```package-install
    npx nuxi@latest init novu-inbox-nuxt
    ```
  </Step>

  <Step>
  ### Install `@novu/js`
  The [Novu JavaScript SDK](/platform/sdks/javascript) gives you access to the Inbox component.

  Run the following command to install the SDK:

    ```package-install
    npm install @novu/js
    ```
  </Step>

  <Step>
  ### Add the Inbox component
  Create the `app/components/NovuInbox.vue` file to add the Inbox component passing <Tooltip tip="The application identifier is a unique identifier for your application. You can find it in the Novu Dashboard under the API keys page.">applicationIdentifier</Tooltip> and <Tooltip tip="The subscriber ID is the unique identifier for the user in your application, typically the user's id in your database.">subscriberId</Tooltip>:

  ```vue title="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>
  ```

  <Note>
  Explore the full `nuxt-inbox` example in the [Novu examples repository](https://github.com/jainpawan21/novu-inbox-nuxt).
</Note>

     If you're signed in to your Novu account, then the <Tooltip tip="The application identifier is a unique identifier for your application. You can find it in the Novu Dashboard under the API keys page.">applicationIdentifier</Tooltip> and <Tooltip tip="The subscriber ID is the unique identifier for the user in your application, typically the user's id in your database.">subscriberId</Tooltip> 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.

    <Note>
      If you pass a `subscriberId` that does not exist yet, Novu will automatically create a new subscriber with that ID.
    </Note>

  </Step>

  <Step>
  ### 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.

  <Note>
    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'`.
  </Note>

  ```vue title="app/app.vue"
  <script setup lang="ts">
  import NovuInbox from './components/NovuInbox.vue';
  </script>

  <template>
    <div>
      <ClientOnly>
        <NovuInbox />
      </ClientOnly>
    </div>
  </template>
  ```
  </Step>

  <Step>
  ### Run your application
  Start your development server:

  ```package-install
  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!

  </Step>

  <Step>
  ### 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](https://dashboard-v2.novu.co/auth/sign-in).
  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! "

  7. Once you've added the subject and body, close the editor.
  8. Click **Trigger**.
  9. Click **Test Workflow**.

  </Step>

  <Step>
  ### 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! 🎉

  </Step>
</Steps>

## Next steps

<Columns cols={2}>
  <Card
    title="Javascript SDK API Reference"
    icon="library"
    href="/platform/sdks/javascript"
  >
    Explore JavaScript SDK API reference for more advanced use cases.
  </Card>
  <Card title="Build Workflow" icon="workflow" href="/platform/workflow">
     Design and manage advanced notification workflows.
  </Card>
  <Card title="Multi Tenancy" icon="square-code" href="/platform/concepts/tenants">
    Manage multiple tenants within an organization.
  </Card>
</Columns>