i18next-cli-vue

English | 中文

i18next-cli plugin for extracting i18n translation keys from Vue Single File Components (SFC).

Features

• Full Vue Support: Supports Vue 2.6+ and Vue 3.x
• Dual-mode Parsing: Automatically handles translation calls in <script> and <template>
• Multiple Syntaxes: Supports t() function, data-i18n attribute, dynamic bindings, and more
• TypeScript Support: Complete type definitions
• Highly Configurable: Custom function names, attribute names, file patterns, and more

Installation

npm install i18next-cli-vue --save-dev

Usage

Basic Configuration

// i18next.config.js
import { defineConfig } from 'i18next-cli';
import i18nextVuePlugin from 'i18next-cli-vue';

export default defineConfig({
	locales: ['en', 'zh', 'fr'],
	extract: {
		input: 'src/**/*.{vue,ts}',
		output: 'locales/{{language}}.json',
		defaultNS: 'translation',
	},
	plugins: [i18nextVuePlugin()],
});

Full Configuration

// i18next.config.js
import { defineConfig } from 'i18next-cli';
import i18nextVuePlugin from 'i18next-cli-vue';

export default defineConfig({
	locales: ['en', 'zh'],
	extract: {
		input: 'src/**/*.{vue,ts,js}',
		output: 'locales/{{language}}/{{ns}}.json',
		defaultNS: 'common',
	},
	plugins: [
		i18nextVuePlugin({
			// Explicitly specify Vue version (2 | 3)
			vueVersion: 3,

			// Whether to parse dynamic binding attributes (`:attr`, `v-bind:attr`)
			vueBindAttr: true,

			// Translation function names
			functions: ['t', '$t'],

			// Namespace function names
			namespaceFunctions: ['useTranslation', 'withTranslation'],

			// HTML attribute name
			attr: 'data-i18n',

			// Options attribute name
			optionAttr: 'data-i18n-options',

			// File patterns to match
			filePatterns: ['.vue', '.nvue'],
		}),
	],
});

Supported Syntax

Template Syntax

<template>
	<!-- data-i18n attribute -->
	<h1 data-i18n="welcome.title">Welcome</h1>

	<!-- Multiple keys (semicolon separated) -->
	<p data-i18n="greeting;welcome.message"></p>

	<!-- Dynamic binding :attr -->
	<button :aria-label="t('button.submit')">Submit</button>

	<!-- v-bind:attr -->
	<input v-bind:placeholder="t('input.placeholder')" />

	<!-- v-on:click -->
	<button @click="t('button.click')">Click</button>
</template>

Script Syntax

<script>
import { useTranslation } from 'vue-i18next';

export default {
	setup() {
		const { t } = useTranslation('namespace');

		return {
			// Simple key
			title: t('welcome.message'),

			// With default value
			greeting: t('greeting', 'Hello World'),

			// With namespace prefix
			namespaced: t('shared:key'),
		};
	},
};
</script>

Lint Usage

Since i18next-cli@1.44.0, lint supports plugin hooks. i18next-cli-vue now provides lintOnLoad and lintOnResult so .vue files can be linted directly.

// i18next.config.js
import { defineConfig } from 'i18next-cli';
import i18nextVuePlugin from 'i18next-cli-vue';

export default defineConfig({
	locales: ['en', 'zh'],
	extract: {
		input: 'src/**/*.{vue,ts,js}',
		output: 'locales/{{language}}/{{ns}}.json',
	},
	plugins: [i18nextVuePlugin()],
});

If you only want to lint JavaScript/TypeScript files, you can still ignore Vue SFCs:

lint: {
	// Only lint JS/TS files
	input: ['src/**/*.{js,ts,jsx,tsx}'],
	ignore: ['**/*.vue'],
},

API

Options

Option	Type	Default Value	Description
vueVersion	2 | 3 | undefined	undefined	Explicit Vue version
vueBindAttr	boolean	true	Parse dynamic bindings
functions	string[]	['t', '$t']	Translation function names
namespaceFunctions	string[]	['useTranslation', 'withTranslation']	Namespace functions
attr	string	'data-i18n'	i18n attribute name
optionAttr	string	'data-i18n-options'	Options attribute name
filePatterns	string[]	['.vue', '.nvue']	File matching patterns

Development

Install Dependencies

npm install

Build

npm run build

Test

npm run test        # watch mode
npm run test:run    # single run
npm run test:coverage # coverage report

Code Formatting

npm run format      # format code
npm run format:check # check formatting

License

MIT License