Add Vue quickstart guide and update documentation navigation

en/asgardeo/docs/quick-starts/vue.md

@@ -0,0 +1,24 @@
+---
+template: templates/quick-start.html
+---
+
+<script>
+  const meta = {
+    what_you_will_learn: [
+      "Create new Vue app using Vite",
+      "Install <a href='https://www.npmjs.com/package/@asgardeo/vue' target='_blank' rel='noopener noreferrer'>@asgardeo/vue</a> package",
+      "Add user sign-in and sign-out",
+      "Display user profile information"
+    ],
+    prerequisites: [
+      "About 15 minutes",
+      "<a href='{{ base_path }}/get-started/create-asgardeo-account/'>Asgardeo account</a>",
+      "Install <a href='https://nodejs.org/en/download/package-manager' target='_blank' rel='noopener noreferrer'>Node.js</a> on your system.",
+      "Make sure you have a JavaScript package manager like <code>npm</code>, <code>yarn</code>, or <code>pnpm</code>.",
+      "A favorite text editor or IDE"
+    ],
+    source_code: "<a href='https://github.com/asgardeo/web-ui-sdks/tree/main/samples/vue-sdk-playground' target='_blank' class='github-icon'>Vue Vite App Sample</a>"
+  };
+</script>
+
+{% include "../../../includes/quick-starts/vue.md" %}

en/asgardeo/mkdocs.yml

@@ -229,6 +229,8 @@ nav:
       - React:
         - Quickstart: quick-starts/react.md
         - Complete Guide: complete-guides/react/introduction.md
+      - Vue:
+        - Quickstart: quick-starts/vue.md
       - Angular:
         - Quickstart: quick-starts/angular.md
         - Complete Guide: complete-guides/angular/introduction.md

en/base.yml

@@ -194,6 +194,9 @@ extra:
     React SDK:
       icon: fontawesome/brands/react
       level: 2
+    Vue SDK:
+      icon: fontawesome/brands/vuejs
+      level: 2
     Next.js SDK:
       icon: assets/libs/custom-icons/nextjs.svg
       level: 2
@@ -212,6 +215,12 @@ extra:
     React Quickstart:
       icon: fontawesome/brands/react
       level: 3
+    Vue:
+      icon: fontawesome/brands/vuejs
+      level: 3
+    Vue Quickstart:
+      icon: fontawesome/brands/vuejs
+      level: 3
     .NET:
       icon: assets/libs/custom-icons/dotnet.svg
       level: 3

en/includes/quick-starts/vue.md

