From 37eabc89bd51eab132d36d11cc314794edf67d92 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Sat, 10 May 2025 18:11:33 +0200
Subject: [PATCH] docs(tabs): improve active item example

Resolves #4092
---
 .../examples/tabs/TabsModelValueExample.vue   | 28 +++++++++++++------
 docs/content/3.components/tabs.md             |  4 ---
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/docs/app/components/content/examples/tabs/TabsModelValueExample.vue b/docs/app/components/content/examples/tabs/TabsModelValueExample.vue
index 3d4f1a17..2d9c3a12 100644
--- a/docs/app/components/content/examples/tabs/TabsModelValueExample.vue
+++ b/docs/app/components/content/examples/tabs/TabsModelValueExample.vue
@@ -1,22 +1,32 @@
 <script setup lang="ts">
 import type { TabsItem } from '@nuxt/ui'
 
+const route = useRoute()
+const router = useRouter()
+
 const items: TabsItem[] = [
   {
-    label: 'Account'
+    label: 'Account',
+    value: 'account'
   },
   {
-    label: 'Password'
+    label: 'Password',
+    value: 'password'
   }
 ]
 
-const active = ref('0')
-
-// Note: This is for demonstration purposes only. Don't do this at home.
-onMounted(() => {
-  setInterval(() => {
-    active.value = String((Number(active.value) + 1) % items.length)
-  }, 2000)
+const active = computed({
+  get() {
+    return (route.query.tab as string) || 'account'
+  },
+  set(tab) {
+    // Hash is specified here to prevent the page from scrolling to the top
+    router.push({
+      path: '/components/tabs',
+      query: { tab },
+      hash: '#control-active-item'
+    })
+  }
 })
 </script>
 
diff --git a/docs/content/3.components/tabs.md b/docs/content/3.components/tabs.md
index 99e521f6..6c08d410 100644
--- a/docs/content/3.components/tabs.md
+++ b/docs/content/3.components/tabs.md
@@ -210,10 +210,6 @@ You can control the active item by using the `default-value` prop or the `v-mode
 
 :component-example{name="tabs-model-value-example"}
 
-::tip
-You can also pass the `value` of one of the items if provided.
-::
-
 ### With content slot
 
 Use the `#content` slot to customize the content of each item.