refactor(console): update vue sdk integration guide

packages/console/src/assets/docs/tutorial/integrate-sdk/vue.mdx

@@ -2,9 +2,10 @@ import UriInputField from '@mdx/components/UriInputField';
 import Step from '@mdx/components/Step';
 import Tabs from '@mdx/components/Tabs';
 import TabItem from '@mdx/components/TabItem';
+import Alert from '@/components/Alert';
 
 <Step
-  title="Install SDK"
+  title="Add Logto SDK as a dependency"
   subtitle="Please select your favorite package manager"
   index={0}
   activeIndex={props.activeStepIndex}
@@ -31,34 +32,31 @@ yarn add @logto/vue
 pnpm add @logto/vue
 ```
 
-</TabItem>
-<TabItem value="script" label="script">
-
-{/* This should be CDN URL */}
-```html
-<script src="https://logto.io/js/logto-sdk-vue/0.1.0/logto-sdk-vue.production.js" />
-```
-
 </TabItem>
 </Tabs>
 </Step>
+
 <Step
-  title="Initiate LogtoClient"
+  title="Init LogtoClient"
   subtitle="1 step"
   index={1}
   activeIndex={props.activeStepIndex}
   onButtonClick={() => props.onNext(2)}
 >
 
-`import` and use `createLogto` to install Logto plugin:
+<Alert>
+  We only support Vue 3 Composition API at this point. Will add support to Vue Options API and possibly Vue 2 in future releases.
+</Alert>
+
+Import and use `createLogto` to install Logto plugin:
 
 <pre>
 <code className="language-ts">
 {`import { createLogto, LogtoConfig } from '@logto/vue';
 
 const config: LogtoConfig = {
-  appId: '${props.appId}',
   endpoint: '${props.endpoint}',
+  appId: '${props.appId}',
 };
 
 const app = createApp(App);
@@ -69,83 +67,85 @@ app.mount("#app");`}
 </pre>
 
 </Step>
+
 <Step
   title="Sign In"
-  subtitle="2 steps"
+  subtitle="3 steps"
   index={2}
   activeIndex={props.activeStepIndex}
   onButtonClick={() => props.onNext(3)}
 >
 
-We provide two composables `useHandleSignInCallback()` and `useLogto()` which can help you easily manage the authentication flow. 
+<Alert>
+  In the following steps, we assume your app is running on <code>http://localhost:1234</code>.
+</Alert>
 
-### Set Up Callback Route
+### Configure Redirect URI
 
-In order to handle what comes from Logto, the application needs to have a dedicated callback route that does NOT require authentication.
+First, let’s enter your redirect URI. E.g. `http://localhost:1234/callback`.
-
-First, let’s enter your redirect URI. E.g. `http://localhost:1234/callback`
 
 <UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="Redirect URI" />
 
-Then let's create a callback component:
+### Implement a sign-in button
+
+We provide two composables `useHandleSignInCallback()` and `useLogto()`, which can help you easily manage the authentication flow. 
+
+Go back to your IDE/editor, use the following code to implement the sign-in button:
+
+```ts
+import { useLogto } from "@logto/vue";
+
+const { signIn, isAuthenticated } = useLogto();
+const onClickSignIn = () => signIn('http://localhost:1234/callback');
+```
 
 ```html
-<script setup lang="ts">
+<div v-if="isAuthenticated">
-  import { useHandleSignInCallback } from "@logto/vue";
+  <div>Signed in</div>
-  const { isLoading } = useHandleSignInCallback();
+</div>
-</script>
+<div v-else>
+  <button @click="onClickSignIn">Sign In</button>
+</div>
+```
 
+### Handle redirect
+
+We're almost there! In the last step, we use `http://localhost:1234/callback` as the Redirect URI, and now we need to handle it properly.
+
+First let's create a callback component:
+
+```ts
+// CallbackView.vue
+import { useHandleSignInCallback } from '@logto/vue';
+const { isLoading } = useHandleSignInCallback(() => {
+  // Navigate to root path when finished
+});
+```
+
+```html
 <template>
   <!-- When it's working in progress -->
   <p v-if="isLoading">Redirecting...</p>
 </template>
 ```
 
