An example for a multi-language app with vue-router

[stephanedemotte]

Hi !

I see a lot of comments talking about multi-language / vue-router and vuex.
#1 #2 #3

Internationalisation is missing in Vue.
And I think, it should be in the core system.

We have some good plugins like i18n
But it's not mature to be used in production see

I can't figure it out, what is the best way to do this?
Shouldn't this useful example be in the roadmap ?

To resume, we need

• navigation change the language at the runtime (update history, and link)
• different named route for the same page
• possibility to load and insert data via ajax
• possibility to access from anywhere to the hardcoded/dynamique data
• possibility to inject data from a child component

This is my first approach but i know i'm wrong (using vue-router and vue-i18n).

route.js

import Vue from 'vue'
import p404 from './pages/404/404.vue'
import Home from './pages/home/Home.vue'
import About from './pages/about/About.vue'
import Work from './pages/work/Work.vue'
import Contact from './pages/contact/Contact.vue'

module.exports = function(router){

    router.map({
        '*': { component: p404 }, 

        '/': { name: 'home-en', component: Home, lang: 'en' }, 
        '/about': { name: 'about-en', component: About, lang: 'en' }, 
        '/work': { name: 'work-en', component: Work, lang: 'en' }, 
        '/contact-us': { name: 'contact-en', component: Contact, lang: 'en' },

        '/accueil': { name: 'home-fr', component: Home, lang: 'fr' }, 
        '/a-propos': { name: 'about-fr', component: About, lang: 'fr' }, 
        '/travaux': { name: 'work-fr', component: Work, lang: 'fr' }, 
        '/contactez-nous': { name: 'contact-fr', component: Contact, lang: 'fr' }
    })

  router.beforeEach(function (transition) {
    Vue.config.lang = transition.to.lang
    transition.next()
  })

}

navigation.vue

<template>
  <div class="Navigation">
    <div class="Navigation__link-wrapper">
      <a class="Navigation__link" 
        v-for="btn in menu" 
        v-link="{ name: btn.route, activeClass: 'Navigation__link--active' }">
          {{ $t(btn.name) }}
      </a>
      <a href="#" @click.prevent="changeLang">
        toggle lang
      </a>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'

  export default {
    data() {
      return {
        lang: Vue.config.lang
      }
    },
    computed: {
      menu() {
        return [
          { route: 'about-' + this.lang, name: "navigation.about" },
          { route: 'work-' + this.lang, name: 'navigation.work' },
          { route: 'contact-' + this.lang, name: 'navigation.contact' },
        ]
      }
    },
    methods: {
      changeLang() {
        this.lang = (this.lang == 'fr') ? 'en' : 'fr'
      },
    }
  }
</script>

Any help will be appreciate !

[stephanedemotte]

ok i got something cool !

I will commit a example in 1 or 2 days :)

Thanks !

[blake-newman]

Please place these type of requests within the Vue forums