Vue.js

This guide walks you through integrating Clocale into your Vue.js application for seamless internationalization (i18n) support.

Getting Started

Installing Dependencies

Begin by adding the Clocale package to your Vue.js project using npm:

npm install @clocale/vue

This package provides all the necessary tools and composables for managing translations in your Vue application.

Configuration

Setting Up the Plugin

Configure the Clocale plugin in your main application file. This establishes the translation system across your entire Vue app:

import { createApp } from 'vue'
import App from './App.vue'
import { ClocalePlugin } from '@clocale/vue'

const app = createApp(App)

app.use(ClocalePlugin, {
  type: 'client',           // client-side usage
  locale: 'en',             // default locale
  baseUrl: import.meta.env.VITE_CLOCALE_URL || '',
  isDev: import.meta.env.VITE_DEV?.includes('true'),
})

app.mount('#app')

Configuration Options:

• type: Set to 'client' to enable client-side fetching of translations from your Clocale endpoint
• locale: The initial locale for your application (e.g., 'en' for English, 'fr' for French, 'es' for Spanish)
• baseUrl: Your Clocale HTTP endpoint URL where translation files are hosted
• isDev: Enable development mode for additional helpers and encoding features during development

Managing Locales

Switching Languages Dynamically

Use the useLocale composable to access and change the current locale throughout your application:

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

const { locale, setLocale } = useLocale();

function switchToFrench() {
  setLocale('fr');
}
</script>

<template>
  <p>Current: {{ locale }}</p>
  <button @click="switchToFrench">FR</button>
</template>

The locale reactive value always reflects the current language, and setLocale() allows you to change it programmatically based on user interaction or preferences.

Using Translations

Translating Content in Components

The useTranslation composable provides the t function for accessing translated strings within your components:

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

const { t } = useTranslation('common');
</script>

<template>
  <h1>{{ t('home.title') }}</h1>
</template>

Key Points:

• Pass a namespace (e.g., 'common') to useTranslation() to organize your translations by feature or section
• Use dot notation (e.g., 'home.title') to access nested translation keys
• The t() function automatically returns the translation for the current locale

This pattern keeps your components clean and makes translations easy to manage as your application grows.

DevTool (Optional)

The DevTool highlights translatable elements and opens an editor on Alt+Click.

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

<template>
  <DevTool>
    <!-- your app markup -->
  </DevTool>
</template>

Note: If your editor dialog requires an API key, be sure your integration provides it (for example via your extension or app storage).

Quick Reference