Skip to content

Commit 0ac40c0

Browse files
brionmariobrionmario
authored
Merge pull request #5988 from kavindadimuthu/doc/vuejs-sdk
Add Vue quickstart guide and update documentation navigation
2 parents 015b866 + f015ae6 commit 0ac40c0

4 files changed

Lines changed: 242 additions & 0 deletions

File tree

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
---
2+
template: templates/quick-start.html
3+
---
4+
5+
<script>
6+
const meta = {
7+
what_you_will_learn: [
8+
"Create new Vue app using Vite",
9+
"Install <a href='https://www.npmjs.com/package/@asgardeo/vue' target='_blank' rel='noopener noreferrer'>@asgardeo/vue</a> package",
10+
"Add user sign-in and sign-out",
11+
"Display user profile information"
12+
],
13+
prerequisites: [
14+
"About 15 minutes",
15+
"<a href='{{ base_path }}/get-started/create-asgardeo-account/'>Asgardeo account</a>",
16+
"Install <a href='https://nodejs.org/en/download/package-manager' target='_blank' rel='noopener noreferrer'>Node.js</a> on your system.",
17+
"Make sure you have a JavaScript package manager like <code>npm</code>, <code>yarn</code>, or <code>pnpm</code>.",
18+
"A favorite text editor or IDE"
19+
],
20+
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>"
21+
};
22+
</script>
23+
24+
{% include "../../../includes/quick-starts/vue.md" %}

‎en/asgardeo/mkdocs.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -235,6 +235,8 @@ nav:
235235
- React:
236236
- Quickstart: quick-starts/react.md
237237
- Complete Guide: complete-guides/react/introduction.md
238+
- Vue:
239+
- Quickstart: quick-starts/vue.md
238240
- Angular:
239241
- Quickstart: quick-starts/angular.md
240242
- Complete Guide: complete-guides/angular/introduction.md

‎en/base.yml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -201,6 +201,9 @@ extra:
201201
React SDK:
202202
icon: fontawesome/brands/react
203203
level: 2
204+
Vue SDK:
205+
icon: fontawesome/brands/vuejs
206+
level: 2
204207
Next.js SDK:
205208
icon: assets/libs/custom-icons/nextjs.svg
206209
level: 2
@@ -219,6 +222,12 @@ extra:
219222
React Quickstart:
220223
icon: fontawesome/brands/react
221224
level: 3
225+
Vue:
226+
icon: fontawesome/brands/vuejs
227+
level: 3
228+
Vue Quickstart:
229+
icon: fontawesome/brands/vuejs
230+
level: 3
222231
.NET:
223232
icon: assets/libs/custom-icons/dotnet.svg
224233
level: 3

