Top Vue Packages for Handling Outside Clicks and Add Tabs and Date Pickers
Tags: javascript, webdev, beginners, programming
Published: 2021-01-19 00:28:04

---
title: Top Vue Packages for Handling Outside Clicks and Add Tabs and Date Pickers
published: true
date: 2020-07-27 19:58:40 UTC
tags: javascript,webdev,beginner,programming
canonical_url: https://thewebdev.info/2020/07/27/top-vue-packages-for-handling-outside-clicks-and-add-tabs-and-date-pickers/?utm_source=rss&utm_medium=rss&utm_campaign=top-vue-packages-for-handling-outside-clicks-and-add-tabs-and-date-pickers
---

**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 handling outside clicks, tabs, and date pickers.

### v-click-outside-x

v-click-outside-x is a directive that lets us handle clicks outside an element easily.

To install it, we run:

```
npm i v-click-outside-x

```

Then we can use it by writing:

`main.js`

```
import Vue from "vue";
import App from "./App.vue";
import * as vClickOutside from "v-click-outside-x";

Vue.use(vClickOutside);

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

```

`App.vue`

```
<template>
  <div v-click-outside="onClickOutside">click me</div>
</template>

<script>
export default {
  methods: {
    onClickOutside(event) {
      console.log("Clicked outside. Event: ", event);
    }
  }
};
</script>

```

We have a div that we add the `v-click-outside` directive to.

And we pass an event handler function to it for handling clicks outside the element.

`event` is the event object that we use when clicking outside.

We can also use it to handle multiple events.

For instance, we can write:

```
<template>
  <div
    v-click-outside.capture="onClickOutside"
    v-click-outside:click="onClickOutside"
    v-click-outside:pointerdown.capture="onClickOutside"
  >click me</div>
</template>

<script>
export default {
  methods: {
    onClickOutside(event) {
      console.log("Clicked outside. Event: ", event);
    }
  }
};
</script>

```

### vue-tmn-tabs

vue-tmn-tabs is a simple tabs component.

To install it, we can run:

```
npm i vue-tmn-tabs

```

Then we can use it by writing:

`main.js`

```
import Vue from "vue";
import App from "./App.vue";
import { Tab, Tabs } from "vue-tmn-tabs";

Vue.component("tab", Tab);
Vue.component("tabs", Tabs);

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

```

`App.vue`

```
<template>
  <div>
    <tabs transitionName="fade">
      <tab :title="'Tab1'">
        <h1>Tab 1</h1>
        <p>foo</p>
      </tab>
      <tab :title="'Tab2'">
        <h1>Tab 2</h1>
        <p>bar</p>
      </tab>
      <tab :title="'Tab3'">
        <h1>Tab 3</h1>
        <p>baz</p>
      </tab>
      <tab :title="'Tab4'">
        <h1>Tab 4</h1>
        <p>qu</p>
      </tab>
    </tabs>
  </div>
</template>

<script>
export default {};
</script>

```

We have the `tabs` component to add the tabs.

`title` is the title for the tabs, which are displayed in the tab buttons.

`tab` has the tab content.

We can add styling to the generated classes.

### vue2-datepicker

vue2-datepicker is a date picker that is very customizable.

To use it, we install it by running:

```
npm i vue2-datepicker

```

Then we can use it by writing:

```
<template>
  <div>
    <date-picker v-model="time" valuetype="format"></date-picker>
    <p>{{time}}</p>
  </div>
</template>

<script>
import DatePicker from "vue2-datepicker";
import "vue2-datepicker/index.css";

export default {
  components: { DatePicker },
  data() {
    return {
      time: null
    };
  }
};
</script>

```

We import the component and CSS.

Then we use the `date-picker` component to display the items.

`v-model` is bound to the `time` state.

`valuetype` specifies the format of the selected value.

The possible values include `date` , `timestamp` , `format` , and `token` .

So we can also write:

```
<template>
  <div>
    <date-picker v-model="time" type="datetime"></date-picker>
    <p>{{time}}</p>
  </div>
</template>

<script>
import DatePicker from "vue2-datepicker";
import "vue2-datepicker/index.css";

export default {
  components: { DatePicker },
  data() {
    return {
      time: null
    };
  }
};
</script>

```

to add a time picker.

Or we can write:

```
<template>
  <div>
    <date-picker v-model="time" range></date-picker>
    <p>{{time}}</p>
  </div>
</template>

<script>
import DatePicker from "vue2-datepicker";
import "vue2-datepicker/index.css";

export default {
  components: { DatePicker },
  data() {
    return {
      time: null
    };
  }
};
</script>

```

to let us select a start and end date with one date picker.

It also supports theming and styling.

It has slots to display anything we want like changing the icons, input, header, or footer.

### vue-click-outside

vue-click-outside is another Vue plugin that lets us handle clicks outside an element.

To install it, we run:

```
npm i vue-click-outside

```

Then we can use it by writing:

```
<template>
  <div>
    <div v-click-outside="hide" @click="toggle">Toggle</div>
    <div v-show="opened">Popup</div>
  </div>
</template>

<script>
import ClickOutside from "vue-click-outside";

export default {
  data() {
    return {
      opened: false
    };
  },
  directives: {
    ClickOutside
  },
  methods: {
    toggle() {
      this.opened = true;
    },

    hide() {
      this.opened = false;
    }
  }
};
</script>

```

We have a div that toggles a pop-up item on and off.

The `click` listener toggles the pop up on and it’ll be off when we click outside it.

### Conclusion

v-click-outside and v-click-outside are plugins that let us handle clicks outside an element.

vue2-datepicker lets us add a date picker that’s very customizable.

vue-tmn-tabs lets us add tabs to a page.

The post [Top Vue Packages for Handling Outside Clicks and Add Tabs and Date Pickers](https://thewebdev.info/2020/07/27/top-vue-packages-for-handling-outside-clicks-and-add-tabs-and-date-pickers/) appeared first on [The Web Dev](https://thewebdev.info).