Vue

1. Install the package

npm install @lingva/vue

2. Set up the plugin

// main.ts
import { createApp } from 'vue';
import { createLingva } from '@lingva/vue';
import App from './App.vue';

const lingva = createLingva({
  apiUrl: import.meta.env.VITE_LINGVA_API_URL,
  apiKey: import.meta.env.VITE_LINGVA_API_KEY,
  projectId: import.meta.env.VITE_LINGVA_PROJECT_ID,
});

const app = createApp(App);
app.use(lingva);
app.mount('#app');

3. Use in components

<script setup lang="ts">
import { useTranslation } from '@lingva/vue';

const { t, preload } = useTranslation();

// Preload translations on mount
preload(['common.*', 'user.*']);
</script>

<template>
  <div>
    <h1>{{ t('welcome.title') }}</h1>
    <p>{{ t('welcome.message', { name: 'John' }) }}</p>
  </div>
</template>