davide/blog
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Add a language switcher with English, Italian, Spanish and French

Browse Source 
The interface is translated through @nuxtjs/i18n: strings live in
i18n/locales/*.json, routes are prefixed except for the default English, and
useLocaleHead emits the lang attribute, the hreflang alternates and og:locale.

The switcher is a native select rather than a custom dropdown: keyboard
support, the platform picker on mobile and correct labelling come for free.

Article content stays single-language — this translates the site chrome only.
This commit is contained in:
davide
2026-08-25 14:23:09 +02:00
parent f5639111f9
commit c08f53ca69
21 changed files with 3197 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/layouts/default.vue
+43 -24
View File
@@ -1,6 +1,8 @@
<script setup lang="ts">
import type { Category } from '#shared/types/blog'
const { locale } = useI18n()
const { data: categories } = await useFetch<Category[]>('/api/categories', {
key: 'nav-categories',
default: () => [],
@@ -9,25 +11,30 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
<template>
<div class="page">
<a class="skip-link" href="#main">Skip to content</a>
<a class="skip-link" href="#main">{{ $t('site.skipToContent') }}</a>
<header class="site-header">
<div class="container">
<p class="wordmark">
<NuxtLink to="/">
<NuxtLinkLocale to="/">
<img src="/logo.png" :alt="SITE_NAME" width="400" height="400">
</NuxtLink>
</NuxtLinkLocale>
</p>
<p class="tagline kicker">{{ SITE_DESCRIPTION }}</p>
<p class="tagline kicker">{{ $t('site.tagline') }}</p>
</div>
<nav class="site-nav" aria-label="Main navigation">
<ul class="container">
<li><NuxtLink to="/blog">All articles</NuxtLink></li>
<li v-for="category in categories" :key="category.slug">
<NuxtLink :to="`/category/${category.slug}`">{{ category.name }}</NuxtLink>
</li>
</ul>
<nav class="site-nav" :aria-label="$t('site.mainNavigation')">
<div class="container nav-inner">
<ul>
<li><NuxtLinkLocale to="/blog">{{ $t('site.allArticles') }}</NuxtLinkLocale></li>
<li v-for="category in categories" :key="category.slug">
<NuxtLinkLocale :to="`/category/${category.slug}`">
{{ category.name }}
</NuxtLinkLocale>
</li>
</ul>
<LanguageSwitcher />
</div>
</nav>
</header>
@@ -39,33 +46,36 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
<div class="container footer-inner">
<div class="footer-block">
<img class="footer-logo" src="/logo.png" :alt="SITE_NAME" width="400" height="400">
<p class="muted">{{ SITE_DESCRIPTION }}</p>
<p class="muted">{{ $t('site.tagline') }}</p>
<address class="contact">
Contact: <a :href="`mailto:${SITE_EMAIL}`">{{ SITE_EMAIL }}</a>
{{ $t('site.contact') }}:
<a :href="`mailto:${SITE_EMAIL}`">{{ SITE_EMAIL }}</a>
</address>
</div>
<nav class="footer-block" aria-label="Categories">
<p class="kicker">Categories</p>
<nav class="footer-block" :aria-label="$t('site.categories')">
<p class="kicker">{{ $t('site.categories') }}</p>
<ul>
<li v-for="category in categories" :key="category.slug">
<NuxtLink :to="`/category/${category.slug}`">{{ category.name }}</NuxtLink>
<NuxtLinkLocale :to="`/category/${category.slug}`">
{{ category.name }}
</NuxtLinkLocale>
</li>
<li v-if="!categories.length" class="muted">Nothing published yet</li>
<li v-if="!categories.length" class="muted">{{ $t('site.noCategories') }}</li>
</ul>
</nav>
<nav class="footer-block" aria-label="Sections">
<p class="kicker">Browse</p>
<nav class="footer-block" :aria-label="$t('site.browse')">
<p class="kicker">{{ $t('site.browse') }}</p>
<ul>
<li><NuxtLink to="/">Home</NuxtLink></li>
<li><NuxtLink to="/blog">All articles</NuxtLink></li>
<li><NuxtLinkLocale to="/">{{ $t('site.home') }}</NuxtLinkLocale></li>
<li><NuxtLinkLocale to="/blog">{{ $t('site.allArticles') }}</NuxtLinkLocale></li>
</ul>
</nav>
</div>
<p class="container copyright kicker">
&copy; {{ new Date().getFullYear() }} {{ SITE_NAME }}. All rights reserved.
<p class="container copyright kicker" :lang="locale">
&copy; {{ new Date().getFullYear() }} {{ SITE_NAME }}. {{ $t('site.rights') }}
</p>
</footer>
</div>
@@ -109,12 +119,21 @@ const { data: categories } = await useFetch<Category[]>('/api/categories', {
border-top: 1px solid var(--color-border);
}
.nav-inner {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 2rem;
align-items: center;
justify-content: space-between;
padding-block: 0.9rem;
}
.site-nav ul {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 2rem;
justify-content: center;
padding-block: 0.9rem;
padding: 0;
margin: 0;
list-style: none;
font-size: 0.75rem;