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