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