-Next, we need to link the callback component with the route. Let's say the path is `/callback` and we are using `vue-router`:
+Finally insert the code below to create a `/callback` route which does NOT require authentication:
 
 ```ts
+// Assuming vue-router
 const router = createRouter({
   routes: [
     {
-      path: "/callback",
+      path: '/callback',
-      name: "callback",
+      name: 'callback',
       component: CallbackView,
     },
-  ]
+  ],
 });
 ```
 
-### Make a Sign In Button
-
-```ts
-import { useLogto } from "@logto/vue";
-
-const { signIn } = useLogto();
-const onClickSignIn = () => signIn(redirectUrl);
-```
-
-```html
-<button @click="onClickSignIn">Sign In</button>
-```
-
-### Retrieve Authentication Status
-
-```ts
-import { useLogto } from '@logto/vue';
-
-const { isAuthenticated } = useLogto();
-```
-
-```html
-<div v-if="!isAuthenticated">
-  <!-- E.g. navigate to the sign in page -->
-</div>
-<div v-else>
-  <!-- Do things when user is authenticated -->
-</div>
-```
-
 </Step>
+
 <Step
   title="Sign Out"
   subtitle="1 step"
@@ -154,13 +154,14 @@ const { isAuthenticated } = useLogto();
   onButtonClick={() => props.onNext(4)}
 >
 
-Calling `.signOut()` will clear all the Logto data in memory and LocalStorage, if there is any.
+Calling `.signOut()` will clear all the Logto data in memory and localStorage if they exist.
 
-To make the user come back to your application after signing out,
+After signing out, it'll be great to redirect user back to your website. Let's add `http://localhost:1234` as the Post Sign-out URI below, and use it as the parameter when calling `.signOut()`.
-it's necessary to add `http://localhost:1234` as one of the Post Sign Out URIs and use the URL as the parameter when calling `.signOut()`.
 
 <UriInputField appId={props.appId} isSingle={!props.isCompact} name="postLogoutRedirectUris" title="Post Sign-out Redirect URI" />
 
+### Implement a sign-out button
+
 ```ts
 import { useLogto } from "@logto/vue";
 
@@ -173,9 +174,10 @@ const onClickSignOut = () => signOut('http://localhost:1234');
 ```
 
 </Step>
+
 <Step
-  title="Further Readings"
+  title="Further readings"
-  subtitle="3 steps"
+  subtitle="4 articles"
   index={4}
   activeIndex={props.activeStepIndex}
   buttonText="admin_console.general.done"
@@ -183,8 +185,9 @@ const onClickSignOut = () => signOut('http://localhost:1234');
   onButtonClick={props.onComplete}
 >
 
