refactor: vue sdk integration guide

docs/quick-starts/fragments/_configure-redirect-uri.mdx

@@ -1,6 +1,3 @@
-<p>
-  Let&apos;s switch to the Application details page of Logto Console. Add a Redirect URI{' '}
-  <code>{props.redirectUri}</code> and click &quot;Save changes&quot;.
-</p>
+Let's switch to the Application details page of Logto Console. Add a Redirect URI <code>{props.redirectUri}</code> and click "Save changes".
 
 <img alt="Redirect URI in Logto Console" src={props.figureSrc} width="600px" />

docs/quick-starts/framework/vue/README.mdx

@@ -8,16 +8,12 @@ sidebar_custom_props:
 import ApiResourcesDescription from '../../fragments/_api-resources-description.md';
 import Checkpoint from '../../fragments/_checkpoint-test-your-application.md';
 import FurtherReadings from '../../fragments/_further-readings.md';
-import GetUserInfoApis from '../../fragments/_get-user-info-apis.mdx';
-import ScopesAndClaims from '../../fragments/_scopes-and-claims.mdx';
 
+import GetUserInformation from './_get-user-information.mdx';
 import GuideTip from './_guide-tip.mdx';
-import HandleAuthenticationStatus from './_handle-authentication-status.mdx';
-import ImplementSignIn from './_implement-sign-in.mdx';
-import ImplementSignOut from './_implement-sign-out.mdx';
+import ImplementSignInAndSignOut from './_implement-sign-in-and-sign-out.mdx';
 import InitClient from './_init-client.mdx';
 import Installation from './_installation.mdx';
-import ScopesAndClaimsCode from './_scopes-and-claims-code.mdx';
 import ConfigApiResources from './api-resources/_config-api-resources.mdx';
 import FetchAccessTokenForApiResources from './api-resources/_fetch-access-token-for-api-resources.mdx';
 import FetchOrganizationTokenForUser from './api-resources/_fetch-organization-token-for-user.mdx';
@@ -44,25 +40,13 @@ This guide will show you how to integrate Logto into your Vue 3 application.
 
 <InitClient />
 
-### Implement sign-in
-
-<ImplementSignIn />
-
-### Implement sign-out
-
-<ImplementSignOut />
-
-### Handle authentication status
-
-<HandleAuthenticationStatus />
+<ImplementSignInAndSignOut />
 
 <Checkpoint />
 
 ## Get user information
 
-<GetUserInfoApis getIdTokenClaimsApi="getIdTokenClaims" fetchUserInfoApi="fetchUserInfo" />
-
-<ScopesAndClaims configScopesCode={<ScopesAndClaimsCode />} />
+<GetUserInformation />
 
 ## API resources
 
@@ -80,6 +64,14 @@ This guide will show you how to integrate Logto into your Vue 3 application.
 
 <FetchOrganizationTokenForUser />
 
+### Attach access token to request headers
+
+Put the token in the `Authorization` field of HTTP headers with the Bearer format (`Bearer YOUR_TOKEN`), and you are good to go.
+
+:::note
+The Bearer Token's integration flow may vary based on the framework or requester you are using. Choose your own way to apply the request `Authorization` header.
+:::
+
 ## Further readings
 
 <FurtherReadings />

docs/quick-starts/framework/vue/_get-user-information.mdx

@@ -0,0 +1,97 @@
+import CodeBlock from '@theme/CodeBlock';
+
+import ClaimsNeedNetworkRequest from '../../fragments/_claims-need-network-request.mdx';
+import FindUserInfoMissing from '../../fragments/_find-user-info-missing.mdx';
+import ScopesAndClaims from '../../fragments/_scopes-and-claims.mdx';
+import ScopesAndClaimsIntroduction from '../../fragments/_scopes-claims-introduction.md';
+
+### Display user information
+
+To display the user's information, you can use the `getIdTokenClaims()` method. For example, in your Home page:
+
+```ts title="views/HomeView.vue"
+import { useLogto, type IdTokenClaims } from '@logto/vue';
+import { ref } from 'vue';
+
+const { isAuthenticated, getIdTokenClaims } = useLogto();
+const user = ref<IdTokenClaims>();
+
+if (isAuthenticated.value) {
+  (async () => {
+    const claims = await getIdTokenClaims();
+    user.value = claims;
+  })();
+}
+```
+
+```html
+<template>
+  <div v-if="isAuthenticated && user">
+    <table class="table">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Value</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(value, key) in user" v-bind:key="key">
+          <td>{{ key }}</td>
+          <td>{{ typeof value === "string" ? value : JSON.stringify(value) }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+```
+
+### Request additional claims
+
+<FindUserInfoMissing method="getIdTokenClaims()" />
+
+<ScopesAndClaimsIntroduction />
+
+To request additional scopes, you can configure the Logto provider configs:
+
+```ts title="main.ts"
+import { createLogto, UserScope } from '@logto/vue';
+
+const app = createApp(App);
+
+app.use(createLogto, {
+  // ...other configs
+  // highlight-start
+  scopes: [
+    UserScope.Email,
+    UserScope.Phone,
+    UserScope.CustomData,
+    UserScope.Identities,
+    UserScope.Organizations,
+  ],
+  // highlight-end
+});
+app.use(router);
+```
+
+Then you can access the additional claims in the return value of `getIdTokenClaims()`:
+
+```ts
+const claims = await getIdTokenClaims();
+// Now you can access additional claims `claims.email`, `claims.phone`, etc.
+```
+
+<ClaimsNeedNetworkRequest
+  type="method"
+  method="fetchUserInfo()"
+  codeSnippet={
+    <CodeBlock language="tsx">{`const { fetchUserInfo } = useLogto();
+
+const userInfo = await fetchUserInfo();
+
+// Now you can access the claim \`userInfo.custom_data\``}</CodeBlock>
+}
+/>
+
+### Scopes and claims
+
+<ScopesAndClaims />

