Top Vue Packages for Adding Floating Action Buttons, Tables, Input Masks, and More
Tags: vue, javascript
Published: 2020-07-26 23:58:56

---
title: Top Vue Packages for Adding Floating Action Buttons, Tables, Input Masks, and More
published: true
date: 2020-07-26 23:42:27 UTC
tags: vue,javascript
canonical_url: https://thewebdev.info/2020/07/26/top-vue-packages-for-adding-floating-action-buttons-tables-input-masks-and-more/?utm_source=rss&utm_medium=rss&utm_campaign=top-vue-packages-for-adding-floating-action-buttons-tables-input-masks-and-more
---
**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 floating action buttons, handling clicks outside an element, input masks, and tables.

### Vue Floating Action Button

Vue Floating Action Button lets us add a floating action button easily.

To install it, we run:

```
npm i vue-float-action-button

```

Then we can use it by writing:

`main.js`

```
import Vue from "vue";
import App from "./App.vue";
import VueFab from "vue-float-action-button";

Vue.use(VueFab, {
  iconType: "MaterialDesign"
});
Vue.config.productionTip = false;

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

```

`App.vue`

```
<template>
  <div>
    <vue-fab mainBtnColor="green">
      <fab-item @clickItem="clickItem" :idx="0" title="foo" icon="done"/>
      <fab-item @clickItem="clickItem" :idx="1" title="bar" icon="toc"/>
      <fab-item @clickItem="clickItem" :idx="2" title="baz" icon="done"/>
    </vue-fab>
  </div>
</template>

<script>
export default {
  methods: {
    clickItem() {
      alert("clicked");
    }
  }
};
</script>

```

We register the plugin.

Then we can use the `vue-fab` component, which houses a group of floating buttons.

`mainBtnColor` is the background color of the main button.

One button can trigger multiple buttons to be shown.

The buttons that are shown are the `fab-item` components.

It supports many other customization options, like changing shadow, auto show and hide, and more.

The title color and background color can also be changed.

### vue-tables-2

vue-tables-2 is a package that lets us create customizable tables in Vue.

To use it, first we install it by running:

```
npm i vue-tables-2

```

Then we can use it by writing:

`main.js`

```
import Vue from "vue";
import App from "./App.vue";
import { ClientTable } from "vue-tables-2";
Vue.use(ClientTable, {}, false, "bootstrap3");

Vue.config.productionTip = false;

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

```

We use `Vue.use` with a few arguments.

The first is the plugin itself.

The 2nd is global options.

The 3rd indicates that we don’t want to use Vuex.

The 4th is the name of the theme.

`App.vue`

```
<template>
  <div>
    <v-client-table :data="tableData" :columns="columns" :options="options"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: ["id", "name", "age"],
      tableData: [
        { id: 1, name: "james", age: "20" },
        { id: 2, name: "jane", age: "24" },
        { id: 3, name: "joe", age: "16" },
        { id: 4, name: "alex", age: "55" },
        { id: 5, name: "may", age: "40" }
      ],
      options: {}
    };
  }
};
</script>

```

We created a basic table in `App` with the `v-client-table` component.

This means the data is on the client-side.

We pass in `tableData` to the `data` prop.

`columns` have the columns.

`options` has the options, which are optional.

Now we get a table with a filter input to let us search the entries.

The number of records is also displayed.

### Maska

Maska is a package that lets us add an input mask into our Vue app.

To install it, we run:

```
npm i maska

```

Then we can write:

`main.js`

```
import Vue from "vue";
import App from "./App.vue";
import Maska from "maska";
Vue.use(Maska);

Vue.config.productionTip = false;

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

```

`App.vue`

```
<template>
  <div>
    <input v-maska="'###'" v-model="value">
    <p>{{value}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: ""
    };
  }
};
</script>

```

We just register the plugin and use the `v-maska` directive.

The value we passed into the directive is the format string we want for the mask.

We can also add a custom pattern.

We can write:

```
<template>
  <div>
    <input v-model="value" v-maska="{ mask: 'z*', tokens: { 'z': { pattern: /[a-zA-Z]/ }}}">
    <p>{{value}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: ""
    };
  }
};
</script>

```

We defined our own placeholder `z` to make people enter letters only with a regex.

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

### Conclusion

Vue Floating Action Button lets us add floating action buttons.

vue-tables-2 lets us add tables.

Maska lets us add input masks.

v-click-outside-x lets us handle clicks outside an element.

The post [Top Vue Packages for Adding Floating Action Buttons, Tables, Input Masks, and More](https://thewebdev.info/2020/07/26/top-vue-packages-for-adding-floating-action-buttons-tables-input-masks-and-more/) appeared first on [The Web Dev](https://thewebdev.info).