Skip to content
A translator directive for Vue.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Prepare for package Aug 12, 2015
index.js Prepare for package Aug 12, 2015
package.json Prepare for package Aug 12, 2015

Vue Translate

A translator directive for Vue.

The Basics

var Vue = require('Vue');
var translate = require('vue-translate');

// the messages data
translate.messages = {
  "hello": "你好"

Use as directive

The v-trans directive will translate title, arial-label, alt and text content automaticly.

<div v-trans title="hello">hello</div>

<!-- will be translated to -->
<div title="你好">你好</div>

Translate more attributes

If the message you want to translate is not on the default attributes, e.g. data-message, you can pass it to v-trans.

<div v-trans="data-message" data-message="hello">hello</div>

<!-- will be translated to -->
<div data-message="你好">你好</div>

Translate with variables

The translation messages can contain variables:

translate.messages = {
  "hello {{ name }}": "你好 {{ name }}"

If {{ name }} is lepture:

<div v-trans>hello {{ name }}</div>

<!-- will be translated to -->
<div>你好 lepture</div>
You can’t perform that action at this time.