Search code examples
nuxt.jsvue-i18n

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


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

Solution

  • 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
    
        }
    }