- vừa được xem lúc

Tìm hiểu i18n trong Nuxtjs

0 0 118

Người đăng: Dương Quý Cao

Theo Viblo Asia

1. Khởi tạo project

Các bạn có thể cài đặt qua npx:

npx create-nuxt-app <project-name>

Hoặc có thể sử dụng yarn:

yarn create nuxt-app <project-name>

Trong quá trình cài đặt sẽ hiển thị một số thông tin như là: name project, programing language, package manager, ... sẽ hỗ trợ cho dự án của bạn nhanh và thuận tiện hơn trong quá trình làm.

2. Cài đặt i18n

Cài đặt npm hoặc yarn :

npm install nuxt-i18n
hoặc
yarn add nuxt-i18n

3. Tích hợp i18n trong nuxt

Bạn cần cấu hình i18n vào trong nuxt.config và sử dụng các option tùy chỉnh.

Options:

locales:

Danh sách các ngôn ngữ được cấu hình: Các thuộc tính:

  • code: Là định danh duy nhất của ngôn ngữ.
  • iso: Yêu cầu khi sử dụng SEO.
  • file: Là tên của một file. Được lấy từ đường dẫn langDir.

defaultLocale:

Được chỉ định là ngôn ngữ mặc định sử dụng và nó phải khớp với locales.

strategy:

  • no_prefix: Đầu vào của ngôn ngữ không có gì
  • prefix_except_default: Đầu vào ngôn ngữ được thêm vào ngoại trừ ngôn ngữ mặc định
  • prefix: Đầu vào ngôn ngữ được thêm vào cho mọi ngôn ngữ.
  • prefix_and_default: Đầu vào ngôn ngữ được thêm vào và cả ngôn ngữ mặc định

langDir:

Thư mục chứa đường dẫn file ngôn ngữ

...

4. Thư mục locales

Tạo các file để biên dịch cho ứng dụng.

locales/en.js
-----
export default: { lang: "English"
}

5. Component

<template> <div> <span>{{ $t('lang') }}</span> </div>
</teamplate>

Sử dụng phương thức $t(...) nó sẽ tìm theo đường dẫn và lấy ra bản dịch tương ứng.

6. Kết luận

Chúc bạn thành công tích hợp đa ngôn ngữ vào trong ứng dụng của mình.

7. Tài liệu tham khảo

https://i18n.nuxtjs.org/

Bình luận

Bài viết tương tự

- vừa được xem lúc

Ví dụ CRUD với Laravel và Vuejs.

1. Cài đặt Laravel. composer create-project --prefer-dist laravel/laravel vuelaravelcrud. .

0 0 139

- vừa được xem lúc

Bài 1: Cài đặt Vue và chạy chương trình Hello world đầu tiên

Ở bài đầu tiên này mình sẽ hướng dẫn các bài cài đặt VueJS vào project Laravel, sau đó chúng ta sẽ cùng xem những thứ cơ bản của Vue nhé. Vì Laravel đã hỗ trợ tích hợp VueJS nên việc cài đặt của chúng ta sẽ hết sức đơn giản.

0 0 125

- vừa được xem lúc

Lazy loading and code splitting in Vue.js

Việc giữ cho ứng dụng của bạn tải nhanh ngày càng khó hơn. Trong loạt bài này, tôi sẽ đi sâu vào các kỹ thuật tối ưu hiệu suất Vue và bạn có thể sử dụng trong các ứng dụng Vue.

0 0 102

- vừa được xem lúc

Validating Vue.js Forms Using Vuelidate

Introduction. Validate thông tin đầu vào trên các ứng dụng web là rất quan trọng.

0 0 201

- vừa được xem lúc

5 Good Practices mình đang sử dụng trong Vuejs

Mở đầu. Mình đã sử dụng vuejs được cũng được 1 năm trở lại đây.

0 0 86

- vừa được xem lúc

[P5] VueJS - Một vài Interpolations khác trong Vue

Ở bài viết trước, mình đã nói về một vài keyword trong Vue như v-if, v-else, v-show, v-for, ... Chúng thực chất là các syntax đặc biệt của Vue để thao tác linh hoạt với các DOM ảo, được gọi là Interpolations. Ngoài ra, Vue còn các Interpolations khác. Mục đích của nó thì đã quá rõ ràng, hiển thị tex

0 0 48