Replace NuxtLink with NuxtLinkLocale to support i18n prefix strategy (lang slug in path)

[xairoo]

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 =)

[AndreasMueck]

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)