Top Vue Packages for Adding Floating Action Buttons, Tables, Input Masks, and More

Image for post
Image for post
Photo by Dwayne Hills on Unsplash

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:

Then we can use it by writing:

main.js

App.vue

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:

Then we can use it by writing:

main.js

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

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:

Then we can write:

main.js

App.vue

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:

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:

Then we can use it by writing:

main.js

App.vue

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.

Image for post
Image for post
Photo by Amy Asher on Unsplash

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.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store