Issue with translating slug page in Nuxt3 with i18n

Question

I am trying to translate pages/post/[slug].vue url. Currently it goes to localhost/post/slug but I want it to be localhost/postitus/slug when I have different language(Estonian) set.

Nuxt3 defineI18nRoute works in pages/favorites/index.vue and when I have et locale set then it goes to localhost/lemmikud and works fine

<template>
  <div class="content">
    <div>
        <h1>Minu lemmikud</h1>   
    </div>
  </div>
</template>

<script setup>
defineI18nRoute({
  paths: {
    et: "/lemmikud",
  },
});
</script>

However this doesn't work in pages/post/[slug].vue. When I got to localhost/postitus/slug then it gives me 404 error.

<script setup>
defineI18nRoute({
  paths: {
    et: "/postitus",
    en: "/post",
  },
});
</script>

Does anyone know how to translate url for slugs? Cheers!

Answer 1

I solved this with reading a little bit of i18n documentation https://v8.i18n.nuxtjs.org/guide/custom-paths

So what I needed to do is add customRoutes with pages attribute in my nuxt.config.ts.

 i18n: {
    locales: [
      {
        code: "et",
        name: "Estonian",
        file: "et.json",
      },
      {
        code: "en",
        name: "English",
        file: "en.json",
      },
    ],
    defaultLocale: "et",
    langDir: "./locales/",
    config: {
      fallbackLocale: "et",
    },
    //These lines below will translate my post/slug to postitus/slug    
    customRoutes: 'config',
    pages: {
      'post/[slug]': {
        et: '/postitus/[slug]', 
        en: '/post/[slug]', 
      }
    }
  },