app/pages/parameters/index.vue

<!--
Page Paramètres
-->
<template>
  <LayoutContainer>
    <v-col cols="12" sm="12" md="12">
      <v-tabs
          v-model="currentTab"
          bg-color="primary"
          color="on-primary"
          :grow="true"
          density="default"
      >
        <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">
          </v-window-item>

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

          <v-window-item value="educationNotations">
          </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 currentTab: Ref<string | null> = ref(null)

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

</script>

<style scoped lang="scss">

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