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 auto-scrolling, animating numbers, highlighting code, sliders, and displaying notifications.
vue-seamless-scroll
vue-seamless-scroll lets us add a component that automatically scrolls through its contents.
To use it, we run:
npm i vue-seamless-scroll
to install it.
Then we can write:
<template>
<vue-seamless-scroll :data="listData" class="seamless-warp">
<ul class="item">
<li v-for="item in listData" :key="item">
<span v-text="item"></span>
</li>
</ul>
</vue-seamless-scroll>
</template>
<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
components: {
vueSeamlessScroll
},
data() {
return {
listData: Array(20)
.fill()
.map((_, i) => i)
};
}
};
</script>
We register the component.
And then we use the vue-seamless-scroll component.
We set the data prop to set the scroll data.
Then we loop through the entries we want to render.
Whatever is inside will be scrolled through continuously.
It’ll loop so it’ll keep scrolling from beginning to end until we navigate away from the page.
animated-number-vue
animated-number-vue lets us animate numbers in a Vue app.
To use it, we run:
npm i animated-number-vue
to install it.
Then we use it by writing:
<template>
<animated-number :value="value" :formatValue="formatToPrice" :duration="300"/>
</template>
<script>
import AnimatedNumber from "animated-number-vue";
export default {
components: {
AnimatedNumber
},
data() {
return {
value: 1000
};
},
methods: {
formatToPrice(value) {
return `$ ${value.toFixed(2)}`;
}
}
};
</script>
We use the animated-number component to display the animated number.
duration is the length of the animation.
value is the end number of the animation.
Vue Carousel 3d
Vue Carousel 3d is a 3D carousel for Vue apps.
To use it, we run:
npm i vue-carousel-3d
to install it.
Then we write:
main.js
import Vue from "vue";
import App from "./App.vue";
import Carousel3d from "vue-carousel-3d";
Vue.use(Carousel3d);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<carousel-3d>
<slide :index="0">Slide 1</slide>
<slide :index="1">Slide 2</slide>
<slide :index="2">Slide 3</slide>
</carousel-3d>
</div>
</template>
<script>
export default {};
to use it.
We use the carousel-3d with at least 3 slides.
The slide components house the slides.
Then we can flip through the slides.
Vue Toast Notification
Vue Toast Notification is a Vue plugin that lets us display toast in our Vue app.
To use it, we install it by running:
npm i vue-toast-notification
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueToast from "vue-toast-notification";
import "vue-toast-notification/dist/theme-default.css";
Vue.use(VueToast);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app"></div>
</template>
<script>
export default {
mounted() {
this.$toast.open("hello!");
}
};
</script>
We import the CSS and register the library.
Then we call this.$toast.open to open a basic notification.
We also display notifications for errors, warnings, and info messages.
Also, we can write:
<template>
<div id="app"></div>
</template>
<script>
export default {
mounted() {
this.$toast.open({
message: "Hello Vue",
type: "success",
duration: 5000,
dismissible: true
});
}
};
</script>
to set our own options.
dismissible makes it dismissible.
message is the message.
type is the type of toast.
duration is the length of time to display the toast.
vue-hljs
vue-hljs lets us display code in our Vue app with syntax highlighting.
To use it, we run:
npm i vue-hljs
to install it.
Then we write:
main.js
import Vue from "vue";
import App from "./App.vue";
import vueHljs from "vue-hljs";
import "vue-hljs/dist/vue-hljs.min.css";
Vue.use(vueHljs);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<div v-highlight>
<pre>
<code class="javascript">const foo = 'bar'</code>
</pre>
</div>
</div>
</template>
<script>
export default {};
</script>
to display the code.
We just use the v-highlight directive to add the syntax highlighting.
Conclusion
vue-hljs lets us add syntax highlighting to our code display.
vue-seamless-scroll makes scrolling automatic.
Vue Toast Notification displays notifications in various formats.
Vue Carousel 3d lets us add a 3D slider.
animated-number-vue animates numbers.
