From b4c202275bd0866c747466510954f0682ac7839a Mon Sep 17 00:00:00 2001
From: "IceHe.xyz" <icehe@silverhand.io>
Date: Tue, 12 Jul 2022 15:42:33 +0800
Subject: [PATCH] docs(console): improve code sample in vue tutorial (#1519)

---
 .../docs/tutorial/integrate-sdk/vue.mdx       | 54 +++++++++++--------
 .../docs/tutorial/integrate-sdk/vue_zh-cn.mdx | 52 ++++++++++--------
 2 files changed, 63 insertions(+), 43 deletions(-)

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:
 
 <pre>
-<code className="language-ts">
-{`import { useLogto } from "@logto/vue";
+<code className="language-html">
+{`<script setup lang="ts">
+  import { useLogto } from "@logto/vue";
 
-const { signIn, isAuthenticated } = useLogto();
-const onClickSignIn = () => signIn('${props.redirectUris[0] ?? 'http://localhost:1234/callback'}');`}
+  const { signIn, isAuthenticated } = useLogto();
+  const onClickSignIn = () => signIn('${props.redirectUris[0] ?? 'http://localhost:1234/callback'}');
+</script>`}
 </code>
 </pre>
 
 ```html
-<div v-if="isAuthenticated">
-  <div>Signed in</div>
-</div>
-<div v-else>
-  <button @click="onClickSignIn">Sign In</button>
-</div>
+<template>
+  <div v-if="isAuthenticated">
+    <div>Signed in</div>
+  </div>
+  <div v-else>
+    <button @click="onClickSignIn">Sign In</button>
+  </div>
+</template>
 ```
 
 ### 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
+<!-- CallbackView.vue -->
+<script setup lang="ts">
+  import { useHandleSignInCallback } from '@logto/vue';
+  const { isLoading } = useHandleSignInCallback(() => {
+    // Navigate to root path when finished
+  });
+</script>
 ```
 
 ```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
 
 <pre>
-<code className="language-ts">
-{`import { useLogto } from "@logto/vue";
+<code className="language-html">
+{`<script setup lang="ts">
+  import { useLogto } from "@logto/vue";
 
-const { signOut } = useLogto();
-const onClickSignOut = () => signOut('${props.postLogoutRedirectUris[0] ?? 'http://localhost:1234'}');`}
+  const { signOut } = useLogto();
+  const onClickSignOut = () => signOut('${props.postLogoutRedirectUris[0] ?? 'http://localhost:1234'}');
+</script>`}
 </code>
 </pre>
 
 ```html
-<button @click="onClickSignOut">Sign Out</button>
+<template>
+  <button @click="onClickSignOut">Sign Out</button>
+</template>
 ```
 
 </Step>
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 或编辑器，使用如下代码来实现一个登录按钮：
 
 <pre>
-<code className="language-ts">
-{`import { useLogto } from "@logto/vue";
+<code className="language-html">
+{`<script setup lang="ts">
+  import { useLogto } from "@logto/vue";
 
-const { signIn, isAuthenticated } = useLogto();
-const onClickSignIn = () => signIn('${props.redirectUris[0] ?? 'http://localhost:1234/callback'}');`}
+  const { signIn, isAuthenticated } = useLogto();
+  const onClickSignIn = () => signIn('${props.redirectUris[0] ?? 'http://localhost:1234/callback'}');
+</script>`}
 </code>
 </pre>
 
 ```html
-<div v-if="isAuthenticated">
-  <div>已登录</div>
-</div>
-<div v-else>
-  <button @click="onClickSignIn">登录</button>
-</div>
+<template>
+  <div v-if="isAuthenticated">
+    <div>已登录</div>
+  </div>
+  <div v-else>
+    <button @click="onClickSignIn">登录</button>
+  </div>
+</template>
 ```
 
 ### 处理重定向
@@ -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
+<!-- CallbackView.vue -->
+<script setup lang="ts">
+  import { useHandleSignInCallback } from '@logto/vue';
+  const { isLoading } = useHandleSignInCallback(() => {
+    // 完成时跳转至根路由
+  });
+</script>
 ```
 
 ```html
@@ -165,16 +171,20 @@ const router = createRouter({
 ### 实现退出登录按钮
 
 <pre>
-<code className="language-ts">
-{`import { useLogto } from "@logto/vue";
+<code className="language-html">
+{`<script setup lang="ts">
+  import { useLogto } from "@logto/vue";
 
-const { signOut } = useLogto();
-const onClickSignOut = () => signOut('${props.postLogoutRedirectUris[0] ?? 'http://localhost:1234'}');`}
+  const { signOut } = useLogto();
+  const onClickSignOut = () => signOut('${props.postLogoutRedirectUris[0] ?? 'http://localhost:1234'}');
+</script>`}
 </code>
 </pre>
 
 ```html
-<button @click="onClickSignOut">退出登录</button>
+<template>
+  <button @click="onClickSignOut">退出登录</button>
+</template>
 ```
 
 </Step>