Tabs

A tab that lives in the URL is a tab you can link to. parseAsStringLiteral keeps the value to the tabs that exist, and history: 'push' makes each one a step the back button undoes.

URL/

Show code

tabs.vue

vue

<script setup lang="ts">
import { parseAsStringLiteral } from 'usewagen'
import { useRouteState } from 'usewagen/router'

const tabs = ['overview', 'activity', 'settings'] as const

const tab = useRouteState({
  key: 'tab',
  parser: parseAsStringLiteral(tabs).withDefault('overview'),
  history: 'push',
})
</script>

<template>
  <div class="demo-row">
    <button v-for="name in tabs" :key="name" :disabled="tab === name" @click="tab = name">
      {{ name }}
    </button>
  </div>

  <p>Showing the {{ tab }} tab.</p>
</template>

tab is typed as 'overview' | 'activity' | 'settings', so a URL carrying anything else falls back to the default rather than reaching the component. The default tab is not written to the URL at all, which is why the first tab shows an address without a param.

Tabs ​

Tabs