-- [SDK Documentation](https://link-url-here.org)
+- [Customize sign-in experience](https://docs.logto.io/docs/recipes/customize-sie)
-- [OIDC Documentation](https://link-url-here.org)
+- [Enable SMS or email passcode sign-in](https://docs.logto.io/docs/tutorials/get-started/enable-passcode-sign-in)
-- [Calling API to fetch accessToken](https://link-url-here.org)
+- [Enable social sign-in](https://docs.logto.io/docs/tutorials/get-started/enable-social-sign-in)
+- [Protect your API](https://docs.logto.io/docs/recipes/protect-your-api)
 
 </Step>

packages/console/src/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx

@@ -2,10 +2,11 @@ import UriInputField from '@mdx/components/UriInputField';
 import Step from '@mdx/components/Step';
 import Tabs from '@mdx/components/Tabs';
 import TabItem from '@mdx/components/TabItem';
+import Alert from '@/components/Alert';
 
 <Step
-  title="安装 SDK"
+  title="将 Logto SDK 添加至依赖"
-  subtitle="请选择你喜欢的包管理工具"
+  subtitle="选择你熟悉的包管理工具"
   index={0}
   activeIndex={props.activeStepIndex}
   onButtonClick={() => props.onNext(1)}
@@ -31,34 +32,31 @@ yarn add @logto/vue
 pnpm add @logto/vue
 ```
 
-</TabItem>
-<TabItem value="script" label="script">
-
-{/* This should be CDN URL */}
-```html
-<script src="https://logto.io/js/logto-sdk-vue/0.1.0/logto-sdk-vue.production.js" />
-```
-
 </TabItem>
 </Tabs>
 </Step>
+
 <Step
   title="初始化 LogtoClient"
-  subtitle="1 step"
+  subtitle="共 1 步"
   index={1}
   activeIndex={props.activeStepIndex}
   onButtonClick={() => props.onNext(2)}
 >
 
-`import` 并使用 `createLogto` 以插件的形式安装 Logto:
+<Alert>
+  目前仅支持 Vue 3 的 组合式（Composition）API，我们会在后续版本中陆续添加对选项式（Options）API 和 Vue 2 的支持。
+</Alert>
+
+Import 并使用 `createLogto` 以插件的形式安装 Logto:
 
 <pre>
 <code className="language-ts">
 {`import { createLogto, LogtoConfig } from '@logto/vue';
 
 const config: LogtoConfig = {
-  appId: '${props.appId}',
   endpoint: '${props.endpoint}',
+  appId: '${props.appId}',
 };
 
 const app = createApp(App);
@@ -69,100 +67,101 @@ app.mount("#app");`}
 </pre>
 
 </Step>
+
 <Step
-  title="Sign In"
+  title="登录"
-  subtitle="2 steps"
+  subtitle="共 3 步"
   index={2}
   activeIndex={props.activeStepIndex}
   onButtonClick={() => props.onNext(3)}
 >
 
-我们提供了两个组合式 API `useHandleSignInCallback()` 和 `useLogto()`，它们可以帮助你轻松完成登录认证流程。 
+<Alert>
+  在如下代码示例中, 我们均先假设你的 Vue 应用运行在 <code>http://localhost:1234</code> 上。
+</Alert>
 
-### 设置回调路由
+### 配置 Redirect URI
 
-为了让登录认证流程能够正常工作，我们需要设置一个回调路由，以便在认证结束后跳转回你的应用时它能够处理认证结果。（请注意：此路由地址不能受登录保护）
+首先，我们来添加 Redirect URI，如：`http://localhost:1234/callback`。
-
-但首先, 让我们先在下方输入 redirect URI，如：`http://localhost:1234/callback`
 
 <UriInputField appId={props.appId} isSingle={!props.isCompact} name="redirectUris" title="Redirect URI" />
 
-然后，让我们来创建一个 CallbackView 组件：
+### 实现登录按钮
 
-```html
+我们提供了两个组合式 API `useHandleSignInCallback()` 和 `useLogto()`，它们可以帮助你轻松完成登录认证流程。
-<script setup lang="ts">
-  import { useHandleSignInCallback } from "@logto/vue";
-  const { isLoading } = useHandleSignInCallback();
-</script>
 
-<template>
+返回你的 IDE 或编辑器，使用如下代码来实现一个登录按钮：
-  <!-- 当登录认证尚未完成时 -->
-  <p v-if="isLoading">页面跳转中...</p>
-</template>
-```
-
-接下来，我们就可以在路由表中添加这个回调路由。假设我们的路由地址定义为 `/callback`，且使用的路由工具为 `vue-router`:
-
-```ts
-const router = createRouter({
-  ...
-  routes: [
-    {
-      path: "/callback",
-      name: "callback",
-      component: CallbackView,
-    },
-  ]
-});
-```
-
-### 创建一个登录按钮
 
 ```ts
 import { useLogto } from "@logto/vue";
 
-const { signIn } = useLogto();
+const { signIn, isAuthenticated } = useLogto();
-const onClickSignIn = () => signIn(redirectUrl);
+const onClickSignIn = () => signIn('http://localhost:1234/callback');
 ```
 
 ```html
-<button @click="onClickSignIn">登录</button>
+<div v-if="isAuthenticated">
-```
+  <div>已登录</div>
-
-### 判断当前登录状态
-
-```ts
-import { useLogto } from '@logto/vue';
-
-const { isAuthenticated } = useLogto();
-```
-
-```html
-<div v-if="!isAuthenticated">
-  <!-- 跳转到登录页面 -->
 </div>
 <div v-else>
-  <!-- 实现用户登录之后的业务逻辑 -->
+  <button @click="onClickSignIn">登录</button>
 </div>
 ```
 
+### 处理重定向
+
+马上就要大功告成！在上一步，我们将 `http://localhost:1234/callback` 用作 Redirect URI，现在我们需要对其妥善处理。
+
+首先，让我们来创建一个 Callback 组件：
+
+```ts
+// CallbackView.vue
+import { useHandleSignInCallback } from '@logto/vue';
+const { isLoading } = useHandleSignInCallback(() => {
+  // 完成时跳转至根路由
+});
+```
+
+```html
+<template>
+  <!-- 当登录认证尚未完成时 -->
+  <p v-if="isLoading">正在重定向...</p>
+</template>
+```
+
+最后我们插入如下代码来实现一个 _无需_ 登录的 `/callback` 路由：
+
+```ts
+// 假设用 vue-router
+const router = createRouter({
+  routes: [
+    {
+      path: '/callback',
+      name: 'callback',
+      component: CallbackView,
+    },
+  ],
+});
+```
+
 </Step>
+
 <Step
-  title="Sign Out"
+  title="退出登录"
-  subtitle="1 step"
+  subtitle="共 1 步"
   index={3}
   activeIndex={props.activeStepIndex}
-  buttonText="admin_console.general.done"
-  buttonType="primary"
   onButtonClick={() => props.onNext(4)}
 >
 
-调用 `.signOut()` 方法会清除所有在缓存或者 localStorage 中的 Logto 数据（如果有）。
+调用 `.signOut()` 将清理内存与 localStorage 中的所有 Logto 数据（如果有）。
 
-为了确保用户登出后能够跳转回你的应用，我们需要首先在管理界面中将 `http://localhost:1234` 添加到允许登出后跳转的地址列表（Post Sign Out URIs）中。
+在退出登录后，让你的用户重新回到你的网站是个不错的选择。让我们将 `http://localhost:1234` 添加至下面的输入框，并将其作为调用 `.signOut()` 的参数。
 
 <UriInputField appId={props.appId} isSingle={!props.isCompact} name="postLogoutRedirectUris" title="Post Sign-out Redirect URI" />
 
+### 实现退出登录按钮
+
 ```ts
 import { useLogto } from "@logto/vue";
 
@@ -171,21 +170,24 @@ const onClickSignOut = () => signOut('http://localhost:1234');
 ```
 
 ```html
-<button @click="onClickSignOut">登出</button>
+<button @click="onClickSignOut">退出登录</button>
 ```
 
 </Step>
+
 <Step
-  title="延伸阅读"
+  title="延展阅读"
-  subtitle="3 steps"
+  subtitle="共 4 篇"
   index={4}
   activeIndex={props.activeStepIndex}
   buttonText="admin_console.general.done"
+  buttonType="primary"
   onButtonClick={props.onComplete}
 >
 
-- [SDK Documentation](https://link-url-here.org)
+- [自定义登录体验](https://docs.logto.io/zh-cn/docs/recipes/customize-sie)
-- [OIDC Documentation](https://link-url-here.org)
+- [启用短信或邮件验证码登录](https://docs.logto.io/zh-cn/docs/tutorials/get-started/enable-passcode-sign-in)
-- [Calling API to fetch accessToken](https://link-url-here.org)
+- [启用社交登录](https://docs.logto.io/zh-cn/docs/tutorials/get-started/enable-social-sign-in)
+- [保护你的 API](https://docs.logto.io/zh-cn/docs/recipes/protect-your-api)
 
 </Step>