20/07/2019, 09:58

Đa ngôn ngữ trong ứng dụng laravel + Vue.js

Trong một ứng dụng được viết bằng laravel chắc chúng ta đều quen với việc laravel support ngôn ngữ một cách vô cùng dễ dang, chỉ cần copy nhiều thư mục /resources/lang ra và đổi tên mong muốn là laravel có thể hiểu được ngôn ngữ bạn đang muốn sử dụng. ví dụ trong laralve bạn chỉ cần ...

Trong một ứng dụng được viết bằng laravel chắc chúng ta đều quen với việc laravel support ngôn ngữ một cách vô cùng dễ dang, chỉ cần copy nhiều thư mục /resources/lang ra và đổi tên mong muốn là laravel có thể hiểu được ngôn ngữ bạn đang muốn sử dụng.

ví dụ trong laralve bạn chỉ cần viết

là ứng dụng sẽ hiểu được ngôn ngữ của bạn muốn dùng, nhưng với vuejs, các component được việt trong file .vue thì 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.

Cài đặt

đầu tiên ta phải cài đặt những package, module để hỗ trợ việc đã ngôn ngữ:

Đối với laravel:

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

Trong thư mục project của bạn chạy lệnh sau:

composer require martinlindhe/laravel-vue-i18n-generator

Trong file config/app.php thêm vào dòng sau ở providers:

MartinLindheVueInternationalizationGeneratorGeneratorProvider::class,

publish config:

php artisan vendor:publish --provider="MartinLindheVueInternationalizationGeneratorGeneratorProvider"

trong file config này bạn có thể thay đổi một số cấu hình như tên thư mục, tên file, đường đẫn tới file …

<?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/assets/js/admin/languages/', 'jsFile' => '/resources/assets/js/admin/languages/vue-i18n-locales.generated.js', /* |-------------------------------------------------------------------------- | i18n library |-------------------------------------------------------------------------- | | Specify the library you use for localization. | Options are vue-i18n or vuex-i18n. | */ 'i18nLib' => 'vue-i18n', ];

<?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/assets/js/admin/languages/',

'jsFile' => '/resources/assets/js/admin/languages/vue-i18n-locales.generated.js',

/*

|--------------------------------------------------------------------------

| i18n library

|--------------------------------------------------------------------------

| Specify the library you use for localization.

| Options are vue-i18n or vuex-i18n.

*/

'i18nLib' => 'vue-i18n',

];

để chuyển đổi file trans từ php sang js chạy lệnh sau:

php artisan vue-i18n:generate

Với vueJs

Chúng ta sẽ sử dụng package vue-i18n để trans

Chạy lệnh sau để cài đặt:

npm i --save vue-i18n

Hoặc

yarn add vue-i18n

Trong file main js của bạn thêm vào đoạn sau:

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: { ... } }

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: <

Bình luận về bài viết này

Trịnh Tiến Mạnh

27 chủ đề

6824 bài viết

Đăng ký nhận thông báo

Các bài học thú vị sẽ được gửi đến inbox của bạn

HỖ TRỢ HỌC VIÊN

Các câu hỏi thường gặp
Điều khoản sử dụng
Chính sách và quy định
Chính sách bảo mật thanh toán
Hỗ trợ học viên: hotro@code24h.com
Báo lỗi bảo mật: security@code24h.com

Đa ngôn ngữ trong ứng dụng laravel + Vue.js

Cài đặt

Đối với laravel:

Với vueJs

Đăng ký nhận thông báo

HỖ TRỢ HỌC VIÊN

VỀ CODE24H

HỢP TÁC VÀ LIÊN KẾT

KẾT NỐI VỚI CHÚNG TÔI

TẢI ỨNG DỤNG TRÊN ĐIỆN THOẠI