Internationalisierung

Alle Details findest du im Internationalisierungs-Leitfaden.

Kurzes Beispiel

Die Editorsprache zur Laufzeit wechseln:

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

Verfügbare Locales

Code	Sprache	Code	Sprache
en	Englisch	ko	Koreanisch
ar	Arabisch	la	Lettisch
bg	Bulgarisch	lt	Litauisch
ch	Chinesisch	nl	Niederländisch
cz	Tschechisch	no	Norwegisch
de	Deutsch	pl	Polnisch
el	Griechisch	pt	Portugiesisch
es	Spanisch	pt-BR	Portugiesisch (Brasilien)
et	Estnisch	ro	Rumänisch
fi	Finnisch	ru	Russisch
fr	Französisch	se	Schwedisch
he	Hebräisch	sk	Slowakisch
hi	Hindi	sl	Slowenisch
hr	Kroatisch	sr	Serbisch
hu	Ungarisch	th	Thailändisch
id	Indonesisch	tr	Türkisch
it	Italienisch	uk	Ukrainisch
ja	Japanisch	vi	Vietnamesisch

Mehrere Editoren mit unterschiedlichen Locales

Nutze die Scoped Locales von vue-i18n für Sprachen pro Instanz:

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