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 appeared first on The Web Dev.