insert_pixel_code_here
0236.2240.741
msita.vietnam@gmail.com
Học lập trình Đà Nẵng
11 Jul 2019

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

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

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

publish config:

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 …

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

Với vueJs

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

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

Hoặc

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

Đạt vào file main blade trong header của bạn đoạn thẻ meta sau:

chỗ này sẽ giúp file của bạn lấy language động.

CHÚ Ý: IMPORT LOCALE FROM './VUE-I18N-LOCALES.GENERATED.JS'; SAO CHO ĐÚNG ĐƯỜNG DẪN FILE ĐƯỢC TẠO RA.

Sử dụng

  • Sau khi cài đặt xong thì cách sử dụng là vô cùng dễ dàng, nó hoàn toàn tương tự với laravel:
  • Đối với block templage:

đối với đoạn cần trans nằm trong thẻ <script></script>

Thay đổi ngông ngữ

  • Khi người dùng click thay đổi ngôn ngữ thì chúng ta cần lưu ngôn ngữ đó lại, và mỗi request của người dùng thì cần set lại Locale thì hàm App::getLocale()của laravel mới thay đổi theo ngôn ngữ:

Set ngôn ngữ khi người dùng ấn change:

BẠN TỰ ĐỊNH NGHĨA ROUTE VÀO HÀM NÀY NHÉ.

Tiếp theo tạo một file middware với nội dùng như sau:

Cuối cùng để \App\Http\Middleware\Language::class, vào $middleware của file file app/Http/Kernel.php.