docs/quick-starts/framework/vue/_handle-redirect.mdx

@@ -1,14 +1,13 @@
-### Handle redirect
+There are still things to do after the user is redirected back to your application from Logto. Let's handle it properly.
 
-We're almost there! In the last step, we use `http://localhost:3000/callback` as the Redirect URI, and now we need to handle it properly.
+First let's create a callback page:
 
-First let's create a callback component:
-
-```ts
-// CallbackView.vue
+```ts title="views/CallbackView.vue"
 import { useHandleSignInCallback } from '@logto/vue';
+import router from '@/router';
+
 const { isLoading } = useHandleSignInCallback(() => {
-  // Navigate to root path when finished
+  // Do something when finished, e.g. redirect to home page
 });
 ```
 
@@ -19,9 +18,9 @@ const { isLoading } = useHandleSignInCallback(() => {
 </template>
 ```
 
-Finally insert the code below in your `/callback` route which does NOT require authentication:
+Insert the code below in your `/callback` route which does NOT require authentication:
 
-```ts
+```ts title="router/index.ts"
 // Assuming vue-router
 const router = createRouter({
   routes: [

docs/quick-starts/framework/vue/_implement-sign-in-and-sign-out.mdx

@@ -0,0 +1,43 @@
+import SignInNote from '../../fragments/_sign-in-note.mdx';
+import AssumingUrl from '../../fragments/_web-assuming-url.md';
+import WebConfigureRedirectUris from '../../fragments/_web-configure-redirect-uris.mdx';
+import SignInFlowSummary from '../../fragments/_web-sign-in-flow-summary.mdx';
+import SignOutNote from '../../fragments/_web-sign-out-note.md';
+
+import HandleRedirect from './_handle-redirect.mdx';
+
+### Configure redirect URIs
+
+<SignInFlowSummary />
+
+<AssumingUrl />
+
+<WebConfigureRedirectUris />
+
+### Handle redirect
+
+<HandleRedirect />
+
+### Implement sign-in and sign-out
+
+We provide two composables `useHandleSignInCallback()` and `useLogto()` which can help you easily manage the authentication flow.
+
+<SignInNote calling=".signIn()" />
+
+```tsx title="views/HomeView.vue"
+import { useLogto } from '@logto/vue';
+
+const { signIn, signOut, isAuthenticated } = useLogto();
+
+const onClickSignIn = () => signIn('http://localhost:3000/callback');
+const onClickSignOut = () => signOut('http://localhost:3000');
+```
+
+```html
+<template>
+  <button v-if="!isAuthenticated" @click="onClickSignIn">Sign In</button>
+  <button v-else @click="onClickSignOut">Sign Out</button>
+</template>
+```
+
+<SignOutNote />

docs/quick-starts/framework/vue/_init-client.mdx

@@ -1,17 +1,12 @@
-import AssumingUrl from '../../fragments/_web-assuming-url.md';
-
-<AssumingUrl />
-
 Import and use `createLogto` to install Logto plugin:
 
-```ts
-// main.ts
+```ts title="main.ts"
 import { createLogto, LogtoConfig } from '@logto/vue';
 import { createApp } from 'vue';
 import App from './App.vue';
 
 const config: LogtoConfig = {
-  endpoint: '<your-logto-endpoint>', // E.g. http://localhost:3001
+  endpoint: '<your-logto-endpoint>',
   appId: '<your-application-id>',
 };
 

docs/quick-starts/framework/vue/_installation.mdx

@@ -10,17 +10,17 @@ npm i @logto/vue
 ```
 
   </TabItem>
-  <TabItem value="yarn" label="Yarn">
+  <TabItem value="pnpm" label="pnpm">
 
 ```bash
-yarn add @logto/vue
+pnpm add @logto/vue
 ```
 
   </TabItem>
-  <TabItem value="pnpm" label="pnpm">
+  <TabItem value="yarn" label="yarn">
 
 ```bash
-pnpm add @logto/vue
+yarn add @logto/vue
 ```
 
   </TabItem>