Add a language switcher with English, Italian, Spanish and French
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:
@@ -5,23 +5,20 @@ const props = defineProps<{ error: NuxtError }>()
|
||||
|
||||
const isNotFound = computed(() => props.error.statusCode === 404)
|
||||
|
||||
useHead(useLocaleHead())
|
||||
useSeoMeta({ robots: 'noindex' })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLayout>
|
||||
<h1>{{ isNotFound ? 'Page not found' : 'Something went wrong' }}</h1>
|
||||
<h1>{{ isNotFound ? $t('error.notFoundTitle') : $t('error.genericTitle') }}</h1>
|
||||
|
||||
<p class="muted">
|
||||
{{
|
||||
isNotFound
|
||||
? 'The page you are looking for does not exist or has moved.'
|
||||
: 'Please try again in a moment.'
|
||||
}}
|
||||
{{ isNotFound ? $t('error.notFoundBody') : $t('error.genericBody') }}
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<NuxtLink to="/">Back to home</NuxtLink>
|
||||
<NuxtLinkLocale to="/">{{ $t('error.backHome') }}</NuxtLinkLocale>
|
||||
</p>
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user