Internacjonalizacja

Szczegóły znajdziesz w przewodniku po internacjonalizacji.

Krótki przykład

Zmień język edytora w czasie działania aplikacji:

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

Dostępne ustawienia regionalne

Kod	Język	Kod	Język
en	angielski	ko	koreański
ar	arabski	la	łotewski
bg	bułgarski	lt	litewski
ch	chiński	nl	niderlandzki
cz	czeski	no	norweski
de	niemiecki	pl	polski
el	grecki	pt	portugalski
es	hiszpański	pt-BR	portugalski (brazylijski)
et	estoński	ro	rumuński
fi	fiński	ru	rosyjski
fr	francuski	se	szwedzki
he	hebrajski	sk	słowacki
hi	hindi	sl	słoweński
hr	chorwacki	sr	serbski
hu	węgierski	th	tajski
id	indonezyjski	tr	turecki
it	włoski	uk	ukraiński
ja	japoński	vi	wietnamski

Wiele edytorów z różnymi ustawieniami regionalnymi

Użyj lokalnych ustawień regionalnych (scoped locales) vue-i18n, aby ustawić język osobno dla każdej instancji:

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