vendredi 3 avril 2020

Multi-Language routes (prefix) using laravel routes + vuejs views

I have developped a website using laravel and VueJS. Maybe this choice wasn't the best, but the routing is done with Laravel..

Now, I would like to add the language in the url for a better referencing. The problem is that my routes are in laravel (web.php) while the languages mgmt in done with vuejs.

Seems like I can add the language inthe routes using this Route::group(['prefix' => '{locale}'], function() {

But then, how could I access it with vuejs without adding in in each components props? Any idea?

Thanks so much,

Here is how it works:

web.php

Route::get('/test', function () { //how to add the language here?
    return view('test');
});

App.js

import Vue from 'vue';
import VueInternationalization from 'vue-i18n';
import Locale from './vue-i18n-locales.generated.js'; //here are all translations
Vue.use(VueInternationalization);
var test = Vue.component('test', require('./components/TestComponent.vue').default);
var Navbar = Vue.component('navbar', require('./components/common/NavbarComponent.vue').default); 

let i18n = new VueInternationalization({
        locale: lang,//  || 'en',
        // fallbackLocale: 'en',
        messages: Locale
    });

    const app = new Vue({
        el: '#app',
        store,
        i18n,
        components:{test, navbar}
    });

NavbarComponent.vue //here I set the language

<template>
    <select v-model="$i18n.locale" @change="langChanged($i18n.locale)">
        <option v-for="(lang, i) in langs" :value="lang"></option>
    </select>
</template>
<script>
       import VueInternationalization from 'vue-i18n';
       Vue.use(VueInternationalization);
       const lang = document.documentElement.lang.substr(0, 2); 
       const i18n = new VueInternationalization({
            locale: lang
       });
       mounted(){
            this.$i18n.Locale = localStorage.Lang;
       }
       methods:{
            langChanged(lang){
                localStorage.Lang=lang;
                this.$i18n.locale=lang;
                axios.get('/setlang/'+lang).then(
                    response => {
                        //changing the language in cookie so that it 
                    }
                );
            },
     }


via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire