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

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:

npm i qrcode.vue

Then we can use it by writing:

<template>
<div>
<qrcode-vue :value="value" :size="size" level="H"></qrcode-vue>
</div>
</template>
<script>
import QrcodeVue from "qrcode.vue";
export default {
data() {
return {
value: "https://example.com",
size: 300
};
},
components: {
QrcodeVue
}
};
</script>

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:

npm i vue-image-crop-upload

Then we can use it by writing:

<template>
<div>
<my-upload
field="img"
@crop-success="cropSuccess"
@crop-upload-success="cropUploadSuccess"
@crop-upload-fail="cropUploadFail"
v-model="show"
:width="300"
:height="300"
url="/upload"
lang-type="en"
:params="params"
:headers="headers"
img-format="png"
></my-upload>
<img :src="imgDataUrl">
</div>
</template>
<script>
import myUpload from "vue-image-crop-upload";
export default {
data() {
return {
show: true,
params: {
token: "123456798",
name: "avatar"
},
headers: {
smail: "*_~"
},
imgDataUrl: ""
};
},
components: {
"my-upload": myUpload
},
methods: {
toggleShow() {
this.show = !this.show;
},
cropSuccess(imgDataUrl, field) {
this.imgDataUrl = imgDataUrl;
},
cropUploadSuccess(jsonData, field) {
console.log(jsonData, field);
},
cropUploadFail(status, field) {
console.log(status, field);
}
}
};
</script>

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:

npm i vue2-animate

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import "vue2-animate/dist/vue2-animate.min.css";
Vue.config.productionTip = false;new Vue({
render: h => h(App)
}).$mount("#app");

App.vue

<template>
<div>
<button @click="show = !show">toggle</button>
<transition name="fade">
<p v-if="show" style="animation-duration: 0.3s">hello</p>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
show: false
};
}
};
</script>

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:

npm i vue-text-mask

Then we use it by writing:

<template>
<div>
<label>Number</label>
<masked-input
type="text"
name="phone"
class="form-control"
v-model="phone"
:mask="[/\d/, /\d/, /\d/]"
:guide="false"
placeholderChar="#"
></masked-input>
</div>
</template>

<script>
import MaskedInput from "vue-text-mask";
export default {
components: {
MaskedInput
},
data() {
return {
phone: ""
};
}
};
</script>

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:

npm i v-money

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import money from "v-money";
Vue.use(money, { precision: 2 });
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");

App.vue

<template>
<div>
<money v-model="price" v-bind="money"></money>
{{price}}
</div>
</template>

<script>
import { Money } from "v-money";
export default {
components: { Money },
data() {
return {
price: 0,
money: {
decimal: ",",
thousands: ".",
prefix: "$ ",
suffix: " US",
precision: 2,
masked: false
}
};
}
};
</script>

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.

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.

Web developer. Subscribe to my email list now at https://thewebdev.info/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