@@ -0,0 +1,207 @@
+# Vue quickstart
+
+Welcome to the Vue quickstart guide! In this document, you will learn to build a Vue app, add user sign-in, and display user profile information using {{ product_name }}.
+
+[//] STEPS_START
+
+## Configure an application in {{ product_name }}
+
+- Sign into the {{ product_name }} Console and navigate to **Applications > New Application**.
+- Select **Single-Page Application** and complete the wizard by providing a suitable name and an authorized redirect URL.
+
+!!! Example
+    **Name:** `{{ product }}-vue`
+
+    **Authorized redirect URL:** `http://localhost:5173`
+
+Once you finish creating the application, note down the following values from its **Guide** tab. You will need them to configure the Asgardeo Vue SDK.
+
+- **Client ID** - The unique identifier for your application.
+- **Base URL** - The base URL of your {{ product_name }} organization. This typically follows the format `{{content.sdkconfig.baseUrl}}`
+
+!!! Info
+
+    The authorized redirect URL determines where {{ product_name }} should send users after they successfully sign in. Typically, this will be the web address where your app is hosted. For this guide, we'll use `http://localhost:5173`, as the sample app will be accessible at this URL.
+
+## Create a Vue app using Vite
+
+Create (scaffold) your new Vue app using [Vite](https://vite.dev/).
+
+=== "npm"
+
+    ```bash
+    npm create vite@latest {{ product }}-vue -- --template vue
+    cd {{ product }}-vue
+    npm install
+    npm run dev
+    ```
+
+=== "yarn"
+
+    ```bash
+    yarn create vite@latest {{ product }}-vue -- --template vue
+    cd {{ product }}-vue
+    yarn install
+    yarn dev
+    ```
+
+=== "pnpm"
+
+    ```bash
+    pnpm create vite@latest {{ product }}-vue -- --template vue
+    cd {{ product }}-vue
+    pnpm install
+    pnpm dev
+    ```
+
+## Install `@asgardeo/vue`
+
+Asgardeo Vue SDK provides all the components and composables you need to integrate {{ product_name }} into your app. To get started, simply add the Asgardeo Vue SDK to the project. Make sure to stop the dev server you started in the previous step.
+
+=== "npm"
+
+    ```bash
+    npm install @asgardeo/vue
+    ```
+
+=== "yarn"
+
+    ```bash
+    yarn add @asgardeo/vue
+    ```
+
+=== "pnpm"
+
+    ```bash
+    pnpm add @asgardeo/vue
+    ```
+
+## Add `AsgardeoPlugin` and `<AsgardeoProvider />` to your app
+
+`AsgardeoPlugin` registers the Asgardeo Vue SDK globally with your Vue application. `<AsgardeoProvider />` wraps your app and makes authentication context available to all child components.
+
+Add the following changes to `main.js` to register the plugin.
+
+```javascript title="src/main.js" hl_lines="3 7"
+import { createApp } from 'vue'
+import './style.css'
+import { AsgardeoPlugin } from '@asgardeo/vue'
+import App from './App.vue'
+
+createApp(App)
+  .use(AsgardeoPlugin)
+  .mount('#app')
+```
+
+Then replace the contents of `App.vue` with the following to wrap your app with `<AsgardeoProvider />`.
+
+!!! Important
+
+    Replace the following placeholders with your registered organization name in {{ product_name }} and the generated `client-id` from the app you registered in {{ product_name }}.
+
+    - `<your-app-client-id>`
+    - `{{content.sdkconfig.baseUrl}}`
+
+```vue title="src/App.vue" hl_lines="2-5 7"
+<template>
+  <AsgardeoProvider
+    client-id="<your-app-client-id>"
+    base-url="{{content.sdkconfig.baseUrl}}"
+  >
+    <!-- Your app content goes here -->
+  </AsgardeoProvider>
+</template>
+```
+
+## Add sign-in and sign-out to your app
+
+Asgardeo Vue SDK provides `SignInButton` and `SignOutButton` components to handle user sign-in and sign-out. Use these components alongside `SignedIn` and `SignedOut` to conditionally render content based on the user's sign-in state.
+
+Replace the contents of `App.vue` with the following.
+
+```vue title="src/App.vue" hl_lines="2 11-16"
+<script setup>
+import { SignedIn, SignedOut, SignInButton, SignOutButton } from '@asgardeo/vue'
+</script>
+
+<template>
+  <AsgardeoProvider
+    client-id="<your-app-client-id>"
+    base-url="{{content.sdkconfig.baseUrl}}"
+  >
+    <header>
+      <SignedIn>
+        <SignOutButton />
+      </SignedIn>
+      <SignedOut>
+        <SignInButton />
+      </SignedOut>
+    </header>
+  </AsgardeoProvider>
+</template>
+```
+
+## Display the signed-in user's profile information
+
+You can use the `UserProfile` or `UserDropdown` components to display user profile information in a declarative way.
+
+- `UserProfile`: Displays and allows the user to edit their profile information.
+- `UserDropdown`: Provides a dropdown menu with built-in user information and sign-out functionality.
+
+```vue title="src/App.vue" hl_lines="2 12 20-22"
+<script setup>
+import { SignedIn, SignedOut, SignInButton, SignOutButton, UserDropdown, UserProfile } from '@asgardeo/vue'
+</script>
+
+<template>
+  <AsgardeoProvider
+    client-id="<your-app-client-id>"
+    base-url="{{content.sdkconfig.baseUrl}}"
+  >
+    <header>
+      <SignedIn>
+        <UserDropdown />
+        <SignOutButton />
+      </SignedIn>
+      <SignedOut>
+        <SignInButton />
+      </SignedOut>
+    </header>
+    <main>
+      <SignedIn>
+        <UserProfile />
+      </SignedIn>
+    </main>
+  </AsgardeoProvider>
+</template>
+```
+
+## Run the app
+
+To run the app, use the following command:
+
+=== "npm"
+
+    ```bash
+    npm run dev
+    ```
+
+=== "yarn"
+
+    ```bash
+    yarn dev
+    ```
+
+=== "pnpm"
+
+    ```bash
+    pnpm dev
+    ```
+
+Visit your app's homepage at [http://localhost:5173](http://localhost:5173).
+
+!!! Important
+
+    To try out sign-in and sign-out features, create a test user in {{ product_name }} by following this [guide]({{ base_path }}/guides/users/manage-users/#onboard-single-user){:target="_blank"}.
+
+[//] STEPS_END