Top Vue Packages for Adding Carousels, Infinite Scroll, and Dynamic Templates
Tags: javascript, webdev, beginners, programming
Published: 2021-01-19 00:20:56

---
title: Top Vue Packages for Adding Carousels, Infinite Scroll, and Dynamic Templates
published: true
date: 2020-07-27 19:54:52 UTC
tags: javascript,webdev,beginner,programming
canonical_url: https://thewebdev.info/2020/07/27/top-vue-packages-for-adding-carousels-infinite-scroll-and-dynamic-templates/?utm_source=rss&utm_medium=rss&utm_campaign=top-vue-packages-for-adding-carousels-infinite-scroll-and-dynamic-templates
---

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

**Even more articles at http://thewebdev.info/**

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.

The post [Top Vue Packages for Adding Carousels, Infinite Scroll, and Dynamic Templates](https://thewebdev.info/2020/07/27/top-vue-packages-for-adding-carousels-infinite-scroll-and-dynamic-templates/) appeared first on [The Web Dev](https://thewebdev.info).