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

Image for post
Image for post
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:

to install the package.

Then our component, we write:

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:

Then we can use it by writing:

main.js

App.vue

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:

or:

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

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:

Then we can use it by writing:

main.js

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:

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

For instance, we can write:

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

Image for post
Image for post
Photo by Srecko Skrobic on Unsplash

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.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store