Top Vue Packages for Adding Tooltips, Dropdowns, and Manage Cookies.
Tags: javascript, webdev, beginners, programming
Published: 2021-01-19 00:28:21

---
title: Top Vue Packages for Adding Tooltips, Dropdowns, and Manage Cookies.
published: true
date: 2020-07-27 19:59:19 UTC
tags: javascript,webdev,beginner,programming
canonical_url: https://thewebdev.info/2020/07/27/top-vue-packages-for-adding-tooltips-dropdowns-and-manage-cookies/?utm_source=rss&utm_medium=rss&utm_campaign=top-vue-packages-for-adding-tooltips-dropdowns-and-manage-cookies
---

**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 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.

The post [Top Vue Packages for Adding Tooltips, Dropdowns, and Manage Cookies.](https://thewebdev.info/2020/07/27/top-vue-packages-for-adding-tooltips-dropdowns-and-manage-cookies/) appeared first on [The Web Dev](https://thewebdev.info).