What’s the best practice for defining i18n resources when using nested routes?

[sakurawaifu]

Background

• Page structure:

/pages
-- /post
---- [id].vue
-- post.vue
-- index.vue

• I18n resources directory structure:

/locales
-- /pages
---- /post
------ en-US.json
------ zh-CN.json
---- /post-id
------ en-US.json
------ zh-CN.json
---- /index
------ en-US.json
------ zh-CN.json
-- en-US.json
-- zh-CN.json

• post.vue

<template>
  <div class="post-page">
    <h1>{{ $t('title') }}</h1>
    <NuxtPage></NuxtPage>
  </div>
</template>

the title is in locales/pages/post/{locale}.json

Question

When I visit /post/123456, the title can't be found, because only the locale.json file that exactly matches the current route will be loaded, and the parent route's locale.json file won't. locale.json only works intuitively in leaf routes.

If I use defineI18nRoute to define i18n resources in post.vue, I can make it work. Because when post.vue is created, the i18n resources defined this way are merged into the translation cache. So post.vue (and all its descendants, including child route page components /post/[id].vue) can access it. These are just my guesses :)

1. My guesses incorrect?
2. In this case, what’s the best practice? I’m currently using defineI18nRoute in all pages, replacing pages/{routeName}/{locale}.json. I don't like using multiple methods to do the same thing.

Maybe I did something wrong?😕

Related issue:

#6

[s00d]

For such a task, routesLocaleLinks exists. You can simply create one translation for several pages.

https://s00d.github.io/nuxt-i18n-micro/guide/getting-started#%F0%9F%94%97-routeslocalelinks