📘 BÀI 29: ĐA NGÔN NGỮ VỚI VUE-I18N

Tạo ứng dụng đa ngôn ngữ với Vue (i18n), bạn sẽ học cách giúp ứng dụng của mình có thể hỗ trợ nhiều ngôn ngữ – một kỹ năng cực kỳ quan trọng nếu bạn hướng tới người dùng quốc tế hoặc muốn linh hoạt ngôn ngữ giao diện.

Mục tiêu

• Cài và cấu hình vue-i18n
• Tách nội dung sang file ngôn ngữ
• Chuyển đổi ngôn ngữ động
• Ứng dụng vào toàn bộ app

---

Phần 1: Cài thư viện i18n

📋 Copynpm install vue-i18n

---

Phần 2: Cấu hình i18n trong Vue

Tạo file src/i18n/index.js:

📋 Copyimport { createI18n } from 'vue-i18n'

const messages = {
  vi: {
    hello: 'Xin chào',
    login: 'Đăng nhập',
    logout: 'Đăng xuất',
    username: 'Tên đăng nhập',
    password: 'Mật khẩu',
    submit: 'Gửi'
  },
  en: {
    hello: 'Hello',
    login: 'Login',
    logout: 'Logout',
    username: 'Username',
    password: 'Password',
    submit: 'Submit'
  }
}

const i18n = createI18n({
  locale: 'vi',
  fallbackLocale: 'en',
  legacy: false,
  messages
})

export default i18n

---

Phần 3: Thêm vào main app

Trong main.js:

📋 Copyimport { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
import i18n from './i18n'

createApp(App)
  .use(router)
  .use(createPinia())
  .use(i18n)
  .mount('#app')

---

Phần 4: Sử dụng trong template

Trong component bất kỳ:

📋 Copy<template>
  <div>
    <h2>{{ $t('hello') }}</h2>
    <input :placeholder="$t('username')" />
    <input type="password" :placeholder="$t('password')" />
    <button>{{ $t('submit') }}</button>
  </div>
</template>

---

Phần 5: Tạo nút chuyển đổi ngôn ngữ

📋 Copy<template>
  <div>
    <select v-model="lang" @change="changeLang">
      <option value="vi">Tiếng Việt</option>
      <option value="en">English</option>
    </select>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
import { ref } from 'vue'

const { locale } = useI18n()
const lang = ref(locale.value)

function changeLang() {
  locale.value = lang.value
}
</script>

---

Phần 6: Tổ chức file ngôn ngữ chuyên nghiệp

Thay vì viết trong index.js, bạn có thể tách ra:

src/i18n/en.js

📋 Copyexport default {
  hello: 'Hello',
  login: 'Login',
  logout: 'Logout',
  username: 'Username',
  password: 'Password',
  submit: 'Submit'
}

src/i18n/vi.js

📋 Copyexport default {
  hello: 'Xin chào',
  login: 'Đăng nhập',
  logout: 'Đăng xuất',
  username: 'Tên đăng nhập',
  password: 'Mật khẩu',
  submit: 'Gửi'
}

Sau đó trong index.js:

📋 Copyimport en from './en'
import vi from './vi'

const messages = { en, vi }

---

Bạn đã học được

• Cài và cấu hình i18n
• Sử dụng $t() để dịch nội dung
• Chuyển đổi ngôn ngữ động
• Tổ chức file dịch rõ ràng, dễ mở rộng

---

Bài tập mở rộng

1. Lưu ngôn ngữ người dùng vào localStorage (giữ khi reload)
2. Tự động chọn ngôn ngữ dựa trên navigator.language
3. Dịch tất cả nội dung UI (toast, message, button, thông báo lỗi…)