@kopynator/vue

Vue.js wrapper for the Kopynator i18n platform. Works with Vue 3 (Composition API).

Features

• Composition API: Full support for useKopy hook.
• Global Helper: Access $t in any template.
• Reactive: Updates automatically when the locale changes.

Installation

npm install @kopynator/core @kopynator/vue

Usage

1. Configuration

In your main.ts or main.js:

import { createApp } from 'vue';
import { createKopy } from '@kopynator/vue';
import App from './App.vue';

const app = createApp(App);

const kopy = createKopy({
  apiKey: 'YOUR_API_KEY', // Get it from https://www.kopynator.com
  defaultLocale: 'en',
  mode: 'hybrid', // 'local' | 'hybrid' | 'live'
  languages: ['en', 'es']
});

app.use(kopy);
app.mount('#app');

Configuration Options

| Option | Type | Description | |---|---|---| | apiKey | string | Required. Your public project token found at kopynator.com. | | defaultLocale | string | Required. The fallback language if no other is detected (e.g. 'en'). | | languages | string[] | Required for 'local' mode. Array of supported language codes. | | mode | 'local' \| 'hybrid' \| 'live' | Determines how translations are loaded. |

2. In Templates

You can use the global $t function directly in templates:

<template>
  <h1>{{ $t('welcome_title') }}</h1>
  <p>{{ $t('greeting', { name: 'User' }) }}</p>
</template>

3. In Setup Script

Use the useKopy hook for more control:

<script setup>
import { useKopy } from '@kopynator/vue';

const { t, isReady } = useKopy();
</script>

<template>
  <div v-if="isReady">
    <h1>{{ t('hero_title') }}</h1>
  </div>
  <div v-else>Loading translations...</div>
</template>

Loading Modes

1. local: Offline First. Only loads JSON files from your local assets.
2. live: Cloud First. Fetches the latest translations directly from Kopynator CDN.
3. hybrid (Recommended): Best of Both Worlds. Loads local files instantly, then updates from Cloud in the background.