N
Nuxt•3mo ago
melonpansalonpas

Page with UTab set to default tab but it isn't working

In my <script> const currentTab = ref("dashboard"); const tab: TabsItem[] = [ { key: "dashboard", label: "Dashboard", icon: "i-lucide-chart-column-big", slot: "dashboard", }, { key: "asset", label: "Asset", icon: "i-heroicons-rectangle-stack", slot: "asset", } ]; In my <template> <UTabs :items="tab" class="mb-6" :ui="{ list: 'flex flex-wrap gap-1', trigger: 'flex-shrink-0 min-w-fit', }" v-model="currentTab" activation-mode="automatic" :unmount-on-hide="true" > Before this when i click the page from the sidebar it will default to dashboard but now it doesn't I can't seem to find the bug.
5 Replies
kapa.ai
kapa.ai•3mo ago
Hi @melonpansalonpas. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources, the UTabs component in Nuxt UI expects the value used for v-model to match the value property of each tab item, not a key property. In your code, you are using key instead of value in your tab items. This means that when you set currentTab = ref("dashboard"), the tabs cannot match this value to any tab item, so the default tab is not selected. How to fix: Change the key property in your tab items to value: 
const currentTab = ref("dashboard");
const tab: TabsItem[] = [
  {
    value: "dashboard", // <-- use value, not key
    label: "Dashboard",
    icon: "i-lucide-chart-column-big",
    slot: "dashboard",
  },
  {
    value: "asset",
    label: "Asset",
    icon: "i-heroicons-rectangle-stack",
    slot: "asset",
  }
];
const currentTab = ref("dashboard");
const tab: TabsItem[] = [
  {
    value: "dashboard", // <-- use value, not key
    label: "Dashboard",
    icon: "i-lucide-chart-column-big",
    slot: "dashboard",
  },
  {
    value: "asset",
    label: "Asset",
    icon: "i-heroicons-rectangle-stack",
    slot: "asset",
  }
];
The v-model on UTabs will now correctly bind to the tab with value: "dashboard" and select it by default, as shown in the official documentation: 
<script setup lang="ts">
import type { TabsItem } from '@nuxt/ui'

const items: TabsItem[] = [
  {
    label: 'Account',
    value: 'account'
  },
  {
    label: 'Password',
    value: 'password'
  }
]

const active = ref('account')
</script>

<template>
  <UTabs v-model="active" :content="false" :items="items" class="w-full" />
</template>
<script setup lang="ts">
import type { TabsItem } from '@nuxt/ui'

const items: TabsItem[] = [
  {
    label: 'Account',
    value: 'account'
  },
  {
    label: 'Password',
    value: 'password'
  }
]

const active = ref('account')
</script>

<template>
  <UTabs v-model="active" :content="false" :items="items" class="w-full" />
</template>
See official example Summary:
Replace key with value in your tab items. The v-model must match the value property for the default tab to work as expected.
If you continue to have issues, ensure that currentTab is initialized before the component renders and that you are not accidentally resetting it elsewhere in your code. If you need to use a custom property, you must map it to value for the tabs to work properly.
Let me know if you need more help! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@803283169511735356> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
melonpansalonpas
melonpansalonpasOP•3mo ago
@kapa.ai onMounted(async () => { if (!itemName.value) { toast.add({ title: "Error", description: "No item specified", color: "error", }); router.push({ path: "/hr/stock-management", hash: "#inventory" }); return; } say the page with tabs is page A, if i try to redirect page B back to page A but to tab inventory is the code incorect?
kapa.ai
kapa.ai•3mo ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- Your code for redirecting from page B to page A and scrolling to a specific hash (#inventory) is mostly correct for navigating to a section of the page. However, if you want to also activate a specific tab (e.g., the "inventory" tab) on page A, you need to ensure that the tab component on page A is set up to read the tab state from either the hash or the query parameter. What your code does: 
router.push({
  path: "/hr/stock-management",
  hash: "#inventory" 
});
router.push({
  path: "/hr/stock-management",
  hash: "#inventory" 
});
- This will navigate to /hr/stock-management#inventory and scroll to the element with id="inventory" if it exists. To activate a specific tab: - The Nuxt UI UTabs component expects the active tab to be controlled via v-model and the value property of the tab item. - In the official example, tabs are often controlled via a query parameter (e.g., ?tab=inventory) and not the hash. The hash is used for scrolling, not for tab state. Example from the docs: 
const active = computed({
  get() {
    return (route.query.tab as string) || 'account'
  },
  set(tab) {
    router.push({
      path: '/components/tabs',
      query: { tab },
      hash: '#control-active-item'
    })
  }
})
const active = computed({
  get() {
    return (route.query.tab as string) || 'account'
  },
  set(tab) {
    router.push({
      path: '/components/tabs',
      query: { tab },
      hash: '#control-active-item'
    })
  }
})
See official example Recommendation: - If you want to activate the "inventory" tab, use a query parameter: 
  router.push({
    path: "/hr/stock-management",
    query: { tab: "inventory" },
    hash: "#inventory"
  });
  
  router.push({
    path: "/hr/stock-management",
    query: { tab: "inventory" },
    hash: "#inventory"
  });
- Then, on page A, set up your tabs to read the active tab from route.query.tab. Summary:
- Your code will scroll to the #inventory section, but will not activate a tab unless your tab logic is set up to read from the hash (which is not standard in Nuxt UI). - For best results, use a query parameter for the tab and the hash for scrolling, and ensure your tab component reads from the query parameter as shown in the docs. If you need a code example for the tab setup, let me know!
Reference: Tabs control active item ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@803283169511735356> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?