<scriptsetuplang="ts">import type { TabMenuItem }from'~/components/TabMenu.vue'const activeTab =ref('dashboard')consthandleTabClick=(tabId: string)=>{ activeTab.value = tabId}const items =computed(()=>[{id:'dashboard',label:'Dashboard',isActive: activeTab.value ==='dashboard',clickHandler:()=>handleTabClick('dashboard'),},{id:'notifications',label:`Notifications`,isActive: activeTab.value ==='notifications',clickHandler:()=>handleTabClick('notifications'),},{id:'settings',label:'Settings',isActive: activeTab.value ==='settings',clickHandler:()=>handleTabClick('settings'),},{id:'logout',label:'Logout',isActive: activeTab.value ==='logout',clickHandler:()=>handleTabClick('logout'),},] satisfies TabMenuItem[],)</script><template><divclass="n-stack"><TabMenu:items/><divclass="n-padding-m"><p><strong>Active Tab:</strong> {{ activeTab || 'None' }}</p><pclass="n-color-text-weak"> Click on the tabs above to see the click events in action.</p></div></div></template>
<scriptsetuplang="ts">import type { TabMenuItem }from'~/components/TabMenu.vue'const items =ref([{id:'local-page',label:'Local Page',to:'#',},{id:'provet-cloud',label:'Provet Cloud (External)',to:'https://www.provet.cloud/',external:true,},{id:'nord-design-system',label:'Nord Design System (External)',to:'https://nordhealth.design/',external:true,},{id:'provet-support',label:'Support Portal (External and Target Blank)',to:'https://support.provet.cloud/',external:true,target:'_blank',},] satisfies TabMenuItem[])</script><template><TabMenu:items/></template>
<scriptsetuplang="ts">import type { TabMenuItem }from'~/components/TabMenu.vue'const items =ref([{id:'same-tab',label:'Same Tab',to:'#',},{id:'new-tab-provet',label:'Provet Cloud (New Tab)',to:'https://www.provet.cloud/',external:true,target:'_blank',},{id:'new-tab-nord',label:'Nord Design (New Tab)',to:'https://nordhealth.design/',external:true,target:'_blank',},{id:'new-tab-docs',label:'Documentation (New Tab)',to:'https://docs.provet.cloud/',external:true,target:'_blank',},] satisfies TabMenuItem[])</script><template><TabMenu:items/></template>
When writing tab labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):
My tasks
My Tasks
Avoid unnecessary words and articles in tab labels, such as “the”, “an” or “a”:
Dashboard
The dashboard
Avoid ending tab labels in punctuation:
Patients
Patients.
Use as few words as possible to describe each tab label:
Payments
Payments in your clinic
Avoid all caps for tab labels:
Dashboard
DASHBOARD
Integration
This community asset is currently only available to use in the New Frontend for Provet Cloud.
Troubleshooting
If you experience any issues while using this community asset, please ask for support in the #vet-frontend Slack channel.
Edit page
TTherapyChoose therapy brandVVeterinaryChoose veterinary brandAbout Nord Design SystemGet support