Top Vue Packages for Adding Carousels, Toasts, and Dropdowns
Tags: vue, javascript
Published: 2020-07-26 23:58:54

---
title: Top Vue Packages for Adding Carousels, Toasts, and Dropdowns
published: true
date: 2020-07-26 23:40:21 UTC
tags: vue,javascript
canonical_url: https://thewebdev.info/2020/07/26/top-vue-packages-for-adding-carousels-toasts-and-dropdowns/?utm_source=rss&utm_medium=rss&utm_campaign=top-vue-packages-for-adding-carousels-toasts-and-dropdowns
---
**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 a carousel, displaying toasts, and add dropdowns.

### Vue Carousel

We can use the Vue Carousel component for adding a slideshow to our app.

To install it, we run:

```
npm i vue-carousel

```

Then we can use it by writing:

`main.js`

```
import Vue from "vue";
import App from "./App.vue";
import VueCarousel from "vue-carousel";

Vue.use(VueCarousel);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

```

`App.vue`

```
<template>
  <div>
    <carousel :per-page="1" :navigate-to="2" :mouse-drag="false">
      <slide v-for="n in 10" :key="n">Slide {{n}}</slide>
    </carousel>
  </div>
</template>

<script>
export default {
  data() {}
};
</script>

```

We set `navigate-to` to navigate the slide with the given index.

`per-page` is the number of slides per page.

`mouse-drag` is `false` so we can’t navigate by dragging the mouse.

Inside the `carousel` component, we add the `slide` component to add the slides.

It has many other options and also supports transitions.

Options include setting the pagination style, navigation labels, autoplay, and more.

### Vue Toastification

Vue Toastification lets us add toasts with various styles.

To use it, we first install the package by writing:

```
npm i vue-toastification

```

Then we can register the plugin and import the CSS:

```
import Vue from "vue";
import App from "./App.vue";
import Toast from "vue-toastification";
import "vue-toastification/dist/index.css";

Vue.use(Toast);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

```

Then we can display a toast by writing:

```
<template>
  <div></div>
</template>

<script>
export default {
  mounted() {
    this.$toast("toast!");
  }
};
</script>

```

Now we should get a popup with the message we passed into `this.$toast` displayed.

We can also write:

```
<template>
  <div></div>
</template>

<script>
export default {
  mounted() {
    this.$toast("My toast", {
      timeout: 2000
    });
  }
};
</script>

```

to add a delay before displaying the toast.

The delay is in milliseconds.

It also works with Nuxt and the composition API.

### vue-select

vue-select lets us add a drop-down that is more flexible than the regular select element.

To use it, we install it by running:

```
npm i vue-select

```

Then we can use it by registering the plugin and import the built-in styles:

```
import Vue from "vue";
import App from "./App.vue";
import vSelect from "vue-select";
import "vue-select/dist/vue-select.css";

Vue.component("v-select", vSelect);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

```

And we can add the dropdown with the `v-select` component:

```
<template>
  <div>
    <v-select v-model="country" :options="['Canada', 'United States']"></v-select>
    <p>{{country}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      country: ""
    };
  }
};
</script>

```

It binds to `country` via `v-model` , and it takes options via the `options` prop.

We can add a label that’s different from the value by writing:

```
<template>
  <div>
    <v-select v-model="country" label="name" :options="countries"></v-select>
    <p>{{country}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      country: "",
      countries: [{ name: "Canada", code: "ca" }, { name: "US", code: "us" }]
    };
  }
};
</script>

```

The `label` is displayed to the user.

We can even add pagination:

```
<template>
  <div>
    <v-select
      v-model="country"
      label="country"
      :options="paginated"
      @search="query => search = query"
      :filterable="false"
    >
      <li slot="list-footer">
        <button @click="offset -= 10" :disabled="!hasPrevPage">Prev</button>
        <button @click="offset += 10" :disabled="!hasNextPage">Next</button>
      </li>
    </v-select>
    <p>{{country}}</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    countries: [
      {
        country: "Afghanistan"
      },
      {
        country: "Albania"
      },
      {
        country: "Algeria"
      },
      {
        country: "American Samoa"
      },
      {
        country: "Andorra"
      },
      {
        country: "Angola"
      },
      {
        country: "Anguilla"
      },
      {
        country: "Antarctica"
      },
      {
        country: "Antigua and Barbuda"
      },
      {
        country: "Argentina"
      },
      {
        country: "Armenia"
      }
    ],
    search: "",
    offset: 0,
    limit: 10,
    country: ""
  }),
  computed: {
    filtered() {
      return this.countries.filter(country =>
        country.country.includes(this.search)
      );
    },
    paginated() {
      return this.filtered.slice(this.offset, this.limit + this.offset);
    },
    hasNextPage() {
      const nextOffset = this.offset + 10;
      return Boolean(
        this.filtered.slice(nextOffset, this.limit + nextOffset).length
      );
    },
    hasPrevPage() {
      const prevOffset = this.offset - 10;
      return Boolean(
        this.filtered.slice(prevOffset, this.limit + prevOffset).length
      );
    }
  }
};
</script>

```

We have the `search` event handler to set the search value of the dropdown.

We have a footer with the pagination buttons.

They call methods to get the slice of the array that we want displaying for the page.

We display the next or prev buttons if there are no next or previous pages respectively.

### Conclusion

Vue Carousel is an easy to use carousel for Vue apps.

Vue Toastification lets us add toasts easily.

vue-select is a dropdown component that’s much more powerful than a select element.

The post [Top Vue Packages for Adding Carousels, Toasts, and Dropdowns](https://thewebdev.info/2020/07/26/top-vue-packages-for-adding-carousels-toasts-and-dropdowns/) appeared first on [The Web Dev](https://thewebdev.info).