docs/platform/quickstart/nuxt.mdx
Add real-time in-app notifications to Nuxt using the Novu Inbox component and the @novu/js SDK.
<Prompt description="Add Novu Inbox to my Nuxt app" icon="sparkles" actions={["copy", "cursor"]}>
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
npm install @novu/js
<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>
<template>
<ClientOnly>
<NovuInbox />
</ClientOnly>
</template>
Use the app's existing auth system to get a unique user identifier for subscriberId. If no auth system exists, use YOUR_SUBSCRIBER_ID.
Extract design tokens from the host app and apply via the appearance configuration. Only set values extracted from the host app's design system.
ALWAYS:
<ClientOnly> because Nuxt uses SSR by defaultNEVER:
@novu/js installed with the project's package manager?<ClientOnly>?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
```
Run the following command to install the SDK:
```package-install
npm install @novu/js
```
<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>
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>
<script setup lang="ts">
import NovuInbox from './components/NovuInbox.vue';
</script>
<template>
<div>
<ClientOnly>
<NovuInbox />
</ClientOnly>
</div>
</template>
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 notificationIn 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.
- **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>