Đa ngôn ngữ với Laravel và Vuejs
Bài đăng này đã không được cập nhật trong 6 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>
5. Tham Khảo
All rights reserved
