Internacionalização

O Tiptapify suporta mais de 35 idiomas de origem. As traduções são geridas através do vue-i18n.

Definir o idioma predefinido

Crie uma instância do vue-i18n e passe-a ao registar o plugin:

// main.ts
import { createI18n } from 'vue-i18n'
import TiptapifyPlugin from 'tiptapify'
import 'tiptapify/style.css'

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

app.use(i18n)
app.use(TiptapifyPlugin, { i18n })

Alterar o idioma em tempo de execução

O Tiptapify utiliza a sua instância do vue-i18n — altere o idioma através de useI18n():

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

const { locale } = useI18n()

const languages = [
  { code: 'en', label: 'English' },
  { code: 'de', label: 'Deutsch' },
  { code: 'fr', label: 'Français' },
  { code: 'es', label: 'Español' },
  { code: 'ru', label: 'Русский' },
]
</script>

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

    <Tiptapify placeholder="Start writing..." />
  </div>
</template>

Idiomas disponíveis

Atualmente, são suportados os seguintes idiomas:

Código	Idioma
en	Inglês
ar	Árabe
bg	Búlgaro
ch	Chinês
cz	Checo
de	Alemão
el	Grego
es	Espanhol
et	Estónio
fi	Finlandês
fr	Francês
he	Hebraico
hi	Hindi
hr	Croata
hu	Húngaro
id	Indonésio
it	Italiano
ja	Japonês
ko	Coreano
la	Letão
lt	Lituano
nl	Neerlandês
no	Norueguês
pl	Polaco
pt	Português
pt-BR	Português (Brasil)
ro	Romeno
ru	Russo
se	Sueco
sk	Eslovaco
sl	Esloveno
sr	Sérvio
th	Tailandês
tr	Turco
uk	Ucraniano
vi	Vietnamita

Traduções geradas por IA

A maioria das traduções é gerada por IA e pode conter erros. Se encontrar uma tradução incorreta ou quiser adicionar um novo idioma, abra um issue ou contacte o responsável pela manutenção.

Adicionar traduções personalizadas

O Tiptapify funde automaticamente as suas mensagens de locale integradas na instância do vue-i18n quando a passa ao plugin. Pode ampliar ou substituir traduções antes de registar o plugin:

import { createI18n } from 'vue-i18n'
import TiptapifyPlugin from 'tiptapify'
import 'tiptapify/style.css'

const i18n = createI18n({
  legacy: false,
  locale: 'en',
  messages: {
    // Custom translations take precedence over Tiptapify's built-in ones
    en: {
      toolbar: {
        bold: 'Make bold',
        italic: 'Make italic',
      },
    },
  },
})

app.use(i18n)
app.use(TiptapifyPlugin, { i18n })

Ou fundir depois de criar a instância do i18n:

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

i18n.global.mergeLocaleMessage('en', customTranslations)

app.use(i18n)
app.use(TiptapifyPlugin, { i18n })

Idiomas RTL

Para idiomas RTL, como o árabe, certifique-se de que o seu tema do Vuetify suporta RTL:

const vuetify = createVuetify({
  locale: {
    rtl: true,
  },
})

Locale por instância

O Tiptapify utiliza globalmente o locale do vue-i18n da sua aplicação. Se precisar de locales por instância, utilize os slots com âmbito (scoped slots) ou a composition API do vue-i18n dentro do âmbito da instância:

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

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

<template>
  <Tiptapify :placeholder="t('editor.placeholder')" />
</template>