> ## Documentation Index
> Fetch the complete documentation index at: https://novu-c5de82d9-docs-homepage-redesign.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Vue In-App Notifications Quickstart — Novu Inbox

> Create an account and learn how to start using Novu Inbox in your Vue application.

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

<Note>
  This guide uses @novu/js javascript sdk to build the Inbox component in Vue. Novu currently does not support native Vue Inbox component.
</Note>

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

  Install `@novu/js`. Mount the Inbox in your header, navbar, or sidebar.

  Latest docs: [https://docs.novu.co/platform/quickstart/vue](https://docs.novu.co/platform/quickstart/vue)

  ## Install

  ```bash theme={null}
  npm install @novu/js
  ```

  ## Component

  ```ts theme={null}
  import { NovuUI } from '@novu/js/ui';

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

  novu.mountComponent({
    name: 'Inbox',
    props: {},
    element: document.getElementById('notification-inbox'),
  });
  ```

  ## 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
  * Mount the Inbox inline in existing UI — no new pages or wrappers
  * Follow Vue conventions (Composition API, existing project patterns)
  * Use the existing auth system to source subscriberId when available

  NEVER:

  * 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 mounted inline in existing UI?
  3. 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 Vue application

    Run the following command to create a new Vue app:

    ```package-install theme={null}
    npm create vue@latest novu-inbox-vue
    ```
  </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 theme={null}
    npm install @novu/js
    ```
  </Step>

  <Step>
    ### Add the Inbox component

    Create the `src/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>:

    <Note>
      Explore the full `vue-inbox` example in the [Novu examples repository](https://github.com/novuhq/novu).
    </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 `src/App.vue` file:

    ```vue title="src/App.vue" theme={null}
    <script setup lang="ts">

    </script>

    <template>
      <NovuInbox />
    </template>
    ```
  </Step>

  <Step>
    ### Run Your Application

    Start your development server:

    ```package-install theme={null}
    npm run start
    ```

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