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.