Lingo.dev + Vue.js Single-File Components

Lingo.dev CLI supports Vue I18n single-file components, allowing you to keep translations inside your .vue files.

Note: If your Vue.js application uses JSON locale files, use the .json format for frontend.

Quick Setup

Create an i18n.json configuration file in your project root:

{
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es", "fr", "de"]
  },
  "buckets": {
    "vue-json": {
      "include": ["src/components/*.vue", "src/views/*.vue"]
    }
  }
}

This configuration sets English as the source language, targets Spanish, French, and German, and processes .vue files in the src/components and src/views directories.

Find Supported Languages

List available source and target languages:

npx lingo.dev@latest show locale sources
npx lingo.dev@latest show locale targets

Translate Everything

Run the following command to translate all Vue components:

npx lingo.dev@latest run

The CLI scans your components for <i18n> blocks, translates new or changed content, and updates translations in place.

How It Works with Vue Components

Lingo.dev works directly with Vue's standard i18n structure:

<template>
  <div>
    <h1>{{ $t("welcome") }}</h1>
    <p>{{ $t("description") }}</p>
  </div>
</template>

<i18n>
{
  "en": {
    "welcome": "Welcome",
    "description": "This is a Vue component"
  }
}
</i18n>

After translation, your component will contain all target languages:

<i18n>
{
  "en": {
    "welcome": "Welcome",
    "description": "This is a Vue component"
  },
  "es": {
    "welcome": "Bienvenido",
    "description": "Este es un componente Vue"
  },
  "fr": {
    "welcome": "Bienvenue",
    "description": "Ceci est un composant Vue"
  }
}
</i18n>

Advanced Configuration

Exclude Files

Exclude specific components from translation:

"vue-json": {
  "include": ["src/components/*.vue", "src/views/*.vue"],
  "exclude": ["src/components/NoTranslate.vue"]
}

Hybrid Translation

Combine component-based and file-based translations:

"buckets": {
  "vue-json": {
    "include": ["src/components/*.vue", "src/views/*.vue"]
  },
  "json": {
    "include": ["src/locales/[locale].json"]
  }
}

This setup keeps component-specific translations within components and stores global translations in separate JSON files.

Why Use This Approach

• Keeps translations with the components that use them
• No need to extract strings to separate files
• AI understands component context for better translations
• Only translates what's changed
• Works with Vue I18n's recommended patterns

Lingo.dev provides AI-driven translations while maintaining Vue's component-based architecture.