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 to add tooltips, manage cookies, and add dropdowns.
VueTippy
VueTippy lets us add tooltips to a Vue app with ease.
To use it, we install it by writing:
npm i vue-tippy
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueTippy, { TippyComponent } from "vue-tippy";
Vue.use(VueTippy);
Vue.component("tippy", TippyComponent);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
We register the VueTippy plugin and register the TippyComponent .
Then we can use the v-tippy directive by writing:
<template>
<div>
<button content="hello" v-tippy>click me</button>
</div>
</template>
<script>
export default {};
</script>
We just set the content to what we want.
Now we get a tooltip when we hover over it.
To customize the tooltip display, we can use the tippy component and populate the provided slots to add the content we want.
For example, we can write:
<template>
<div>
<tippy arrow>
<template v-slot:trigger>
<button>click me</button>
</template>
<div>
<h3>Header</h3>
<p style="color: black">{{ message }} - data binding</p>
</div>
</tippy>
</div>
</template>
<script>
export default {};
</script>
We add the tippy component and add the element that triggers the tooltip in the trigger slot.
The default slot has the content for the tooltip.
vue-cookie
vue-cookie lets us manage cookies the way we want.
To install it, we write:
npm i vue-cookie
Now we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
const VueCookie = require("vue-cookie");
Vue.use(VueCookie);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
to register the VueCookie plugin.
Then we can save a cookie by writing:
<template>
<div></div>
</template>
<script>
export default {
mounted() {
this.$cookie.set("test", "hello", 1);
}
};
</script>
We save the cookie easily with this.
The first argument is the cookie name, the 2nd is the value, the 3rd is the expiry time in days.
It’s much easier than saving cookies without a library.
To get a cookie, we can write:
this.$cookie.get('test');
And we can delete a cookie by writing:
this.$cookie.delete('test');
We can also change the domain and expiry time of the cookie by writing:
<template>
<div></div>
</template>
<script>
export default {
mounted() {
this.$cookie.set("test", "hello", { expires: 1, domain: "localhost" });
}
};
</script>
We can set the cookie expiry time and domain.
There are other ways to do this.
vue-multiselect
vue-multiselect is a versatile dropdown component for Vue apps.
To install it, we run:
npm i vue-multiselect
Then we can use it by writing:
<template>
<div>
<multiselect
v-model="selected"
:options="options">
</multiselect>
</div>
</template>
<script>
import Multiselect from 'vue-multiselect'
export default {
components: { Multiselect },
data () {
return {
selected: null,
options: ['foo', 'bar', 'baz']
}
}
}
</script>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
We use the multiselect component to create a dropdown.
v-model binds the selected value to a state.
options lets us set the options for the dropdown.
The style tag has the styles.
It supports many other options like Vuex integration, multi-select, tag input, and more.
vue-cookies
vue-cookies is another Vue library that lets us manage cookies in a Vue app.
To install it, we run:
npm i vue-cookies
Now we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueCookies from "vue-cookies";
Vue.use(VueCookies);
Vue.$cookies.config("30d");
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div></div>
</template>
<script>
export default {
mounted() {
this.$cookies.set("foo", "bar");
}
};
</script>
In main.js , we registered the plugin and set a global config.
We set all cookies created by vue-cookies to expire in 30 days.
In our component, we set a cookie with this.$cookies.set ,
The first argument is the key and the 2nd is the corresponding value.
The 3rd argument is the expiry time in seconds.
For instance, we can write:
this.$cookies.set("foo", "bar", 1);
We can use the remove method to remove a cookie:
this.$cookies.remove("token");
Conclusion
vue-cookie and vue-cookies are both useful plugins for letting us add cookie management features into our Vue app.
VueTippy is a handy tooltip library.
vue-multiselect is a versatile dropdown library.
