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 the best packages for adding calendars, smooth scrolling, query builder UI, and charts.
vue-smoothscroll
vue-smoothscroll lets us add a smooth scrolling effect to our Vue app.
To use it, we run:
npm i vue-smoothscroll
Then we write:
main.js
import Vue from "vue";
import App from "./App.vue";
const vueSmoothScroll = require("vue-smoothscroll");
Vue.use(vueSmoothScroll);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div class="root">
<div v-smoothscroll="{ duration : 500, callback: callback, axis :'y' }">
<div :ref="`num-${n}`" v-for="n in 100" :key="n">{{n}}</div>
</div>
</div>
</template>
<script>
export default {
methods: {
callback() {
console.log("scrolling");
}
}
};
</script>
to use it.
We use the v-smoothscroll directive to enable scrolling.
When we scroll, the callback will be run.
axis specifies the axis that we’re scrolling.
duration is the duration that we scroll.
Vue Query Builder
Vue Query Builder is a component that lets us add a query builder UI to our app.
To use it, we first install it by running:
npm install vue-query-builder
Then we use it by writing:
<template>
<div class="root">
<vue-query-builder v-model="query" :rules="rules"></vue-query-builder>
<p>{{query}}</p>
</div>
</template>
<script>
import VueQueryBuilder from "vue-query-builder";
export default {
data() {
return {
rules: [
{
type: "text",
id: "vegetable",
label: "Vegetable"
},
{
type: "radio",
id: "fruit",
label: "Fruit",
choices: [
{ label: "apple", value: "apple" },
{ label: "orange", value: "orange" }
]
}
],
query: undefined
};
},
components: { VueQueryBuilder }
};
</script>
We use the vue-query-builder component to add the query builder UI.
And we specify the rules so that the controls are displayed with those things on it.
choices show up as the choices. radio button shows up ad radio buttons.
type shows in the Match Type dropdown.
We can Add Rule and Add Group as we wish.
vue-schart
vue-schart is a chart library that’s easy to use.
We can use it by install it with:
npm i vue-schart
Then we write:
<template>
<div id="app">
<schart class="wrapper" canvasId="canvas" :options="options"/>
</div>
</template>
<script>
import Schart from "vue-schart";
export default {
data() {
return {
options: {
type: "bar",
title: {
text: "Sales"
},
bgColor: "white",
labels: ["apple", "orange", "grape"],
datasets: [
{
label: "January sales",
fillColor: "green",
data: [474, 281, 482]
},
{
label: "February sales",
data: [164, 178, 190]
}
]
}
};
},
components: {
Schart
}
};
</script>
<style>
.wrapper {
width: 80vw;
height: 300px;
}
</style>
to create a bar chart.
We use the schart component.
Also, we specify the ID of the canvas to set the canvas’s ID.
options has all our chart options including the data.
type is the chart type.
title is the chart title.
bgColor is the background color.
labels is the x-axis labels.
dataasets has all our datasets.
label has the label for the legend.
fillColor is the fill color of the bars.
data has the values for the y-axis.
vue-calendar-component
vue-calendar-component is a Vue calendar component that’s customizable.
To use it, we run:
npm i vue-calendar-component
to install it.
Then we can use it by writing:
<template>
<div id="app">
<Calendar :textTop="textTop" v-on:choseDay="clickDay" v-on:changeMonth="changeDate"></Calendar>
</div>
</template>
<script>
import Calendar from "vue-calendar-component";
export default {
components: {
Calendar
},
data() {
return {
textTop: ["M", "T", "W", "T", "F", "S", "S"]
};
},
methods: {
clickDay(data) {
console.log(data);
},
changeDate(data) {
console.log(data);
},
clickToday(data) {
console.log(data);
}
}
};
</script>
We use the Calendar component to display the calendar.
textTop lets us change the text for the day of the week.
It also emits events when a day or week is chosen from the calendar.
Also, it takes many other kinds of customizations. like changing to start on Sunday instead of Monday.
We can also use assign a ref to it to programmatically navigate the calendar.
Conclusion
vue-smoothscroll lets us add smooth scroll to our Vue app.
Vue Query Builder is a component that provides us with a query builder UI.
vue-schart is an easy to use chart component.
vue-calendar-component is a calendar component for Vue apps.
