Top Vue Packages for Adding QR Codes, Input Masks, Animation CSS, and File Upload
Tags: vue, javascript
Published: 2020-07-26 23:58:51

---
title: Top Vue Packages for Adding QR Codes, Input Masks, Animation CSS, and File Upload
published: true
date: 2020-07-26 23:43:09 UTC
tags: vue,javascript
canonical_url: https://thewebdev.info/2020/07/26/top-vue-packages-for-adding-qr-codes-input-masks-animation-css-and-file-upload/?utm_source=rss&utm_medium=rss&utm_campaign=top-vue-packages-for-adding-qr-codes-input-masks-animation-css-and-file-upload
---
**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 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](http://twitter.com/crop "Twitter profile for @crop")-success="cropSuccess"
      [@crop](http://twitter.com/crop "Twitter profile for @crop")-upload-success="cropUploadSuccess"
      [@crop](http://twitter.com/crop "Twitter profile for @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.

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

The post [Top Vue Packages for Adding QR Codes, Input Masks, Animation CSS, and File Upload](https://thewebdev.info/2020/07/26/top-vue-packages-for-adding-qr-codes-input-masks-animation-css-and-file-upload/) appeared first on [The Web Dev](https://thewebdev.info).