Top Vue Packages for Adding QR Codes, Input Masks, Animation CSS, and File Upload

Image for post
Image for post
Photo by Jonny Kennaugh 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 QR codes, input masks, animation CSS, and file upload.

qrcode.vue

To add a QR code to our Vue app, we can use the qrcode.vue component.

To install it, we can run:

Then we can use it by writing:

We use the qrcode-vue component.

size changes the size.

level is the level of error correction. L for low, M for medium, Q for quantile, and H for high.

The background and foreground can also change.

It can also be rendered as a SVG or canvas.

vue-image-crop-upload

The vue-image-crop-upload component lets us create an image cropper with upload capability.

To install it, we run:

Then we can use it by writing:

v-model is used for showing and hiding the cropper.

The events are for listening to various cropping events.

The format can be changed.

lang sets the language of the cropper.

vue2-animate for Vue.js 2

vue2-animate for Vue.js 2 is a CSS animation library.

To install it, we run:

Then we can use it by writing:

main.js

App.vue

We add the CSS so that we can use them instead of writing our own CSS code.

Now we can just add the transition or transition-group without adding our own CSS.

Vue Input Mask

Vue Input Mask lets us add an input mask to our Vue app.

To use it, we install it by running:

Then we use it by writing:

We bind the value entered to the v-model with phone .

The mask prop sets the input format, and we set each character with a regex.

v-money

v-money is another input mask component, but it only works with entering currencies.

To install it, we run:

Then we can use it by writing:

main.js

App.vue

precision is the decimal number’s decision.

We set all the properties in money as props with v-bind="money" .

So we can set the decimal separator, thousands separator, prefix, suffix, and more.

Image for post
Image for post
Photo by Coen van den Broek on Unsplash

Conclusion

qrcode.vue lets us add a QR code.

v-money lets us add a money input.

Vue Input Mask is a more versatile input mask component.

vue-image-crop-upload is an image cropper.

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