‎en/includes/quick-starts/vue.md‎

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
# Vue quickstart
2+
3+
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 }}.
4+
5+
[//] STEPS_START
6+
7+
## Configure an application in {{ product_name }}
8+
9+
- Sign into the {{ product_name }} Console and navigate to **Applications > New Application**.
10+
- Select **Single-Page Application** and complete the wizard by providing a suitable name and an authorized redirect URL.
11+
12+
!!! Example
13+
**Name:** `{{ product }}-vue`
14+
15+
**Authorized redirect URL:** `http://localhost:5173`
16+
17+
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.
18+
19+
- **Client ID** - The unique identifier for your application.
20+
- **Base URL** - The base URL of your {{ product_name }} organization. This typically follows the format `{{content.sdkconfig.baseUrl}}`
21+
22+
!!! Info
23+
24+
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.
25+
26+
## Create a Vue app using Vite
27+
28+
Create (scaffold) your new Vue app using [Vite](https://vite.dev/).
29+
30+
=== "npm"
31+
32+
```bash
33+
npm create vite@latest {{ product }}-vue -- --template vue
34+
cd {{ product }}-vue
35+
npm install
36+
npm run dev
37+
```
38+
39+
=== "yarn"
40+
41+
```bash
42+
yarn create vite@latest {{ product }}-vue -- --template vue
43+
cd {{ product }}-vue
44+
yarn install
45+
yarn dev
46+
```
47+
48+
=== "pnpm"
49+
50+
```bash
51+
pnpm create vite@latest {{ product }}-vue -- --template vue
52+
cd {{ product }}-vue
53+
pnpm install
54+
pnpm dev
55+
```
56+
57+
## Install `@asgardeo/vue`
58+
59+
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.
60+
61+
=== "npm"
62+
63+
```bash
64+
npm install @asgardeo/vue
65+
```
66+
67+
=== "yarn"
68+
69+
```bash
70+
yarn add @asgardeo/vue
71+
```
72+
73+
=== "pnpm"
74+
75+
```bash
76+
pnpm add @asgardeo/vue
77+
```
78+
79+
## Add `AsgardeoPlugin` and `<AsgardeoProvider />` to your app
80+
81+
`AsgardeoPlugin` registers the Asgardeo Vue SDK globally with your Vue application. `<AsgardeoProvider />` wraps your app and makes authentication context available to all child components.
82+
83+
Add the following changes to `main.js` to register the plugin.
84+
85+
```javascript title="src/main.js" hl_lines="3 7"
86+
import { createApp } from 'vue'
87+
import './style.css'
88+
import { AsgardeoPlugin } from '@asgardeo/vue'
89+
import App from './App.vue'
90+
91+
createApp(App)
92+
.use(AsgardeoPlugin)
93+
.mount('#app')
94+
```
95+
96+
Then replace the contents of `App.vue` with the following to wrap your app with `<AsgardeoProvider />`.
97+
98+
!!! Important
99+
100+
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 }}.
101+
102+
- `<your-app-client-id>`
103+
- `{{content.sdkconfig.baseUrl}}`
104+
105+
```vue title="src/App.vue" hl_lines="2-5 7"
106+
<template>
107+
<AsgardeoProvider
108+
client-id="<your-app-client-id>"
109+
base-url="{{content.sdkconfig.baseUrl}}"
110+
>
111+
<!-- Your app content goes here -->
112+
</AsgardeoProvider>
113+
</template>
114+
```
115+
116+
## Add sign-in and sign-out to your app
117+
118+
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.
119+
120+
Replace the contents of `App.vue` with the following.
121+
122+
```vue title="src/App.vue" hl_lines="2 11-16"
123+
<script setup>
124+
import { SignedIn, SignedOut, SignInButton, SignOutButton } from '@asgardeo/vue'
125+
</script>
126+
127+
<template>
128+
<AsgardeoProvider
129+
client-id="<your-app-client-id>"
130+
base-url="{{content.sdkconfig.baseUrl}}"
131+
>
132+
<header>
133+
<SignedIn>
134+
<SignOutButton />
135+
</SignedIn>
136+
<SignedOut>
137+
<SignInButton />
138+
</SignedOut>
139+
</header>
140+
</AsgardeoProvider>
141+
</template>
142+
```
143+
144+
## Display the signed-in user's profile information
145+
146+
You can use the `UserProfile` or `UserDropdown` components to display user profile information in a declarative way.
147+
148+
- `UserProfile`: Displays and allows the user to edit their profile information.
149+
- `UserDropdown`: Provides a dropdown menu with built-in user information and sign-out functionality.
150+
151+
```vue title="src/App.vue" hl_lines="2 12 20-22"
152+
<script setup>
153+
import { SignedIn, SignedOut, SignInButton, SignOutButton, UserDropdown, UserProfile } from '@asgardeo/vue'
154+
</script>
155+
156+
<template>
157+
<AsgardeoProvider
158+
client-id="<your-app-client-id>"
159+
base-url="{{content.sdkconfig.baseUrl}}"
160+
>
161+
<header>
162+
<SignedIn>
163+
<UserDropdown />
164+
<SignOutButton />
165+
</SignedIn>
166+
<SignedOut>
167+
<SignInButton />
168+
</SignedOut>
169+
</header>
170+
<main>
171+
<SignedIn>
172+
<UserProfile />
173+
</SignedIn>
174+
</main>
175+
</AsgardeoProvider>
176+
</template>
177+
```
178+
179+
## Run the app
180+
181+
To run the app, use the following command:
182+
183+
=== "npm"
184+
185+
```bash
186+
npm run dev
187+
```
188+
189+
=== "yarn"
190+
191+
```bash
192+
yarn dev
193+
```
194+
195+
=== "pnpm"
196+
197+
```bash
198+
pnpm dev
199+
```
200+
201+
Visit your app's homepage at [http://localhost:5173](http://localhost:5173).
202+
203+
!!! Important
204+
205+
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"}.
206+
207+
[//] STEPS_END

0 commit comments

Comments
 (0)