diff --git a/en/asgardeo/docs/quick-starts/vue.md b/en/asgardeo/docs/quick-starts/vue.md new file mode 100644 index 0000000000..f628164759 --- /dev/null +++ b/en/asgardeo/docs/quick-starts/vue.md @@ -0,0 +1,24 @@ +--- +template: templates/quick-start.html +--- + + + +{% include "../../../includes/quick-starts/vue.md" %} diff --git a/en/asgardeo/mkdocs.yml b/en/asgardeo/mkdocs.yml index 47de09ffbc..c38ecefd1e 100644 --- a/en/asgardeo/mkdocs.yml +++ b/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 diff --git a/en/base.yml b/en/base.yml index 6f0ae668f7..79e93ee27a 100644 --- a/en/base.yml +++ b/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 diff --git a/en/includes/quick-starts/vue.md b/en/includes/quick-starts/vue.md new file mode 100644 index 0000000000..b8060100b6 --- /dev/null +++ b/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 `` to your app + +`AsgardeoPlugin` registers the Asgardeo Vue SDK globally with your Vue application. `` 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 ``. + +!!! 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 }}. + + - `` + - `{{content.sdkconfig.baseUrl}}` + +```vue title="src/App.vue" hl_lines="2-5 7" + +``` + +## 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" + + + +``` + +## 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" + + + +``` + +## 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