Internationalization

Tiptapify supports 20+ languages out of the box. Translations are managed via vue-i18n.

Setting the Default Locale

Create a vue-i18n instance and pass it when registering the 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 })

Changing Locale at Runtime

Tiptapify uses your vue-i18n instance — change the locale via 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>

Available Locales

The following languages are currently supported:

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

AI-Generated Translations

Most translations are AI-generated and may contain mistakes. If you find an incorrect translation or want to add a new language, please open an issue or contact the maintainer.

Adding Custom Translations

Tiptapify automatically merges its built-in locale messages into your vue-i18n instance when you pass it to the plugin. You can extend or override translations before registering the 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 })

Or merge after creating the i18n instance:

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

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

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

RTL Languages

For RTL languages like Arabic, ensure your Vuetify theme supports RTL:

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

Per-Instance Locale

Tiptapify uses your app's vue-i18n locale globally. If you need per-instance locales, use vue-i18n's scoped slots or composition API within the instance's scope:

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

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

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