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 a slider, datepicker, timeline, and intersection detection.
vue-textra
vue-textra lets us add a text slider to our Vue app.
To install it, we run:
npm i vue-textra
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import Textra from "vue-textra";
Vue.use(Textra);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<textra :data='words' :timer="4" filter="flash" />
</div>
</template>
<script>
export default {
data(){
return {
words: ['foo', 'bar', 'baz']
}
}
};
</script>
We register the plugin.
Then we add the textra component that displayed each string in the array one by one.
timer is the time to display each string in seconds.
filter is the effect when transitioning between text.
We can make the component loop infinitely with the infinite prop.
Other filter effects include simple , bottom-top , top-bottom , right-left , left-right , press , scale , flash and flip .
VueWaypoint
VueWaypoint lets us run functions based on elements’ positions based on viewport.
To install it, we run:
npm i vue-waypoint
Then we can write:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueWaypoint from "vue-waypoint";
Vue.use(VueWaypoint);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<div
v-for="n in 50"
:key="n"
v-waypoint="{ active: true, callback: onWaypoint, options: intersectionOptions }"
>{{n}}</div>
</div>
</template>
<script>
export default {
data() {
return {
intersectionOptions: {
root: null,
rootMargin: "0px 0px 0px 0px",
threshold: [0, 1]
}
};
},
methods: {
onWaypoint({ going, direction }) {
if (going === this.$waypointMap.GOING_IN) {
console.log("waypoint going in!");
}
if (direction === this.$waypointMap.DIRECTION_TOP) {
console.log("waypoint going top!");
}
}
}
};
</script>
We register the plugin in main.js .
Then we use the v-waypoint directive to watch the element’s entry and exit from the viewport.
this.$waypointMap.GOING_IN indicates it’s going inside the viewport.
And DIRECTION_TOP means it’s moving to the top.
It can also detect the direction to the right, bottom, and left.
vue-pipeline
vue-pipeline lets us add a pipeline to display to our Vue app.
We can install it by running:
npm install vue-pipeline
Then we can write:
main.js
<template>
<div id="app">
<vue-pipeline :data="data"></vue-pipeline>
</div>
</template>
<script>
export default {
data() {
return {
data: [
{
name: "Start",
hint: "Start",
status: "start",
next: [{ index: 1, weight: 2 }]
},
{
name: "eat",
hint: "eat",
status: "success",
next: [{ index: 2, weight: 0 }, { index: 4, weight: 2 }]
},
{
name: "drink",
hint: "drink",
status: "failure",
next: [{ index: 3, weight: 0 }]
},
{
name: "sleep",
hint: "sleep",
status: "paused",
next: [{ index: 4, weight: 0 }]
},
{ name: "end ", hint: "2m23s", status: "end", next: [] }
]
};
}
};
</script>
We register the component and then add the vue-pipeline component to our component.
The data is an array with various properties.
name is the name of the item. hint is displayed on hover.
status is displayed as an icon. next indicates the next step.
Other props includes xstep to change the horizontal position from the previous node.
ystep changes the vertical position from the previous node.
lineStyle is a string for the line style. It can be default , bessel , or line .
vuejs-datepicker
We can add use vuejs-datepicker to add a date picker to our app.
To install it, we can run:
npm i vuejs-datepicker
Then we can use it by adding:
<template>
<div id="app">
<datepicker v-model="date"></datepicker>
<p>{{date}}</p>
</div>
</template>
<script>
import Datepicker from "vuejs-datepicker";
export default {
data() {
return {
date: undefined
};
},
components: {
Datepicker
}
};
</script>
We register the Datepicker component, then we add it to the template.
We set the v-model with the date state to bind it to that.
Now when we select a date, we get the date displayed.
It supports changing many parts of the date picker, including the icons, buttons, setting it to required or disabled, changing to display Monday first, and much more.
Conclusion
vuejs-datepicker lets us add a datepicker.
vue-pipeline lets us add a timeline display.
vue-textra lets us add a text slider.
VueWaypoint adds intersection detection to our app.
