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