Top Vue Packages for Adding a Date Picker, Cookie Dialog Box, and Scrolling

Photo by Brooke Cagle on Unsplash

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 date pickers, scrolling, and cookie dialog box.

Vue date pick

Vue date pick is a lightweight and responsive date time picker.

We can use it by running:

npm install vue-date-pick

to install the package.

Then our component, we write:

<template>
  <div>
    <date-pick v-model="date"></date-pick>
    <p>{{date}}</p>
  </div>
</template>
<script>
import DatePick from "vue-date-pick";
import "vue-date-pick/dist/vueDatePick.css";
export default {
  components: { DatePick },
  data() {
    return {
      date: "2020-01-01"
    };
  }
};
</script>

We set the initial date in the data method.

Then we use the bundled date-pick component to add the date picker.

v-model binds the selected value to date .

It also comes with CSS to style the date picker.

vue-scroll