From cf84320b7ee066243edc808b370ad4ee2bd60c9f Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Fri, 28 Jun 2024 17:49:00 +0800
Subject: [PATCH 1/2] refactor: vue sdk integration guide

---
 .../fragments/_configure-redirect-uri.mdx     |  5 +-
 docs/quick-starts/framework/vue/README.mdx    | 32 +++---
 .../framework/vue/_get-user-information.mdx   | 97 +++++++++++++++++++
 .../vue/_handle-authentication-status.mdx     | 29 ------
 .../framework/vue/_handle-redirect.mdx        | 13 ++-
 .../vue/_implement-sign-in-and-sign-out.mdx   | 43 ++++++++
 .../framework/vue/_implement-sign-in.mdx      | 35 -------
 .../framework/vue/_implement-sign-out.mdx     | 16 ---
 .../framework/vue/_init-client.mdx            |  9 +-
 .../framework/vue/_installation.mdx           |  8 +-
 .../framework/vue/_scopes-and-claims-code.mdx | 19 ----
 .../code/_config-organization-code.md         |  4 +-
 .../code/_config-resources-code.md            | 13 +--
 .../_config-resources-with-scopes-code.md     |  7 +-
 ...onfig-resources-with-shared-scopes-code.md |  7 +-
 .../code/_get-access-token-code.md            |  2 +-
 .../_get-organization-access-token-code.md    |  6 +-
 .../build-with-logto/_integrate-sdk-vue.mdx   | 16 +--
 18 files changed, 187 insertions(+), 174 deletions(-)
 create mode 100644 docs/quick-starts/framework/vue/_get-user-information.mdx
 delete mode 100644 docs/quick-starts/framework/vue/_handle-authentication-status.mdx
 create mode 100644 docs/quick-starts/framework/vue/_implement-sign-in-and-sign-out.mdx
 delete mode 100644 docs/quick-starts/framework/vue/_implement-sign-in.mdx
 delete mode 100644 docs/quick-starts/framework/vue/_implement-sign-out.mdx
 delete mode 100644 docs/quick-starts/framework/vue/_scopes-and-claims-code.mdx

diff --git a/docs/quick-starts/fragments/_configure-redirect-uri.mdx b/docs/quick-starts/fragments/_configure-redirect-uri.mdx
index ef328291028..900e2e7723d 100644
--- a/docs/quick-starts/fragments/_configure-redirect-uri.mdx
+++ b/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" />
diff --git a/docs/quick-starts/framework/vue/README.mdx b/docs/quick-starts/framework/vue/README.mdx
index c108c8a4517..f9d947db925 100644
--- a/docs/quick-starts/framework/vue/README.mdx
+++ b/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 />
diff --git a/docs/quick-starts/framework/vue/_get-user-information.mdx b/docs/quick-starts/framework/vue/_get-user-information.mdx
new file mode 100644
index 00000000000..aa0314ea7b7
--- /dev/null
+++ b/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 />
diff --git a/docs/quick-starts/framework/vue/_handle-authentication-status.mdx b/docs/quick-starts/framework/vue/_handle-authentication-status.mdx
deleted file mode 100644
index 3246a7647f3..00000000000
--- a/docs/quick-starts/framework/vue/_handle-authentication-status.mdx
+++ /dev/null
@@ -1,29 +0,0 @@
-In Logto SDK, generally we can use `logtoClient.isAuthenticated` to check the authentication status, if the user is signed in, the value will be `true`, otherwise, the value will be `false`.
-
-In Logto Vue SDK, the `isAuthenticated` status can be checked by using the `useLogto` composable. In the example code below, we can use it to programmatically show and hide the sign-in and sign-out buttons. Also we'll use `getIdTokenClaims` to get the ID of the currently logged-in user.
-
-```tsx
-<script setup lang="ts">
-import { useLogto } from "@logto/vue";
-import { ref } from "vue";
-
-const { isAuthenticated, getIdTokenClaims, signIn, signOut } = useLogto();
-const userId = ref<string>();
-
-if (isAuthenticated.value) {
-  (async () => {
-    const claims = await getIdTokenClaims();
-    userId.value = claims.sub;
-  })();
-}
-
-</script>
-```
-
-```html
-<template>
-  <p v-if="userId">Logged in as {{ userId }}</p>
-  <button v-if="!isAuthenticated" @click="onClickSignIn">Sign In</button>
-  <button v-else @click="onClickSignOut">Sign Out</button>
-</template>
-```
diff --git a/docs/quick-starts/framework/vue/_handle-redirect.mdx b/docs/quick-starts/framework/vue/_handle-redirect.mdx
index 45f4935b38d..9ae0cf46a09 100644
--- a/docs/quick-starts/framework/vue/_handle-redirect.mdx
+++ b/docs/quick-starts/framework/vue/_handle-redirect.mdx
@@ -1,14 +1,13 @@
-### Handle redirect
-
 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 component:
