vue-i18n-directives

:flags: Helper directives for vue & vue-i18n

Usage no npm install needed!

<script type="module">
  import vueI18nDirectives from 'https://cdn.skypack.dev/vue-i18n-directives';
</script>

README

vue-i18n-directives

:flags: Helper directives for Vue.js & vue-i18n.

Support

  • Vue.js 2 ➡️ vue-i18n-directives@>=2.0.0 [master]
  • Vue.js 1 ➡️ vue-i18n-directives@>=1.0.0

Prerequisites

  1. Vue.js
  2. vue-i18n

Installation

$ npm i -S vue-i18n-directives

$ yarn add vue-i18n-directives

Directives

  1. v-t ➡️ Translate and set text through element innerText.
  2. v-ta ➡️ Translate and append text through element innerText
  3. v-tp ➡️ Translate and set text to input placeholder.
  4. v-tc ➡️ Translate and set capitalized text through element innerText.
  5. v-tu ➡️ Translate and set uppercased text through element innerText.
  6. v-tl ➡️ Translate and set lowercased text through element innerText.

Usage

// main.js
import Vue     from 'vue';
import VueI18n from 'vue-i18n';

import VueI18nDirectives from 'vue-i18n-directives';

Vue.use(VueI18n);
Vue.use(VueI18nDirectives);

// ...
<script>
  // Component.vue

  export default {
    name: 'Component'
  };
</script>

<template lang="pug">
  <h1 v-t="'user.name'"></h1>      <!-- normal translation -->
  <input v-tp="user.password'"/>   <!-- placeholder translation -->

  <p v-tc="'user.jobTitle'"></p>   <!-- capitalize translation -->
  <p v-tu="'user.role'"></p>       <!-- uppercase translation -->
  <p v-tl="'user.nickname'"></p>   <!-- lowercase translation -->

  <p v-ta="'user.profile'">This will not be overwritten</p>   <!-- append translation -->
</template>

Development

# dev mode
$ npm run dev

# test
$ npm run test

# build
$ npm run build

# docs
$ npm run docs

License

MIT License

Code Style

js-standard-style


This project was built with yeoman and generator-vue-component ❤️