msslgomez
1 month ago
101
0
Vue

Use localization with vue i18n

Posted 1 month ago by msslgomez

I'm trying to use localization to create a page with 2 languages and I have used the vue i18n library and that works but I want to change the locale by clicking on a flag. I did some googling but was unable to find a way to change it without using routes like /en/contact instead of having the routes stay the same.

I have this i18n.js file

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

Vue.use(VueI18n);

const messages = {
    'en': {
       //messages here
    },
    'es': {
      //messages here
    }
};

const i18n = new VueI18n({
    locale: 'es',
    fallbackLocale: 'es',
    messages: messages
});

export default i18n

And in my app.js I have this

import {InertiaApp} from '@inertiajs/inertia-vue'
import Vue from 'vue'
import ElementUI from 'element-ui'
import i18n from './i18n'
import es from 'element-ui/lib/locale/lang/es';
import en from 'element-ui/lib/locale/lang/en';
import 'element-ui/lib/theme-chalk/reset.css'
import locale from 'element-ui/lib/locale'

if (i18n.locale === 'es') {
    locale.use(es)
} else {
    locale.use(en);
}

Vue.use(InertiaApp);
Vue.use(ElementUI);


const app = document.getElementById('app');
app.setAttribute(':class', "{'loaded': loaded}");
new Vue({
    i18n,
    render: h => h(InertiaApp, {
        props: {
            initialPage: JSON.parse(app.dataset.page),
            resolveComponent: name => import(`@/Pages/${name}`).then(module => module.default),
        },
        data() {
            return {
                loaded: true
            }
        }
    }),
}).$mount(app);

I'm not sure if there is a way to use the locale from laravel and just change that one or if there is a way to change the locale in the i18n.js file when the buttons get clicked.

I do have this to change the locale however I'm not sure how to get it to actually work.

HomeController

 public function lang($locale)
    {
        App::setLocale($locale);
        session()->put('locale', $locale);
        return redirect()->back();
    }

Localization Middleware

  public function handle($request, Closure $next)
    {
        if (session()->has('locale')) {
            App::setLocale(session()->get('locale'));
        }
        return $next($request);
    }

I'm not sure how to use this in the routes themselves, these are my routes

<?php

Route::get('store', 'Auth\[email protected]')->name('login');
Route::post('login', 'Auth\[email protected]');

Route::post('register', 'Auth\[email protected]');

Route::get('about_us', '[email protected]');
Route::get('products/{id}', '[email protected]');

Route::get('/store/{category}', '[email protected]');

Route::get('lang/{locale}', '[email protected]');

Route::group(['middleware' => 'auth'], function () {
    Route::get('/logout')->name('logout')->uses('Auth\[email protected]');
    Route::get('/', '[email protected]');
    Route::get('change_pw', '[email protected]');
    Route::post('change_pw/save', '[email protected]');

    Route::resource('cart', 'CartController')->except('create', 'show', 'edit');
    Route::post('cart/pay', '[email protected]');

    Route::group(['middleware' => 'role:admin'], function () {
        Route::prefix('admin')->group(function () {
           //admin routes here
        });
    });
});

What should I do?

Please sign in or create an account to participate in this conversation.