How to generate localized dynamic routes with nuxt and nuxt-i18n?

Question

I'm trying to make nuxt generate localized dynamic routes. I used nuxt-i18n to translate each route.

Here is my nuxt-i18n configuation:

['nuxt-i18n', {
  lazy: true,
  locales: [
    {
      name: 'French',
      code: 'fr',
      iso: 'fr-ch',
      file: 'fr.json'
    },
    {
      name: 'German',
      code: 'de',
      iso: 'de-ch',
      file: 'de.json'
    },
    {
      name: 'Italian',
      code: 'it',
      iso: 'it-ch',
      file: 'it.json'
    },
  ],
  langDir: 'lang/',
  defaultLocale: 'fr',
  parsePages: false,
  pages: {
    'advice/_uid': {
      fr: '/conseil/:uid',
      de: '/ratschlag/:uid',
      it: '/consiglio/:uid',
    },
  }
}]

As written on the documentation:

Dynamic routes are ignored by the generate command (yarn generate). Nuxt does not know what these routes will be so it can't generate them.

So I tried to adapt their example and used the my headless CMS's Api to reconstruct all routes but unfortunatly, nuxt doesn't generate them for some reason. I tried to use the file structure (which is /advice/_uid.vue) instead of the localized route hoping that nuxt-i18n would take care of that for me but no luck from that side either.

Here is my nuxt.config.js:

import Prismic from 'prismic-javascript'
const prismicEndpoint = 'https://some-repository.cdn.prismic.io/api/v2'

const advices = () =>
  Prismic.getApi(prismicEndpoint)
  .then(api =>
    api.query(Prismic.Predicates.at('document.type', 'advice'), {
      pageSize: 100,
    })
  )
  .then(res => {
    return [
      ...res.results.map(advice => `/conseil/${advice.uid}`),
    ]
  })

// Some more code...

export default {
  // Some more code...

  generate: {
    fallback: '404.html',
    advices
  }
}

There is no error when I run npm run generate, though it doesn't generate any of those routes. It used to work pretty well before I used nuxt-i18n to localize my routes

Is there any way to make nuxt or nuxt-i18n generate localized dymamic routes?

Thanks for your help!

Answer 1

Are you sure you don't have a typo here?

generate: {
  fallback: '404.html',
  advices
}

Your function is supposed to have routes as its key, so it should be:

generate: {
  fallback: '404.html',
  routes: advices
}