Hi!

It’s been a while uh ?

I’ve almost forgotten that I had a blog, because I’ve been a bit busy lately.

Now that I’ll have more time and new computer parts that make my life better, I’d like to come back here and share some new stuff I made or will be making.


Vue-Wording

First, let me introduce you a little VueJs plugin I made for some projects of mine, it’s called “Vue-Wording”.

This little plugin is meant to give its users the the ability to have all the wording of an app centralised in a JSON object.

Here is the Github page of the project and the Demo Page


How does this work ?

To be able to use it, you should just npm i -S https://github.com/benavern/vue-wording, (will be available on github soon) and then use it as described below:

app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import Vue from 'vue'
import VueWordingPlugin from 'vue-wording'

const wording = {
"en": {
"key1": "Wording 1 is simple",
"key2": "Wording #{nb} is #{how}!",
"key3": {
"key31": "Wording 3",
"key32": "is an #{type}"
}
}
}

Vue.use(WordingPlugin, { lang: 'en', wording }

new Vue() // ...

Component.vue

1
2
3
4
5
6
7
<template>
<div>
<div>{{ $t('key1') }}</div>
<div>{{ $t('key2', {nb: 2, how: 'complicated'}) }}</div>
<pre>{{ $t('key3', {type: 'Object'}) }}</pre>
</div>
</template>

Simple isn’t it ?

I know there are a bunch of other plugins that can do the same but I wanted to know how Vuejs plugins work, and what a better way to learn if not by practicing ?


Some help would be great

I still have a problem: How to distribute it ? I know there is npm and stuff, and I’ll put it on that when I’ll be satisfied with how it is “packed”.

For now, I have a npm script that transpiles & minifies it, I’ve put it in the main key in the package.json file but I still think there are some better ways to do it. isn’t it a webpack way to do it ? Can someone help ?


However, this is something I did in a late night while thinking about a simple solution for what I needed.

What do you think ? How could I make it better ?

Let me know … ;)