Vue.js is an easy to use web app framework that we can use to develop interactive front end apps. In this article, we’ll look at how the best packages for adding charts, counting text, creating UUIDs, and adding file upload.
Vue-ECharts
Vue-ECharts is an easy to use chart component for Vue apps.
To install it, we can run:
npm i vue-echarts echarts echarts-gl
echarts and echarts-gl are dependencies.
Then we can write:
main.js
import Vue from "vue";
import App from "./App.vue";
import ECharts from "vue-echarts";
import "echarts/lib/chart/bar";
import "echarts/lib/component/tooltip";
import "echarts-gl";
Vue.component("v-chart", ECharts);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<v-chart :options="polar"/>
</template>
<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/polar'
export default {
components: {
'v-chart': ECharts
},
data () {
const data = Array(10).fill().map((_, i)=> (i / 10)*Math.PI*180)
return {
polar: {
title: {
text: 'chart'
},
legend: {
data: ['line']
},
polar: {
center: ['50%', '54%']
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
angleAxis: {
type: 'value',
startAngle: 0
},
radiusAxis: {
min: 0
},
series: [
{
coordinateSystem: 'polar',
name: 'line',
type: 'line',
showSymbol: false,
data
}
],
animationDuration: 2000
}
}
}
}
</script>
We created a polar chart with some numerical values.
Then we use the v-chart component to display the chart.
We use polar coordinates and enable animation by setting animationDuration which is measured in milliseconds.
legend sets the legend and it’s displayed on top.
data has in theseries property has the data for the graph.
vue-upload-component
vue-upload-component is a useful upload component for Vue apps.
We can install it by running:
npm i vue-upload-component
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
const VueUploadComponent = require("vue-upload-component");
Vue.component("file-upload", VueUploadComponent);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<file-upload
ref="upload"
v-model="files"
post-action="/post.method"
put-action="/put.method"
@input-file="inputFile"
@input-filter="inputFilter"
>
Upload file
</file-upload>
<p>{{files}}</p>
</div>
</template>
<script>
export default {
methods: {
inputFile(){},
inputFilter(){}
},
data() {
return {
files: undefined
}
}
}
</script>
We use the file-upload component.
v-model binds to the files state.
post-action is the URL to submit the file.
put-action is the URL to submit the file.
input-file and input-filter are emitted by file-upload .
inpit-file is emitted when a file is selected.
vue2-touch-events
vue2-touch-events lets us detect touch events in Vue apps.
To install it, we run:
npm i vue2-touch-events
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import Vue2TouchEvents from "vue2-touch-events";
Vue.use(Vue2TouchEvents);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<span v-touch:tap="touchHandler">Tap Me</span>
</div>
</template>
<script>
export default {
methods: {
touchHandler() {
console.log('tapped')
}
}
};
</script>
We use the v-touch directive to detect touches of the span.
The directive has many modifiers.
For instance, longtap detects long tap, swipe detects swipe, v-touch-options lets us set options with classes, swipe tolerance, and other things.
v-touch-class lets us set CSS classes for styling.
vue-uuid
Vue UUID lets us add a UUID to a Vue instance.
To install it, we run:
npm i vue-uuid
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import UUID from "vue-uuid";
Vue.use(UUID);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<div>{{ $uuid.v1() }}</div>
<div>{{ $uuid.v4() }}</div>
</div>
</template>
<script>
export default {};
</script>
We used the built-in methods to generate UUIDs.
vue-countable
vue-countable will count various quantities in a string like the number of paragraphs, sentences, words, and everything together.
To use it, we run:
npm i vue-countable
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueCountable from "vue-countable";
Vue.component("vue-countable", VueCountable);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<vue-countable :text="myText" :elementId="'id'" @change="change"></vue-countable>
</div>
</template>
<script>
export default {
data() {
return {
myText: "foo"
};
},
methods: {
change(event) {
console.log(event);
}
}
};
</script>
The vue-countable component will count the items.
It emits the change event when the text prop changes.
We set the text prop with the text we want to get the counts of.
Then event object has something like:
{
all: 3,
characters: 3,
paragraphs: 1,
sentences: 1,
words: 1
}
Conclusion
Vue-ECharts lets us create charts. vue-upload-component lets us add file upload inputs without hassle. vue-countable counts quantities in strings automatically. vue-uuid generates UUID for us automatically.
