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 carousels, infinite scrolling, and dynamic templates.
vue-agile
vue-agile is an easy to use and customizable carousel for Vue app.s
To install it, we run:
npm i vue-agile
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueAgile from "vue-agile";
Vue.use(VueAgile);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<agile>
<div class="slide">
<h3>slide 1</h3>
</div>
<div class="slide">
<h3>slide 2</h3>
</div>
</agile>
</div>
</template>
<script>
export default {};
</script>
We register the plugin in main.js .
Then we use the agile component to add the carousel.
We add divs with the class slide to add slides.
We’ll see buttons to navigate between the slides.
It has many other options like timing, speed, throttling, initial slide, and more.
vue-infinite-scroll
vue-infinite-scroll is a Vue plugin that lets us add infinite scrolling to our app.
To install it, we can write:
npm i vue-infinite-scroll
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import infiniteScroll from "vue-infinite-scroll";
Vue.use(infiniteScroll);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
<div v-for="n in num" :key="n">{{n}}</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
num: 50,
busy: false
};
},
methods: {
loadMore() {
this.num += 50;
}
}
};
</script>
We registered the infiniteScroll plugin.
Then we add the v-infinite-scroll directive to enable infinite scrolling on the component.
Then div inside can be loaded with infinite scrolling.
infinite-scroll-disabled lets us disable infinite scrolling when data is loading.
infinite-scroll-distance is how much of the portion of the screen is left before we load more data in percentage points.
10 means we load more data when we have 10% of the screen left to scroll.
v-runtime-template
v-runtime-template lets us load Vue templates in our components.
Without this package, we can load HTML with v-html , but we can’t load anything with component tags, directives, or other Vue entities.
To install it, we run:
npm i v-runtime-template
Then we can write:
components/HelloWorld.vue
<template>
<div class="hello">hello</div>
</template>
<script>
export default {
name: "HelloWorld"
};
</script>
App.vue
<template>
<div>
<v-runtime-template :template="template"></v-runtime-template>
</div>
</template>
<script>
import VRuntimeTemplate from "v-runtime-template";
import HelloWorld from "@/components/HelloWorld";
export default {
data: () => ({
template: `
<hello-world></hello-world>
`
}),
components: {
VRuntimeTemplate,
HelloWorld
}
};
</script>
We use the v-runtime-template component with the template prop to set the template.
Also, we import the HelloWorld component so that we can include it in the template.
We can also pass in props as usual:
component/HelloWorld.vue :
<template>
<div class="hello">hello {{name}}</div>
</template>
<script>
export default {
name: "HelloWorld",
props: ["name"]
};
</script>
App.vue
<template>
<div>
<v-runtime-template :template="template"></v-runtime-template>
</div>
</template>
<script>
import VRuntimeTemplate from "v-runtime-template";
import HelloWorld from "@/components/HelloWorld";
export default {
data: () => ({
template: `
<hello-world name='world'></hello-world>
`
}),
components: {
VRuntimeTemplate,
HelloWorld
}
};
</script>
Vue Material Design Icon Components
We can use the Vue Material Design Icon Components package to add Material Design icons to our Vue app.
First, we install it by running:
npm i vue-material-design-icons
Then we can add the following to our component:
<template>
<div>
<menu-icon/>
</div>
</template>
<script>
import MenuIcon from "vue-material-design-icons/Menu.vue";
export default {
components: {
MenuIcon
}
};
</script>
We just import the icon and then register the component and use it.
Conclusion
vue-agile lets us add a carousel.
Vue Material Design Icon Components are a set of components with Material Design icons.
v-runtime-template lets us add dynamic templates that can have Vue code in it.
vue-infinite-scroll let us add infinite scrolling.
