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, filters, and more.
vue-chartjs
vue-chartjs is a great package for adding us add all kinds of chats.
To install it, we run:
npm i vue-chartjs chart.js
We can then use it by writing:
Chart.vue
<script>
import { Bar } from "vue-chartjs";
export default {
extends: Bar,
mounted() {
this.renderChart({
labels: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
datasets: [
{
label: "Votes",
backgroundColor: "green",
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
}
]
});
}
};
</script>
App.vue
<template>
<div>
<Chart/>
</div>
</template>
<script>
import Chart from "@/components/Chart";
export default {
components: {
Chart
}
};
</script>
Our chart is in Chart.vue . There’s no template in the component. We just import the Bar component so that we can create a bar chart with our own data. datasets has the data that we want to display on the bars. labels has the chart labels at the bottom. this.renderChart renders the chart. In App.vue , we add the Chart component to display the chart. Alternatively, we can pass in props to our chart:
Chart.vue
<script>
import { Bar } from "vue-chartjs";
export default {
extends: Bar,
props: ["data", "options"],
mounted() {
this.renderChart(this.data, this.options);
}
};
</script>
App.vue
<template>
<div>
<Chart :data="data"/>
</div>
</template>
<script>
import Chart from "@/components/Chart";
export default {
components: {
Chart
},
data() {
return {
data: {
labels: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
datasets: [
{
label: "Votes",
backgroundColor: "green",
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
}
]
}
};
}
};
</script>
This is more flexible since our data comes from external sources like an API. We pass in the props for the data. It supports many other kinds of charts like line charts, pie charts, etc.
VueMorphling
The VueMorphling package has a collection of filters and directives that we can use to do various things.
To install it, we can run:
npm i vue-morphling
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import { VueMorphling } from "vue-morphling";
Vue.use(VueMorphling);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<p>{{ new Date(1990,2,20) | morph-age }}</p>
</div>
</template>
<script>
export default {
data() {}
};
</script>
We used the morph-age filter to display the age of the person given the date. We can use the morph-chop filter to cut off a part of a string.
For instance, we can write:
<template>
<div>
<p>{{ 'foo bar' | morph-chop(2) }}</p>
</div>
</template>
<script>
export default {
data() {}
};
</script>
We remove the last 2 characters of a string with morph-chop(2) . We can pass in 'start' to remove the first number of characters. And we can pass in 'end' to remove the last number of characters. Filters can also be used to templates, so we can write:
const msg **=** this.$morphChop('foo bar', 2);
To do the same thing we did in our template in our component code. It also has many other filters, including ones for currencies, dates, and more.
We can display JSON with the morph-json filter:
<template>
<div>
<pre>{{ obj | morph-json(2) }}</pre>
</div>
</template>
<script>
export default {
data() {
return {
obj: {
foo: { bar: 3 }
}
};
}
};
</script>
2 means we have 2 spaces for indentation. It has to be used with the pre tag so we get the code formatting. It also comes with a few useful directives. We can use the v-morph-highlight directive to add highlighting to our text.
For instance, we can write:
<template>
<div>
<p v-morph-highlight="'dog::green'">Dogs are great. I love dogs.</p>
</div>
</template>
<script>
export default {};
</script>
We highlight the word ‘dog’ no matter what case it starts with.
Conclusion
We can add charts to a Vue app with vue-chartjs. To display things our way, we can save some time with the vue-morphling package, which comes with various filters and directives. Thanks for reading my article, I hope you found it helpful!
