How to use view-i18n to translate url parameters during route generation in nuxt.config

[johan-Rm]

I'm working on a multilingual website project for a real estate agency, I used the project below to make the translations everything works well, the last step is to translate the parameters of the dynamic urls during the route generation

https://github.com/paulgv/nuxt-i18n-routing

But i do not know how to use view-i18n during route generation, can you help me ?

Here is a code snippet that I would like to use :

import Vue from 'vue'
import VueI18n from 'vue-i18n'

import { ROUTES_ALIASES, DEFAULT_LOCALE, I18N } from '~/config'

Vue.use(VueI18n)

export default ({ app, store }) => {

	app.i18n = new VueI18n({
    	// fallbackLocale: DEFAULT_LOCALE,
    	messages: I18N,
      lazy: true,
      langDir: 'lang/',
      parsePages: false,
      pages: ROUTES_ALIASES
    	// silentTranslationWarn: true
  	})
  	app.i18n.locale = store.state.i18n.currentLocale
    
  	app.i18n.path = (link) => {
  		console.log(link)
	    if (app.i18n.locale === app.i18n.fallbackLocale) {
	      return `/${link}`;
	    }

    return `/${app.i18n.locale}/${link}`;
  }
}

I would like to call app.i18n.t('entitie.slug') into nuxt.config.js :

generate: {
   routes: function () {
      let results = axios.get(process.env.BASE_URL +  '/entities')
          .then((response) => {
            return response.data.map((entitie) => {
              return {
                route: '/en/myurl/' + app.i18n.t(entitie.slug)
              }
            })
        })
    }
}

[paulgv]

Hi @johan-Rm, I was never able to come up with a complete working solution for this. You might want to have a look at this issue in nuxt-i18n: nuxt-modules/i18n#79

[johan-Rm]

Thanks for your feedback.

in all the application that I develop the links are already translated everything works well but my problem is that if I do not generate the road in production mode (npm run generate) with the dynamic routes when I refresh the page I raise an error.

Not Found

The requested URL /en/selling/houses-dhotes/maisons-dhotes-a-route-de-marrakech-887-m2-a-vendre-84683-eur was not found on this server.

There may be something that I did not understand for the production mode, is it normal to find this error ? Can you help me understand ?

[paulgv]

If you're using generate, you need to specify your dynamic routes in Nuxt's config: https://nuxtjs.org/api/configuration-generate#routes

Dynamic routes are ignored by the generate command.

[johan-Rm]

in my first post I explained to you that I had used the pathways of dynamics and everything is going well

generate: {
   routes: function () {
      ... some code

      let results = axios.get(process.env.BASE_URL +  '/entities')
          .then((response) => {
            return response.data.map((entity) => {
              return {
                route: '/en/myurl/' + entity.slug
              }
            })
        })

      ... some code
    }
}

in the application the urls are translated but I get an error because the routes are not translated during "npm run generate"

Not Found

The requested URL /en/selling/houses-dhotes/maisons-dhotes-a-route-de-marrakech-887-m2-a-vendre-84683-eur was not found on this server.

I would like to do that "route: '/en/myurl/' + app.i18n.t(entity.slug)"

generate: {
   routes: function () {
	  ... some code

      let results = axios.get(process.env.BASE_URL +  '/entities')
          .then((response) => {
            return response.data.map((entity) => {
              return {
                route: '/en/myurl/' + app.i18n.t(entity.slug)
              }
            })
        })

	  ... some code
    }
}

ok I think I'm going to use a special JSON file for slugs without passing i18n.
I'll keep you informed.

[johan-Rm]

I finally chose a not really binding solution, my translation system generates specific files for slugs

import en from './lang/translations/slug/en.json'

The translation becomes simply a key / value replacement

I would like to do that "route: '/en/myurl/' + en[entity.slug]"

import en from './lang/translations/slug/en.json'

... some code

generate: {
   routes: function () {

	  ... some code

      let results = axios.get(process.env.BASE_URL +  '/entities')
          .then((response) => {
            return response.data.map((entity) => {
              return {
                route: '/en/myurl/' + en[entity.slug]
              }
            })
        })

	  ... some code

    }
}