app/pages/parameters/index.vue

<!--
Page Paramètres
-->
<template>
  <LayoutContainer>
    <v-col cols="12" sm="12" md="12">
      <v-tabs
          :model-value="currentTab"
          bg-color="primary"
          color="on-primary"
          :grow="true"
          density="default"
          @update:model-value="onTabUpdate"
      >
        <v-tab v-for="tab in tabs" :value="tab">
          {{ $t(tab) }}
        </v-tab>
      </v-tabs>

      <v-card-text>
        <v-window v-model="currentTab">
          <v-window-item value="general_parameters">
            <LayoutParametersGeneral />
          </v-window-item>

          <v-window-item value="website">
            <LayoutParametersWebsite />
          </v-window-item>

          <v-window-item value="teaching">
            <LayoutParametersTeaching />
          </v-window-item>

          <v-window-item value="intranet_access">
            <LayoutParametersIntranet />
          </v-window-item>

          <v-window-item value="educationNotations">
            <LayoutParametersEducationNotation />
          </v-window-item>

          <v-window-item value="bulletin">
          </v-window-item>

          <v-window-item value="educationTimings">
          </v-window-item>

          <v-window-item value="attendances">
          </v-window-item>

          <v-window-item value="residenceAreas">
          </v-window-item>

          <v-window-item value="sms_option">
          </v-window-item>

          <v-window-item value="super_admin">
          </v-window-item>
        </v-window>
      </v-card-text>

    </v-col>
  </LayoutContainer>
</template>

<script setup lang="ts">

  const tabs = [
    'general_parameters',
    'website',
    'teaching',
    'intranet_access',
    'educationNotations',
    'bulletin',
    'educationTimings',
    'attendances',
    'residenceAreas',
    'sms_option',
    'super_admin',
  ]

  const router = useRouter()
  const route = useRoute()
  let mounted = false

  /**
   * Update the current route's query with a new value for 'tab' parameter
   * @param tab
   */
  const updateQuery = (tab: string) => {
    router.replace({ query: { ...route.query, tab } })
  }

  const currentTab: Ref<string | null> = ref(null)

  onMounted(() => {
    if (!route.query || !route.query.tab || !tabs.includes(route.query.tab as string)) {
      updateQuery(tabs[0])
    }
    currentTab.value = route.query.tab as string
    mounted = true
  })

  const onTabUpdate = (tab: string) => {
    if (!mounted) {
      return
    }
    updateQuery(tab)
    currentTab.value = tab
  }
</script>

<style scoped lang="scss">

:deep(.v-tabs .v-btn__content) {
  text-transform: capitalize;
  letter-spacing: 0.04em;
}
</style>