Top Vue Packages for Adding a Date Picker, Cookie Dialog Box, and Scrolling
Tags: vue, javascript
Published: 2020-07-26 23:58:55

---
title: Top Vue Packages for Adding a Date Picker, Cookie Dialog Box, and Scrolling
published: true
date: 2020-07-26 23:41:49 UTC
tags: vue,javascript
canonical_url: https://thewebdev.info/2020/07/26/top-vue-packages-for-adding-a-date-picker-cookie-dialog-box-and-scrolling/?utm_source=rss&utm_medium=rss&utm_campaign=top-vue-packages-for-adding-a-date-picker-cookie-dialog-box-and-scrolling
---
**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 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

vue-scroll is a package with a directive that watches scrolling.

To use it, we run:

```
npm i vue-scroll

```

Then we can use it by writing:

`main.js`

```
import Vue from "vue";
import App from "./App.vue";
import vuescroll from "vue-scroll";

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

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

```

`App.vue`

```
<template>
  <div v-scroll="onScroll" style="height: 200px; overflow-y: scroll">
    <ul>
      <li v-for="n in 100" :key="n">{{n}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    onScroll(e) {
      console.log(e);
    }
  }
};
</script>

```

We have div with a fixed height.

`overflow-y` is set to `scroll` so the div will scroll when it overflows.

We have 100 rows of items so it’ll definitely scroll.

When it scrolls `onScroll` will be called because of the `v-scroll` directive.

The `e` parameter is logged and we’ll see the content of it displayed in the log when we scroll.

We can throttle or denounce the running of the scroll handler.

To do that, we can write:

```
Vue.use(vuescroll, { throttle: 600 })

```

or:

```
Vue.use(vuescroll, { debounce: 600 })

```

We can also change the value we pass into the `v-scroll` directive an object and add the `throttle` or `debounce` modifier:

```
<template>
  <div
    v-scroll:throttle="{ fn: onScroll, throttle: 500 }"
    style="height: 200px; overflow-y: scroll"
  >
    <ul>
      <li v-for="n in 100" :key="n">{{n}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    onScroll(e) {
      console.log(e);
    }
  }
};
</script>

```

`throttle` can be replaced with `debounce` .

### Vue Cookie Law

Vue Cookie Law is a component that lets us display a cookie law message on our app.

It’s the message that’s displayed on many websites.

To use it, we install it by running:

```
npm i vue-cookie-law

```

Then we can use it by writing:

`main.js`

```
<template>
  <footer>
    <cookie-law theme="blood-orange"></cookie-law>
  </footer>
</template>

<script>
import CookieLaw from "vue-cookie-law";
export default {
  components: { CookieLaw }
};
</script>

```

We just put the `cookie-law` component into our component.

It comes with a built-in message and a button.

We can style the dialog by styling the `Cookie` , `Cookie __content` , and `Cookie__ button` class.

The message can be changed with the `message` prop.

Transitions, themes, button text, etc. all can change.

It can also store the cookie setting in local storage.

We can run a function when the button is clicked.

It has a slot for customizing content.

For instance, we can write:

```
<template>
  <footer>
    <cookie-law>
      <div slot-scope="props">
        <p>This site uses cookie</p>
        <button class="skew" @click="props.accept">
          <span>accept</span>
        </button>
        <button class="skew" @click="props.close">
          <span>decline</span>
        </button>
      </div>
    </cookie-law>
  </footer>
</template>

<script>
import CookieLaw from "vue-cookie-law";
export default {
  components: { CookieLaw }
};
</script>

```

We can also run our own function when the accept button is clicked.

For instance, we can write:

```
<template>
  <footer>
    <cookie-law @accept="thank"></cookie-law>
  </footer>
</template>

<script>
import CookieLaw from "vue-cookie-law";
export default {
  components: { CookieLaw },
  methods: {
    thank() {
      alert("thanks");
    }
  }
};
</script>

```

We listen to the `accept` event to run something when the accept button is clicked.

### Conclusion

Vue date pick lets us add a lightweight and responsive date picker to our app.

vue-scroll is a package that has a directive to watch scrolling.

Vue Cookie Law is a component that has a cookies message. The setting is saved to local storage.

The post [Top Vue Packages for Adding a Date Picker, Cookie Dialog Box, and Scrolling](https://thewebdev.info/2020/07/26/top-vue-packages-for-adding-a-date-picker-cookie-dialog-box-and-scrolling/) appeared first on [The Web Dev](https://thewebdev.info).