feat: add vue quickstart guide for Inbox

content/docs/platform/quickstart/angular.mdx

@@ -14,7 +14,7 @@ import {
 This guide walks you through integrating Novu’s Inbox into your Angular application for real time in-app notifications, from setup to triggering your first notification. By the end, you'll have a working notification inbox.
 
 <Callout type="info">
-  This guide uses @novu/js headless library to build the Inbox component in Angular. Novu currently does not support native Angular Inbox component.
+  This guide uses @novu/js javascript sdk to build the Inbox component in Angular. Novu currently does not support native Angular Inbox component.
 </Callout>
 
 <Steps>
@@ -40,9 +40,9 @@ This guide walks you through integrating Novu’s Inbox into your Angular applic
 
   <Step>
   ### Install the required package
-  Run the command below to install [Novu headless SDK](/platform/sdks/headless), which provides required component for Inbox UI:
+  Run the command below to install [Novu Javascript SDK](/platform/sdks/javascript), which provides required component for Inbox UI:
 
-    ```bash
+    ```package-install
     npm install @novu/js
     ```
   </Step>
@@ -111,7 +111,7 @@ export class AppComponent implements AfterViewInit {
   ### Run Your Application
   Start your development server:
 
-  ```bash
+  ```package-install
   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.
@@ -155,11 +155,11 @@ export class AppComponent implements AfterViewInit {
 
 <Cards cols={2}>
   <Card
-    title="Headless SDK API Reference"
+    title="Javascript SDK API Reference"
     icon={<Library />}
-    href="/platform/sdks/headless"
+    href="/platform/sdks/javascript"
   >
-    Explore headless sdk API reference for more advanced use cases.
+    Explore JavaScript SDK API reference for more advanced use cases.
   </Card>
   <Card title="Build Workflow" icon={<Workflow />} href="/platform/workflow/overview">
      Design and manage advanced notification workflows.

content/docs/platform/quickstart/meta.json

@@ -1,3 +1,3 @@
 {
-  "pages": ["react", "nextjs", "remix", "angular"]
+  "pages": ["react", "nextjs", "remix", "angular", "vue"]
 }

content/docs/platform/quickstart/vue.mdx

@@ -0,0 +1,213 @@
+---
+title: 'Vue'
+pageTitle: 'Novu Vue Quickstart Guide'
+description: 'Create an account and learn how to start using Novu Inbox in your vue application.'
+---
+
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import {
+  Code2,
+  Library,
+  Workflow
+} from 'lucide-react';
+
+This guide walks you through integrating Novu's Inbox into your Vue application for real time in-app notifications, from setup to triggering your first notification. By the end, you'll have a working notification inbox.
+
+<Callout type="info">
+  This guide uses @novu/js javascript sdk to build the Inbox component in Vue. Novu currently does not support native Vue Inbox component.
+</Callout>
+
+<Steps>
+  <Step>
+  ### Create a Novu account
+    [Create a Novu account](https://dashboard-v2.novu.co/auth/sign-up) or [sign in](https://dashboard-v2.novu.co/auth/sign-in) to an existing account.
+  </Step>
+
+    <Step>
+  ### Create a Vue application
+    Create a new vue app with create-vue package. Skip this step if you already have an existing project:
+
+    ```package-install
+    npm create vue@latest novu-inbox-vue
+    ```
+
+    Navigate to the newly created project:
+
+    ```bash
+    cd novu-inbox-vue
+    ```
+  </Step>
+
+  <Step>
+  ### Install the required package
+  Run the command below to install [Novu Javascript SDK](/platform/sdks/javascript), which provides required component for Inbox UI:
+
+    ```package-install
+    npm install @novu/js
+    ```
+  </Step>
+
+
+  <Step>
+  ### Add the Inbox component
+  Create the `src/components/NovuInbox.vue` file to add the Inbox component passing :tooltip[applicationIdentifier]{label="The application identifier is a unique identifier for your application. You can find it in the Novu Dashboard under the API keys page."} and :tooltip[subscriberId]{label="The subscriber ID is the unique identifier for the user in your application, typically the user's id in your database."}:
+
+```vue title="src/components/NovuInbox.vue"
+<template>
+  <!-- 
+    This empty div serves as a mounting point for the Novu Inbox.
+    We use Vue's ref attribute to get direct access to this DOM element.
+  -->
+  <div ref="novuInbox"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from "vue";
+import { NovuUI } from "@novu/js/ui";
+
+interface NovuOptions {
+  options: {
+    applicationIdentifier: string;
+    subscriberId: string;
+  };
+}
+
+// Create a reactive reference to hold the DOM element
+const novuInbox = ref<HTMLElement | null>(null);
+// Store the Novu instance for cleanup during unmount
+let novuInstance: NovuUI | null = null;
+
+onMounted(() => {
+  // Ensure our div reference exists before proceeding
+  if (!novuInbox.value) {
+    console.error("Novu inbox container element not found");
+    return;
+  }
+
+  try {
+    // Initialize the Novu UI instance with required configuration
+    const novu = new NovuUI({
+      options: {
+        applicationIdentifier: 'YOUR_APPLICATION_IDENTIFIER',
+        subscriberId: 'YOUR_SUBSCRIBER_ID',
+      },
+    } as NovuOptions);
+
+    // Mount the Inbox component to our div reference
+    // This is where Novu creates and injects its Inbox UI
+    novu.mountComponent({
+      name: "Inbox",
+      props: {},
+      element: novuInbox.value, // The actual DOM element where Inbox will be mounted
+    });
+
+    // Store the instance for cleanup
+    novuInstance = novu;
+  } catch (error) {
+    console.error("Failed to initialize Novu inbox:", error);
+  }
+});
+
+// Clean up when the component is destroyed
+onUnmounted(() => {
+  if (novuInstance && novuInbox.value) {
+    try {
+      // Properly unmount the Novu component to prevent memory leaks
+      novuInstance.unmountComponent(novuInbox.value);
+    } catch (error) {
+      console.error("Failed to unmount Novu inbox:", error);
+    }
+  }
+});
+</script>
+```
+    <div className="text-sm text-gray-500 text-center mt-[-12px]">
+      [Sign in](https://dashboard-v2.novu.co/auth/sign-up) to get your own API keys
+    </div>
+
+     If you're signed in to your Novu account, then the :tooltip[applicationIdentifier]{label="The application identifier is a unique identifier for your application. You can find it in the Novu Dashboard under the API keys page."} and :tooltip[subscriberId]{label="The subscriber ID is the unique identifier for the user in your application, typically the user's id in your database."} 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.
+
+    <Callout type="info">
+      **Note:** If you pass a `subscriberId` that does not exist yet, Novu will automatically create a new subscriber with that ID.
+    </Callout>
+
+  </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"
+  <script setup lang="ts">
+  import NovuInbox from "./components/NovuInbox.vue";
+  </script>
+
+  <template>
+    <NovuInbox />
+  </template>
+  ```
+  </Step>
+
+  <Step>
+  ### Run Your Application
+  Start your development server:
+
+  ```package-install
+  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
+
+<Cards 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/overview">
+     Design and manage advanced notification workflows.
+  </Card>
+  <Card title="Multi Tenancy" icon={<Code2 />} href="/platform/concepts/tenants">
+    Manage multiple tenants within an organization.
+  </Card>
+</Cards>