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 appeared first on The Web Dev.