Top Vue Packages for Adding Mixins, Date Pickers, Input Masks, and Carousels

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 mixins, date pickers, input masks, and carousels.

vue-mixins

vue-mixins is a set of mixins that we can use in Vue.

To install it, we run:

npm i vue-mixins

Then we can write:

App.vue

<template>
  <div id="app"></div>
</template>

<script>
export default {
  mixins: [require("vue-mixins/onClick")],
  mounted() {
    this.onClick = function(){
      console.log('clicked')
    }
    this.click();
  }
};
</script>

We include the mixin that comes with the package.

Then we set the onClick method to what we want so that we can use it.

Then we can call the this.click method that comes with the mixin to trigger it.

It can listen and trigger to many other events like window resize, element resizes, scroll, setting dynamic CSS, and much more.

Flickity for Vue.js

Flickity for Vue.js is a package that lets us add a carousel to display whatever we want.

To install it, we run:

npm i vue-flickity

Then we can use it by writing:

<template>
  <div id="app">
    <flickity ref="flickity" :options="flickityOptions">
      <div class="carousel-cell" v-for="n in 10" :key="n">{{n}}</div>
    </flickity>
    <button @click="previous()">Previous</button>
    <button @click="next()">Next</button>
  </div>
</template>

<script>
import Flickity from "vue-flickity";

export default {
  components: {
    Flickity
  },
  data() {
    return {
      flickityOptions: {
        initialIndex: 3,
        prevNextButtons: false,
        pageDots: false,
        wrapAround: true
      }
    };
  },
  methods: {
    next() {
      this.$refs.flickity.next();
    },

    previous() {
      this.$refs.flickity.previous();
    }
  }
};
</script>

We use the flickity component to display the carousel.

We also add buttons to navigate through the slides.

Vue input mask

Vue input mask is an input mask directive that’s added onto the input element to create an input mask.

To install it, we run:

npm i v-mask

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueMask from "v-mask";
Vue.use(VueMask);
Vue.config.productionTip = false;

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

App.vue

<template>
  <div id="app">
    <input type="text" v-mask="'###-###'" v-model="num">
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0
    };
  }
};
</script>

We have the v-mask directive to format the number.

Also, we can use it as a filter:

<template>
  <div id="app">
    <span>{{ '1234567890' | VMask('(###) ###-####') }}</span>
  </div>
</template>

<script>
export default {};
</script>

We can set the format using the VMask filter.

Also, we can it to letters, numbers, or make characters optional.

vue-datepicker

We can use the vue-datepicker package to display a date picker that we can use to let users select dates.

To use it, we install it by running:

npm i vue-datepicker

Then we can use it by writing:

<template>
  <div id="app">
    <date-picker :date="startTime" :option="option" :limit="limit"></date-picker>
  </div>
</template>

<script>
import myDatepicker from "vue-datepicker";

export default {
  data() {
    return {
      startTime: {
        time: ""
      },
      endtime: {
        time: ""
      },
      option: {
        type: "day",
        week: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
        month: [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
          "August",
          "September",
          "October",
          "November",
          "December"
        ],
        format: "YYYY-MM-DD",
        placeholder: "start time",
        inputStyle: {
          padding: "6px",
          "line-height": "22px",
          color: "#5F5F5F"
        },
        color: {
          header: "#ccc",
          headerText: "#f00"
        },
        buttons: {
          ok: "Ok",
          cancel: "Cancel"
        },
        overlayOpacity: 0.5,
        dismissible: true
      },
      timeoption: {
        type: "min",
        week: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
        month: [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
          "August",
          "September",
          "October",
          "November",
          "December"
        ],
        format: "YYYY-MM-DD HH:mm"
      },
      multiOption: {
        type: "multi-day",
        week: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
        month: [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
          "August",
          "September",
          "October",
          "November",
          "December"
        ],
        format: "YYYY-MM-DD HH:mm"
      },
      limit: [
        {
          type: "weekday",
          available: [1, 2, 3, 4, 5]
        },
        {
          type: "fromto",
          from: "2020-02-01",
          to: "2020-12-20"
        }
      ]
    };
  },
  components: {
    "date-picker": myDatepicker
  }
};
</script>

We can set many options. The month and day names can be set. placeholder sets the placeholder. inputStyle sets the input style. Also, we can use the limit property to limit the date range.

Conclusion

vue-mixins provides with a set of mixins to trigger and watch events. Flickity for Vue.js lets us add carousels to our code. Vue input mask lets us add an input mask to an input. vue-datepicker is a date picker that we can use to let users select dates.