+First let's create a callback page:
 
-```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
 });
 ```
 
@@ -21,7 +20,7 @@ const { isLoading } = useHandleSignInCallback(() => {
 
 Finally 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: [
diff --git a/docs/quick-starts/framework/vue/_implement-sign-in-and-sign-out.mdx b/docs/quick-starts/framework/vue/_implement-sign-in-and-sign-out.mdx
new file mode 100644
index 00000000000..02ba072c895
--- /dev/null
+++ b/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 />
diff --git a/docs/quick-starts/framework/vue/_implement-sign-in.mdx b/docs/quick-starts/framework/vue/_implement-sign-in.mdx
deleted file mode 100644
index dfdb9080d13..00000000000
--- a/docs/quick-starts/framework/vue/_implement-sign-in.mdx
+++ /dev/null
@@ -1,35 +0,0 @@
-import redirectUriFigure from '../../assets/web-redirect-uri.png';
-import ConfigureRedirectUri from '../../fragments/_configure-redirect-uri.mdx';
-import SignInNote from '../../fragments/_sign-in-note.mdx';
-import SignInFlowSummary from '../../fragments/_web-sign-in-flow-summary.mdx';
-
-import HandleRedirect from './_handle-redirect.mdx';
-
-<SignInFlowSummary />
-
-#### Configure sign-in redirect URI
-
-<ConfigureRedirectUri figureSrc={redirectUriFigure} redirectUri="http://localhost:3000/callback" />
-
-#### Implement a sign-in button
-
-We provide two composables `useHandleSignInCallback()` and `useLogto()` which can help you easily manage the authentication flow.
-
-<SignInNote calling=".signIn()" />
-
-Go back to your IDE/editor, use the following code to implement the sign-in button:
-
-```ts
-import { useLogto } from '@logto/vue';
-
-const { signIn } = useLogto();
-const onClickSignIn = () => signIn('http://localhost:3000/callback');
-```
-
-```html
-<button @click="onClickSignIn">Sign In</button>
-```
-
-#### Handle redirect
-
-<HandleRedirect />
diff --git a/docs/quick-starts/framework/vue/_implement-sign-out.mdx b/docs/quick-starts/framework/vue/_implement-sign-out.mdx
deleted file mode 100644
index 484dd18aba7..00000000000
--- a/docs/quick-starts/framework/vue/_implement-sign-out.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
-import SignOutNote from '../../fragments/_web-sign-out-note.md';
-
-<SignOutNote />
-
-#### Implement a sign-out button
-
-```ts
-import { useLogto } from '@logto/vue';
-
-const { signOut } = useLogto();
-const onClickSignOut = () => signOut('http://localhost:3000');
-```
-
-```html
-<button @click="onClickSignOut">Sign Out</button>
-```
diff --git a/docs/quick-starts/framework/vue/_init-client.mdx b/docs/quick-starts/framework/vue/_init-client.mdx
index 8fae64eba1c..1363ff56578 100644
--- a/docs/quick-starts/framework/vue/_init-client.mdx
+++ b/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>',
 };
 
diff --git a/docs/quick-starts/framework/vue/_installation.mdx b/docs/quick-starts/framework/vue/_installation.mdx
index f393812519e..0139dda0cd4 100644
--- a/docs/quick-starts/framework/vue/_installation.mdx
+++ b/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>
diff --git a/docs/quick-starts/framework/vue/_scopes-and-claims-code.mdx b/docs/quick-starts/framework/vue/_scopes-and-claims-code.mdx
deleted file mode 100644
index 2607c651d21..00000000000
--- a/docs/quick-starts/framework/vue/_scopes-and-claims-code.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
-```tsx
-import { createLogto, UserScope } from "@logto/vue";
-
-...
-
-app.use(createLogto, {
-  endpoint: '<your-logto-endpoint>',
-  appId: '<your-application-id>',
-  scopes: [
-    UserScope.Email,
-    UserScope.Phone,
-    UserScope.CustomData,
-    UserScope.Identities,
-    UserScope.Organizations,
-  ],
-});
-
-app.mount("#app");
-```
diff --git a/docs/quick-starts/framework/vue/api-resources/code/_config-organization-code.md b/docs/quick-starts/framework/vue/api-resources/code/_config-organization-code.md
index d2e25c84325..20cdcfe1c2a 100644
--- a/docs/quick-starts/framework/vue/api-resources/code/_config-organization-code.md
+++ b/docs/quick-starts/framework/vue/api-resources/code/_config-organization-code.md
@@ -1,8 +1,10 @@
-```ts
+```ts title="main.ts"
 import { createLogto, UserScope } from '@logto/vue';
 
 app.use(createLogto, {
   // ...other configs
+  // highlight-start
   scopes: [UserScope.Organizations],
+  // highlight-end
 });
 ```
diff --git a/docs/quick-starts/framework/vue/api-resources/code/_config-resources-code.md b/docs/quick-starts/framework/vue/api-resources/code/_config-resources-code.md
index 310a6493659..0eba4403234 100644
--- a/docs/quick-starts/framework/vue/api-resources/code/_config-resources-code.md
+++ b/docs/quick-starts/framework/vue/api-resources/code/_config-resources-code.md
@@ -1,14 +1,9 @@
-```tsx
-import { createLogto } from "@logto/vue";
-
-...
+```ts title="main.ts"
+import { createLogto } from '@logto/vue';
 
 app.use(createLogto, {
-  endpoint: '<your-logto-endpoint>',
-  appId: '<your-application-id>',
-  // Add API resources
+  // ...other configs
+  // highlight-next-line
   resources: ['https://shopping.your-app.com/api', 'https://store.your-app.com/api'],
 });
-
-app.mount("#app");
 ```
diff --git a/docs/quick-starts/framework/vue/api-resources/code/_config-resources-with-scopes-code.md b/docs/quick-starts/framework/vue/api-resources/code/_config-resources-with-scopes-code.md
index 7ba84508f2b..33cd03ce3e5 100644
--- a/docs/quick-starts/framework/vue/api-resources/code/_config-resources-with-scopes-code.md
+++ b/docs/quick-starts/framework/vue/api-resources/code/_config-resources-with-scopes-code.md
@@ -1,10 +1,11 @@
-```tsx
+```ts title="main.ts"
 import { createLogto } from '@logto/vue';
 
 app.use(createLogto, {
-  endpoint: '<your-logto-endpoint>',
-  appId: '<your-application-id>',
+  // ...other configs
+  // highlight-start
   scopes: ['shopping:read', 'shopping:write', 'store:read', 'store:write'],
   resources: ['https://shopping.your-app.com/api', 'https://store.your-app.com/api'],
+  // highlight-end
 });
 ```
diff --git a/docs/quick-starts/framework/vue/api-resources/code/_config-resources-with-shared-scopes-code.md b/docs/quick-starts/framework/vue/api-resources/code/_config-resources-with-shared-scopes-code.md
index 9a0e8330cae..eb7242653d6 100644
--- a/docs/quick-starts/framework/vue/api-resources/code/_config-resources-with-shared-scopes-code.md
+++ b/docs/quick-starts/framework/vue/api-resources/code/_config-resources-with-shared-scopes-code.md
@@ -1,10 +1,11 @@
-```tsx
+```ts title="main.ts"
 import { createLogto } from '@logto/vue';
 
 app.use(createLogto, {
-  endpoint: '<your-logto-endpoint>',
-  appId: '<your-application-id>',
+  // ...other configs
+  // highlight-start
   scopes: ['read', 'write'],
   resources: ['https://shopping.your-app.com/api', 'https://store.your-app.com/api'],
+  // highlight-end
 });
 ```
diff --git a/docs/quick-starts/framework/vue/api-resources/code/_get-access-token-code.md b/docs/quick-starts/framework/vue/api-resources/code/_get-access-token-code.md
index c50ab87afa7..3c68e5ca511 100644
--- a/docs/quick-starts/framework/vue/api-resources/code/_get-access-token-code.md
+++ b/docs/quick-starts/framework/vue/api-resources/code/_get-access-token-code.md
@@ -1,4 +1,4 @@
-```tsx
+```ts title="views/HomeView.vue"
 import { useLogto, type UserInfoResponse } from '@logto/vue';
 
 const { isAuthenticated, getAccessToken } = useLogto();
diff --git a/docs/quick-starts/framework/vue/api-resources/code/_get-organization-access-token-code.md b/docs/quick-starts/framework/vue/api-resources/code/_get-organization-access-token-code.md
index 978e52d6b4f..cc5c53ef400 100644
--- a/docs/quick-starts/framework/vue/api-resources/code/_get-organization-access-token-code.md
+++ b/docs/quick-starts/framework/vue/api-resources/code/_get-organization-access-token-code.md
@@ -1,4 +1,4 @@
-```tsx
+```ts title="views/OrganizationsView.vue"
 import { useLogto } from '@logto/vue';
 import { onMounted, ref } from 'vue';
 
@@ -12,7 +12,7 @@ onMounted(async () => {
   organizationIds.value = claims?.organizations;
 });
 
-const onClickFetchOrgToken = async (organizationId: string) => {
+const onClickFetchOrganizationToken = async (organizationId: string) => {
   console.log('raw token', await getOrganizationToken(organizationId));
   console.log('claims', await getOrganizationTokenClaims(organizationId));
 };
@@ -23,7 +23,7 @@ const onClickFetchOrgToken = async (organizationId: string) => {
   <ul>
     <li v-for="organizationId of organizationIds" v-bind:key="organizationId">
       <span>{{ organizationId }}</span>
-      <button type="button" @click="onClickFetchOrgToken(organizationId)">
+      <button type="button" @click="onClickFetchOrganizationToken(organizationId)">
         fetch token (see console)
       </button>
     </li>
diff --git a/tutorial/build-with-logto/_integrate-sdk-vue.mdx b/tutorial/build-with-logto/_integrate-sdk-vue.mdx
index 3ffbc4202d4..e0f6a6897d3 100644
--- a/tutorial/build-with-logto/_integrate-sdk-vue.mdx
+++ b/tutorial/build-with-logto/_integrate-sdk-vue.mdx
@@ -1,7 +1,5 @@
 import GuideTip from '../../docs/quick-starts/framework/vue/_guide-tip.mdx';
-import HandleAuthenticationStatus from '../../docs/quick-starts/framework/vue/_handle-authentication-status.mdx';
-import ImplementSignIn from '../../docs/quick-starts/framework/vue/_implement-sign-in.mdx';
-import ImplementSignOut from '../../docs/quick-starts/framework/vue/_implement-sign-out.mdx';
+import ImplementSignInAndSignOut from '../../docs/quick-starts/framework/vue/_implement-sign-in-and-sign-out.mdx';
 import InitClient from '../../docs/quick-starts/framework/vue/_init-client.mdx';
 import Installation from '../../docs/quick-starts/framework/vue/_installation.mdx';
 
@@ -17,16 +15,8 @@ import TestYourIntegration from './fragments/_test-your-integration.mdx';
 
 <InitClient />
 
-### Implement sign-in
+### Implement sign-in and sign-out
 
-<ImplementSignIn />
-
-### Implement sign-out
-
-<ImplementSignOut />
-
-### Handle authentication status
-
-<HandleAuthenticationStatus />
+<ImplementSignInAndSignOut />
 
 <TestYourIntegration sdk="Vue" />

From 92baaa15943b6f7d64b92ae17bf14c9d256adecc Mon Sep 17 00:00:00 2001
From: Gao Sun <gao@silverhand.io>
Date: Mon, 1 Jul 2024 13:04:22 +0800
Subject: [PATCH 2/2] docs: improve content

---
 docs/quick-starts/framework/vue/_handle-redirect.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/quick-starts/framework/vue/_handle-redirect.mdx b/docs/quick-starts/framework/vue/_handle-redirect.mdx
index 9ae0cf46a09..14d750e17de 100644
--- a/docs/quick-starts/framework/vue/_handle-redirect.mdx
+++ b/docs/quick-starts/framework/vue/_handle-redirect.mdx
@@ -1,4 +1,4 @@
-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.
+There are still things to do after the user is redirected back to your application from Logto. Let's handle it properly.
 
 First let's create a callback page:
 
@@ -18,7 +18,7 @@ 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 title="router/index.ts"
 // Assuming vue-router