Đa ngôn ngữ với Laravel và Vuejs

Bài đăng này đã không được cập nhật trong 5 năm

1. Mở đầu

Mặc định Laravel đã hỗ trợ ta viết ứng dụng đa ngôn ngữ hết sức thuận tiện và dễ dàng. Tuy nhiên, Laravel chỉ hỗ trợ đa ngôn ngữ với file .blade.php. Khi ta xây dựng front end bằng vuejs thì các component của nó sẽ không thể hiểu được cú pháp của Laravel.
Hôm nay mình sẽ giới thiệu một cách chi tiết các bạn có thể dùng để kết hợp đa ngôn ngữ trong vuejs và laravel.

2. Cài đặt

2.1 Về phần Laravel

Chúng ta sẽ sữ dụng package martinlindhe/laravel-vue-i18n-generator để tạo ra file js của ngôn ngữ.

Chạy lệnh sau trong thư mục project của bạn

composer require martinlindhe/laravel-vue-i18n-generator

trong file config/app.php ta thêm dòng sau vào phần providers

MartinLindhe\VueInternationalizationGenerator\GeneratorProvider::class,

Sau đó ta chạy lệnh sau để publish config:

php artisan vendor:publish --provider="MartinLindhe\VueInternationalizationGenerator\GeneratorProvider"

Sẽ có 1 file vue-i18n-generator.php được tạo ra trong thư mục config.
Trong file này, ta có thể config 1 số trường như đường dẫn file ngôn ngữ, file js.

<?php

return [
    /*
    |--------------------------------------------------------------------------
    | Laravel translations path
    |--------------------------------------------------------------------------
    |
    | The default path where the translations are stored by Laravel.
    | Note: the path will be prepended to point to the App directory.
    |
    */

    'langPath' => '/resources/lang',

    /*
    |--------------------------------------------------------------------------
    | Laravel translation files
    |--------------------------------------------------------------------------
    |
    | You can choose which translation files to be generated.
    | Note: leave this empty for all the translation files to be generated.
    |
    */

    'langFiles' => [
        /*
        'pagination',
        'passwords'
        */
    ],

    /*
    |--------------------------------------------------------------------------
    | Output file
    |--------------------------------------------------------------------------
    |
    | The javascript path where I will place the generated file.
    | Note: the path will be prepended to point to the App directory.
    |
    */
    'jsPath' => '/resources/lang/',
    'jsFile' => '/resources/js/vue-i18n-locales.generated.js',

    /*
    |--------------------------------------------------------------------------
    | i18n library
    |--------------------------------------------------------------------------
    |
    | Specify the library you use for localization.
    | Options are vue-i18n or vuex-i18n.
    |
    */
    'i18nLib' => 'vue-i18n',

    /*
    |--------------------------------------------------------------------------
    | Output messages
    |--------------------------------------------------------------------------
    |
    | Specify if the library should show "written to" messages
    | after generating json files.
    |
    */
    'showOutputMessages' => false,
];

để chuyển đổi các file ngôn ngữ trong Laravel sang file js ta chạy lệnh sau:

php artisan vue-i18n:generate

một file vue-i18n-locales.generated.js được tạo ra theo đường dẫn mà bạn đã config.

Sau này khi muốn định nghĩa 1 key mới, bạn có thể thêm thẳng trực tiếp vào file này, hoặc viết vào các file ngôn ngữ trong Laravel rồi chạy lại lệnh vừa rồi.

2.2 Về phần Vuejs

chúng ta sẽ sử dụng package vue-i18n

Chạy lệnh sau:

npm i --save vue-i18n

Hoặc

yarn add vue-i18n

Thêm vào đoạn code sau trong file app.js

import Vue from 'vue';
import VueInternationalization from 'vue-i18n';
import Locale from './vue-i18n-locales.generated.js';

Vue.use(VueInternationalization);
const i18n = new VueInternationalization({
    locale: document.head.querySelector('meta[name="locale"]').content,
    messages: Locale
});

const app = new Vue({
    el: '#app',
    i18n,
    components: {
       ...
    }
}

Ta thêm thẻ sau vào phần header trong file main blade

 <meta name="locale" content="{{ App::getLocale() }}"/>

3. Sử dụng

Cách sử dụng tương tự như cách bạn làm với fileblade

Đối với block template

{{ $t('message.go_to_home') }}
// hoặc
{{ $t('messages.hello', {name: 'name'}) }} // name là biến động, tương tự như laravel

Đối với code trong thẻ script

this.$t('message.hello');

4. Thay Đổi Ngôn Ngữ

4.1 Về phần Laravel

Ta sẽ tạo 1 api thay đổi ngôn ngữ.

php artisan make:controller LangController

trong LangControler ta thêm đoạn code sau

public function setLanguage($language)
{
    Session::put('language', $language);

    return $language;
}

Tiếp theo ta sẽ tạo 1 middleware

php artisan make:middleware LangMiddleware

ta chèn đoạn code sau:

    public function handle($request, Closure $next)
    {
        if (Session::has('language')) {
            App::setLocale(Session::get('language'));
        } else {
            App::setLocale('en');
        }

        return $next($request);
    }

định nghĩa route trong route/api.php

    Route::get('/language/{language}', 'LangController@setLanguage');

4.2 Về phần Vuejs

Ta tạo 1 component với nội dung như sau

<template>
    <div class="lang">
        <select name="language" class="form-select" @change="changeLanguage" v-model="language">
            <option value="en">English</option>
            <option value="vi">Tiếng Việt</option>
        </select>
    </div>
</template>
<script>
export default {
    data() {
        return {
            language: this.$i18n.locale
        };
    },
    methods: {
        changeLanguage() {
            localStorage.setItem('language', this.language);
            this.$i18n.locale = this.language;
            fetch(`api/language/${this.language}`);
        }
    }
};
</script>