Vue Integration

Vue integration for tanzlate, including components interpolation.

Installation

npm

npm install @tanzlate/vue

yarn

yarn add @tanzlate/vue

pnpm

pnpm add @tanzlate/vue

Usage

<I18nProvider>

The I18nProvider is a Vue wrapper component that:

• Initializes an i18next instance with the given config.
• Exposes the i18n context via Vue's provide/inject.
• Wraps your app (or part of it) in a Suspense boundary, ensuring translations are ready before render.

---

<script setup lang="ts">
import I18nProvider from '@tanzlate/vue';
import RtTranslate from '@tanzlate/vue';
</script>

<template>
  <I18nProvider :i18next-config="config">
    <div>
      <RtTranslate i18n-key="home.welcome" :components="components" />
    </div>
  </I18nProvider>
</template>

Provided Context

Internally, I18nProvider:

• Calls useCoreContext() from @tanzlate/core to initialize the i18next instance.
• Provides the reactive context (language ref + helpers) to all child components via provide.

This makes reactive translation helpers available to child components via useI18n().

Render Behavior

The provider wraps children in a <Suspense> block, ensuring translations are fully initialized before any child renders.

useI18n

import { useI18n } from '@tanzlate/vue';

const { cT, globalT, forNamespace, lang, changeLanguage } = useI18n('my_namespace');

Return value	Type	Description
cT	cTFunc	Translation helper scoped to the given namespace
globalT	cTFunc	Translation helper for the global namespace
forNamespace	(ns) => cTFunc	Factory to create a helper for any namespace
lang	Ref<string>	Reactive current language
changeLanguage	(lng) => Promise<void>	Change the active language