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 inputs, focusing elements, adding QR codes, and emit and listen to global events.
Vue Cleave Component
Vue Cleave Component is an input component that lets us enter things like credit card numbers.
To use it, first, we run:
npm i vue-cleave-component
to install it.
Then we can use it by writing:
<template>
<div>
<cleave v-model="cardNumber" :options="options" class="form-control" name="card"></cleave>
</div>
</template>
<script>
import Cleave from "vue-cleave-component";
export default {
data() {
return {
cardNumber: null,
options: {
creditCard: true,
delimiter: "-"
}
};
},
components: {
Cleave
}
};
</script>
We bind the inputted value to cardNumber with v-model .
options is the options we can set for the input.
creditCard set to true means that we let users enter credit card numbers.
delimiter is the delimiter between each chunk.
So we’ll see the dash between each set of 4 digits.
vue-bus
vue-bus is a Vue plugin to add an app-wide event bus to our app.
To use it, we install it by running:
npm i vue-bus
Then we can use it bu writing”
<template>
<div></div>
</template>
<script>
export default {
created() {
this.$bus.on("add-todo", this.addTodo);
this.$bus.once("once", () => console.log("fire once"));
this.$bus.emit("once");
this.$bus.emit("add-todo");
},
beforeDestroy() {
this.$bus.off("add-todo", this.addTodo);
},
methods: {
addTodo() {
console.log("add todo");
}
}
};
</script>
We use the this.$bus.on method to listen to events.
this.$bus.once creates an event that’s fired only once.
emit emits an event.
this.$bus.off clears event listeners.
Vue MQ (MediaQuery)
Vue MQ (MediaQuery) lets us define breakpijts and build responsive designs easily.
To use it, we run:
npm i vue-mq
to install it.
Then we use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueMq from "vue-mq";
Vue.use(VueMq, {
breakpoints: {
sm: 450,
md: 1250,
lg: Infinity
},
defaultBreakpoint: "sm"
});
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<p>{{displayText}}</p>
</div>
</template>
<script>
export default {
computed: {
displayText() {
return this.$mq === "sm" ? "small" : "large";
}
}
};
</script>
We use the this.$mq property to check the size of the screen.
Then we can display text accordingly.
vue-focus
vue-focus is a reusable directive for letting us focus or blur an element.
To use it, we install it by running:
npm i vue-focus
Then we can use it by writing:
<template>
<div>
<input type="text" v-focus="focused" @focus="focused = true" @blur="focused = false">
<button @click="focused = true">focus</button>
</div>
</template>
<script>
import { mixin as focusMixin } from "vue-focus";
export default {
mixins: [focusMixin],
data() {
return {
focused: false
};
}
};
</script>
We have an input element, which we control the focus of with the v-focus directive.
The directive comes from registering the mixin.
The focus event is emitted when it’s focused, which we set focused to true when it’s emitted.
v-viewer
v-viewer is an image viewer component that can be used to display an image gallery.
To use it, we run:
npm i v-viewer
to install the package.
Then we write:
main.js
import Vue from "vue";
import App from "./App.vue";
import "viewerjs/dist/viewer.css";
import Viewer from "v-viewer";
Vue.use(Viewer);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
We register the plugin and import the CSS.
App.vue
<template>
<div>
<viewer :images="images">
<img v-for="src in images" :src="src" :key="src">
</viewer>
</div>
</template>
<script>
export default {
data() {
return {
images: [
"https://placekitten.com/200/200",
"https://placekitten.com/201/201"
]
};
}
};
</script>
To add the image gallery with 2 images in it.
All we did is to use the viewer component and nest the images in it.
vue-qr
vue-qr is a plugin that lets us add a QR code to our app.
To use it, we install it by running:
npm i vue-qr
Then we can use it by writing:
<template>
<div>
<vue-qr text="Hello!" :callback="test" qid="test"></vue-qr>
</div>
</template>
<script>
import VueQr from "vue-qr";
export default {
components: { VueQr },
methods: {
test(dataUrl, id) {
console.log(dataUrl, id);
}
}
};
</script>
We use the vue-qr component with the text we want to show when scanned into the text prop. The callback, which we pass in as the value of the callback prop is called when it’s loaded.
Conclusion
vue-qr is a QR code component. v-viewer lets us add an image viewer to our Vue app. vue-focus lets us control the focus of elements. Vue Cleave Component is an input component that lets users enter credit card numbers. vue-bus is an event bus library for Vue apps.
