Replace `NuxtLink` with `NuxtLinkLocale` to support i18n prefix strategy (lang slug in path)
xairoo opened this issue · comments
I just batch replaced all NuxtLink
entries with NuxtLinkLocale
to support the prefix strategy of i18n.
i18n: {
strategy: 'prefix',
},
Works! When you set no_prefix
the lang slug will be gone.
Btw. is it on the roadmap to create translated slugs? Like /products
> /produkte
(not for the specific product name, just generic stuff like about
> ueber
and so)? I have done that with a Next.js project because of SEO but I am totally new to Vue.js but I am sure this will work too =)
For translating routes insert following example object into i18n
in nuxt.config.ts
:
// 👇 custom names für routen in anderen sprachen
customRoutes: 'config',
strategy: 'prefix_except_default',
baseUrl: 'https://woonuxt.dvl.to/', // Your woonuxt installation
pages: {
about: {
de_DE: '/ueber-uns',
en_US: '/about-us',
},
privacy: {
de_DE: '/datenschutzerklaerung',
en_US: '/privacy-policy',
},
},
The first keys below pages
are the pages names. Please replace the routes (about, privacy) with your own ones.
In the menu component you have to replace the links as well (for example):
<script setup>
const localePath = useLocalePath();
</script>
<template>
<NuxtLink :to="localePath({ name: 'index' })">{{ $t('messages.general.home') }}</NuxtLink>
<NuxtLink :to="localePath({ name: 'products' })">{{ $t('messages.general.allProducts') }}</NuxtLink>
...
...
I think that's all you need for translating routes.
BUT beware, this will not work with strategy: no_prefix
(afaik)