vue-i18n-directives

🎏 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

---

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