blog/frontend/app/components/LanguageSwitch.vue

<script setup lang="ts">
import { STRINGS } from '#shared/utils/i18n'
import { bareLocalePath, localePath } from '#shared/utils/locale'
import type { Locale } from '#shared/utils/locale'

const route = useRoute()
const locale = useLocale()
const langSwitch = useLangSwitchState()

const strings = computed(() => STRINGS[locale.value])

function targetFor(otherLocale: Locale): string {
  if (!langSwitch.value.available) return langSwitch.value.fallback
  return localePath(otherLocale, bareLocalePath(route.path))
}
</script>

<template>
  <div class="lang-switch" :aria-label="strings.langSwitch.ariaLabel" role="group">
    <span v-if="locale === 'it'" class="lang-option is-current" aria-current="true">
      {{ strings.langSwitch.it }}
    </span>
    <NuxtLink v-else class="lang-option" :to="targetFor('it')">
      {{ strings.langSwitch.it }}
    </NuxtLink>

    <span class="lang-divider" aria-hidden="true">/</span>

    <span v-if="locale === 'en'" class="lang-option is-current" aria-current="true">
      {{ strings.langSwitch.en }}
    </span>
    <NuxtLink v-else class="lang-option" :to="targetFor('en')">
      {{ strings.langSwitch.en }}
    </NuxtLink>
  </div>
</template>

<style scoped>
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lang-option {
  display: inline-block;
  text-decoration: none;
  color: var(--color-muted);
  padding-block: 0.25rem;
  border-bottom: 1px solid transparent;
}

a.lang-option:hover,
a.lang-option:focus-visible {
  color: var(--color-ink);
  border-bottom-color: var(--color-ink);
}

.lang-option.is-current {
  color: var(--color-ink);
  border-bottom-color: var(--color-ink);
}

.lang-divider {
  color: var(--color-border);
}
</style>