Đa ngôn ngữ

Xem Hướng dẫn đa ngôn ngữ để biết chi tiết.

Ví dụ nhanh

Chuyển đổi ngôn ngữ của trình soạn thảo khi đang chạy:

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { locale } = useI18n()

const languages = [
  { code: 'en', name: 'English' },
  { code: 'de', name: 'Deutsch' },
  { code: 'fr', name: 'Français' },
  { code: 'es', name: 'Español' },
]
</script>

<template>
  <div>
    <v-select
      v-model="locale"
      :items="languages"
      item-title="name"
      item-value="code"
      label="Language"
    />

    <Tiptapify />
  </div>
</template>

Ngôn ngữ có sẵn

Mã	Ngôn ngữ	Mã	Ngôn ngữ
en	Tiếng Anh	ko	Tiếng Hàn
ar	Tiếng Ả Rập	la	Tiếng Latvia
bg	Tiếng Bulgaria	lt	Tiếng Litva
ch	Tiếng Trung	nl	Tiếng Hà Lan
cz	Tiếng Séc	no	Tiếng Na Uy
de	Tiếng Đức	pl	Tiếng Ba Lan
el	Tiếng Hy Lạp	pt	Tiếng Bồ Đào Nha
es	Tiếng Tây Ban Nha	pt-BR	Tiếng Bồ Đào Nha (Brazil)
et	Tiếng Estonia	ro	Tiếng Romania
fi	Tiếng Phần Lan	ru	Tiếng Nga
fr	Tiếng Pháp	se	Tiếng Thụy Điển
he	Tiếng Do Thái	sk	Tiếng Slovak
hi	Tiếng Hindi	sl	Tiếng Slovenia
hr	Tiếng Croatia	sr	Tiếng Serbia
hu	Tiếng Hungary	th	Tiếng Thái
id	Tiếng Indonesia	tr	Tiếng Thổ Nhĩ Kỳ
it	Tiếng Ý	uk	Tiếng Ukraina
ja	Tiếng Nhật	vi	Tiếng Việt

Nhiều trình soạn thảo với các ngôn ngữ khác nhau

Dùng các locale có phạm vi (scoped) của vue-i18n để đặt ngôn ngữ riêng cho từng instance:

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const en = useI18n({ useScope: 'local', locale: 'en' })
const de = useI18n({ useScope: 'local', locale: 'de' })
</script>

<template>
  <v-row>
    <v-col>
      <h3>English</h3>
      <Tiptapify />
    </v-col>
    <v-col>
      <h3>German</h3>
      <Tiptapify />
    </v-col>
  </v-row>
</template>