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,
  "locale": {
    "source": "en",
    "targets": ["es", "fr", "de"]
  },
  "buckets": {
    "vue-json": {
      "include": ["src/**/*.vue"]
    }
  }
}

This configuration sets English as the source language, targets Spanish, French, and German, and processes all .vue files in the src directory.

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 i18n

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/**/*.vue"],
  "exclude": ["src/components/NoTranslate.vue"]
}

Hybrid Translation

Combine component-based and file-based translations:

"buckets": {
  "vue-json": {
    "include": ["src/**/*.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.