Internationalization

See the Internationalization Guide for full details.

Quick Example

Switch the editor language at runtime:

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

Available Locales

Code	Language	Code	Language
en	English	la	Latin
ar	Arabic	lt	Lithuanian
ch	Chinese	nl	Dutch
cz	Czech	pl	Polish
de	German	pt	Portuguese
es	Spanish	ru	Russian
fi	Finnish	se	Swedish
fr	French	th	Thai
hu	Hungarian	tr	Turkish
it	Italian	uk	Ukrainian
ja	Japanese	vi	Vietnamese
ko	Korean

Multiple Editors with Different Locales

Use vue-i18n's scoped locales for per-instance languages:

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