Vue i18n blocks - Lingo.dev CLI

What are Vue i18n blocks?

Vue i18n blocks are special <i18n> sections in Vue Single File Components (SFCs) that contain JSON-formatted translations. They allow you to keep translations alongside your component code.

For example:

<template>
  <div class="container">
    <h1>{{ $t('welcome') }}</h1>
    <button @click="handleClick">{{ $t('button.submit') }}</button>
  </div>
</template>

<i18n>
{
  "en": {
    "welcome": "Hello, world!",
    "description": "A simple demo app",
    "button": {
      "submit": "Submit",
      "cancel": "Cancel"
    }
  }
}
</i18n>

What is Lingo.dev CLI?

Lingo.dev CLI is a free, open-source CLI for translating apps and content with AI. It's designed to replace traditional translation management software while integrating with existing pipelines.

To learn more, see Overview.

About this guide

This guide explains how to translate Vue i18n blocks with Lingo.dev CLI.

You'll learn how to:

Create a project from scratch
Configure a translation pipeline
Generate translations with AI

Prerequisites

To use Lingo.dev CLI, ensure that Node.js v18+ is installed:

❯ node -v
v22.17.0

Step 1. Set up a project

In your project's directory, create an i18n.json file:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

This file defines the behavior of the translation pipeline, including what languages to translate between and where the localizable content exists on the file system.

To learn more about the available properties, see i18n.json.

Step 2. Configure the source locale

The source locale is the original language and region that your content was written in. To configure the source locale, set the locale.source property in the i18n.json file:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

The source locale must be provided as a BCP 47 language tag.

For the complete list of the locale codes that Lingo.dev CLI supports, see Supported locale codes.

Step 3. Configure the target locales

The target locales are the languages and regions you want to translate your content into. To configure the target locales, set the locale.targets property in the i18n.json file:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

Step 4. Create the source content

If you haven't already, create a Vue component file with an <i18n> block containing content to be translated.

Note: During the translation process, the source content files will be overwritten to include the translated content (in addition to the source content).

Step 5. Create a bucket

In the i18n.json file, add a "vue-json" object to the buckets object:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "vue-json": {}
  }
}

In the "vue-json" object, define an array of one or more include patterns:
```
{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "vue-json": {
      "include": ["./example.vue"]
    }
  }
}
```
These patterns define which files to translate and can either:
- point to specific file paths (e.g., "some/dir/file.vue")
- use asterisks as wildcard placeholders (e.g., "some/dir/*.vue")
Recursive glob patterns (e.g., **/*.vue) are not supported.

Step 6. Configure an LLM

Lingo.dev CLI uses large language models (LLMs) to translate content with AI. To use one of these models, you need an API key from a supported provider.

To get up and running as quickly as possible, we recommend using Lingo.dev Engine — our own, hosted platform that offers 10,000 tokens of free, monthly usage:

Sign up for a Lingo.dev account.
Run the following command:
```
npx lingo.dev@latest login
```
This will open your default browser and ask you to authenticte.
Follow the prompts.

Step 7. Generate the translations

In the directory that contains the i18n.json file, run the following command:

npx lingo.dev@latest run

This command:

Reads the i18n.json file.
Finds the files that need to be translated.
Extracts the translatable content from the files.
Uses the configured LLM to translate the extracted content.
Writes the translated content back to the file system.

The first time translations are generated, an i18n.lock file is created. This file keeps track of what content has been translated, preventing unnecessary retranslations on subsequent runs.

Example

example.vue (before translation)

<i18n>
{
  "en": {
    "welcome": "Hello, world!",
    "description": "A simple demo app",
    "button": {
      "submit": "Submit",
      "cancel": "Cancel"
    }
  }
}
</i18n>

example.vue (after translation)

<i18n>
{
  "en": {
    "welcome": "Hello, world!",
    "description": "A simple demo app",
    "button": {
      "submit": "Submit",
      "cancel": "Cancel"
    }
  },
  "es": {
    "welcome": "¡Hola, mundo!",
    "description": "Una aplicación de demostración simple",
    "button": {
      "submit": "Enviar",
      "cancel": "Cancelar"
    }
  }
}
</i18n>

i18n.json

{
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "vue-json": {
      "include": ["./example.vue"]
    }
  },
  "$schema": "https://lingo.dev/schema/i18n.json"
}

i18n.lock

version: 1
checksums:
  7142a39dd2be0c1e12089c922ab4fdb5:
    welcome: 1308168cca4fa5d8d7a0cf24e55e93fc
    description: 36349ca88e416a6f2d6ac8742f0a963c
    button/submit: dabdff794b5804b8f22ecab13f37fb7d
    button/cancel: efdc4af6863f1e503a7f9961be721eed
    messages/0: f77d23a0a4b7f8fc7f8fd458921b90dd
    messages/1: e841c4139402ded42079401299e4fa1e
  0378a0d09447bf0944e842f7e54d3ec2:
    welcome: 0468579ef2fbc83c9d520c2f2f1c5059
    description: 49f8864eb0e53903f04532bf33e1e4fa
    button/submit: 7c91ef5f747eea9f77a9c4f23e19fb2e
    button/cancel: 2e2a849c2223911717de8caa2c71bade
    messages/0: 97a8db12c3955a85c4f50e3951c91a40
    messages/1: 986a434e3895c8ee0b267df95cc40051