diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/vue.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/vue.mdx index 7ddd76616..34864560f 100644 --- a/packages/console/src/assets/docs/tutorial/integrate-sdk/vue.mdx +++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/vue.mdx @@ -88,26 +88,30 @@ First, let’s enter your redirect URI. E.g. `http://localhost:1234/callback`. ### Implement a sign-in button -We provide two composables `useHandleSignInCallback()` and `useLogto()`, which can help you easily manage the authentication flow. +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:
-
-{`import { useLogto } from "@logto/vue";
+
+{``}
 
 
```html -
-
Signed in
-
-
- -
+ ``` ### Handle redirect @@ -116,12 +120,14 @@ We're almost there! In the last step, we use `http://localhost:1234/callback` as 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 + + ``` ```html @@ -165,16 +171,20 @@ After signing out, it'll be great to redirect user back to your website. Let's a ### Implement a sign-out button
-
-{`import { useLogto } from "@logto/vue";
+
+{``}
 
 
```html - + ``` diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx index 1a484cd92..8275f6e6e 100644 --- a/packages/console/src/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx +++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx @@ -93,21 +93,25 @@ app.mount("#app");`} 返回你的 IDE 或编辑器,使用如下代码来实现一个登录按钮:
-
-{`import { useLogto } from "@logto/vue";
+
+{``}
 
 
```html -
-
已登录
-
-
- -
+ ``` ### 处理重定向 @@ -116,12 +120,14 @@ const onClickSignIn = () => signIn('${props.redirectUris[0] ?? 'http://localhost 首先,让我们来创建一个 Callback 组件: -```ts -// CallbackView.vue -import { useHandleSignInCallback } from '@logto/vue'; -const { isLoading } = useHandleSignInCallback(() => { - // 完成时跳转至根路由 -}); +```html + + ``` ```html @@ -165,16 +171,20 @@ const router = createRouter({ ### 实现退出登录按钮
-
-{`import { useLogto } from "@logto/vue";
+
+{``}
 
 
```html - + ```