From d9eaffd6ea57dcc1ea1db2a30bcb3ee3a3abbd9b Mon Sep 17 00:00:00 2001
From: ubugeeei <ubuge1122@gmail.com>
Date: Wed, 4 Nov 2026 01:10:15 +0900
Subject: [PATCH] docs(vue): use TypeScript and destructured typed props in Vue
 examples

React examples use TSX, but several Vue examples omitted `lang="ts"`.
Add it to every Vue example with a script block.

Replace implicit `defineProps<Props>()` calls and the runtime
`defineProps({ posts: Array })` declaration with reactive props
destructure and a type declaration, so each example shows where its
template bindings come from.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 docs/guide/pages-routing/islands.md  | 6 +++---
 docs/guide/pages-routing/layouts.md  | 2 +-
 docs/guide/pages-routing/loaders.md  | 4 ++--
 docs/guide/pages-routing/markdown.md | 2 +-
 docs/guide/type-safety.md            | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/guide/pages-routing/islands.md b/docs/guide/pages-routing/islands.md
index 83a8f7462..abb8a166f 100644
--- a/docs/guide/pages-routing/islands.md
+++ b/docs/guide/pages-routing/islands.md
@@ -96,11 +96,11 @@ export default function BlogIndex({ posts }) {
 
 ```vue [Vue]
 <!-- pages/blog/index.island.vue -->
-<script setup>
+<script setup lang="ts">
 import Counter from './_Counter.vue' with { island: 'load' };
 import PostForm from './_PostForm.vue' with { island: 'visible' };
 
-defineProps({ posts: Array });
+const { posts } = defineProps<{ posts: { slug: string; title: string }[] }>();
 </script>
 
 <template>
@@ -249,7 +249,7 @@ export default function PostForm() {
 ```
 
 ```vue [Vue]
-<script setup>
+<script setup lang="ts">
 import { useIslandForm } from '@void/vue';
 
 const form = useIslandForm({ title: '', body: '' });
diff --git a/docs/guide/pages-routing/layouts.md b/docs/guide/pages-routing/layouts.md
index 0b48348b0..03007097d 100644
--- a/docs/guide/pages-routing/layouts.md
+++ b/docs/guide/pages-routing/layouts.md
@@ -167,7 +167,7 @@ export default function Page() {
 ```
 
 ```vue [Vue]
-<script>
+<script lang="ts">
 export const layout = 'landing';
 </script>
 
diff --git a/docs/guide/pages-routing/loaders.md b/docs/guide/pages-routing/loaders.md
index d566ea46c..39cfd43d1 100644
--- a/docs/guide/pages-routing/loaders.md
+++ b/docs/guide/pages-routing/loaders.md
@@ -51,7 +51,7 @@ export default function UsersPage({ users }: Props) {
 <!-- pages/users/index.vue -->
 <script setup lang="ts">
 import type { Props } from './index.server';
-defineProps<Props>();
+const { users } = defineProps<Props>();
 </script>
 
 <template>
@@ -177,7 +177,7 @@ Check `loading` first, then `error`. TypeScript narrows `value` to `T` in the re
 ```vue [Vue]
 <script setup lang="ts">
 import type { Props } from './dashboard.server';
-defineProps<Props>();
+const { projects, usage } = defineProps<Props>();
 </script>
 
 <template>
diff --git a/docs/guide/pages-routing/markdown.md b/docs/guide/pages-routing/markdown.md
index 6750c6b08..ed4b4c04f 100644
--- a/docs/guide/pages-routing/markdown.md
+++ b/docs/guide/pages-routing/markdown.md
@@ -190,7 +190,7 @@ export default function DocsLayout({ children }) {
 ```
 
 ```vue [Vue]
-<script setup>
+<script setup lang="ts">
 import { useFrontmatter } from '@void/md';
 
 const fm = useFrontmatter();
diff --git a/docs/guide/type-safety.md b/docs/guide/type-safety.md
index e89f3a5ff..cec5993c4 100644
--- a/docs/guide/type-safety.md
+++ b/docs/guide/type-safety.md
@@ -65,7 +65,7 @@ export const loader = defineHandler(async (c) => {
 <!-- pages/users/index.vue -->
 <script setup lang="ts">
 import type { Props } from './index.server';
-defineProps<Props>(); // ← { users: { id: number; name: string; ... }[] }
+const { users } = defineProps<Props>(); // ← users: { id: number; name: string; ... }[]
 </script>
 ```