ue.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 the best packages for adding a timer, context menu, signature and watermark input, and typing animation effect.
vue-timers
vue-timers is a useful package that we can use to add timers to our Vue app.
We can install it by running:
npm i vue-timers
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueTimers from "vue-timers";
Vue.use(VueTimers);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div></div>
</template>
<script>
export default {
timers: {
log: { time: 1000, autostart: true }
},
methods: {
log() {
console.log("Hello");
}
}
};
</script>
We registrar the plugin.
Then we add the timers as the value of timers to add the timers.
The property name in timers is the callback for the timer.
So log is called every 1 second.
time is the interval in milliseconds.
autostart is indicates that the method starts running when the component is mounted.
vue-context
vue-context lets us add a context menu to our Vue app.
To use it, we install it by running:
npm i vue-context
Then we can use it by writing:
<template>
<div id="app">
<div>
<p @contextmenu.prevent="$refs.menu.open">Right click me</p>
</div>
<vue-context ref="menu">
<li>Option 1</li>
<li>Option 2</li>
</vue-context>
</div>
</template>
<script>
import { VueContext } from "vue-context";
export default {
components: {
VueContext
}
};
</script>
We use the vue-context component.
And we listen to the contextmenu event to toggle on the menu when we right-click on the p element.
vue-deepset
vue-deepset lets us reference objects with dynamic paths in a Vue app.
To use it, we run:
npm i vue-deepset
to install it.
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import * as VueDeepSet from "vue-deepset";
Vue.use(VueDeepSet);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<input type="text" v-model="model['a.bar']">
<p>{{model['a.bar']}}</p>
</div>
</template>
<script>
export default {
computed: {
model() {
return this.$deepModel(this.data);
}
},
data() {
return {
data: {
a: { bar: "baz" },
foo: {
bar: "qux"
}
}
};
}
};
</script>
We created a computed property with the this.$deepModel method that came with the vue-deepset.
And we pass in data in it so that the string paths are parsed and we can access the value by the path.
vue-signature
vue-signature is a component that lets us add a box to let users write their signature and add watermarks to an image.
To use it, we run:
npm i vue-signature
to install it.
Then we write:
<template>
<div id="app">
<vueSignature ref="signature" :sigOption="option" w="800px" h="400px" :defaultUrl="dataUrl"></vueSignature>
<button @click="save">Save</button>
<button @click="clear">Clear</button>
<button @click="undo">Undo</button>
<button @click="addWaterMark">addWaterMark</button>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
option: {
penColor: "red",
backgroundColor: "white"
},
disabled: false,
dataUrl: "http://placekitten.com/200/200"
};
},
methods: {
save() {
this.$refs.signature1.save("image/jpeg");
},
clear() {
this.$refs.signature.clear();
},
undo() {
this.$refs.signature.undo();
},
addWaterMark() {
this.$refs.signature.addWaterMark({
text: "mark ",
font: "20px Arial",
style: "all",
fillStyle: "red",
strokeStyle: "blue"
});
}
}
};
</script>
to use it.
We use the vueSignature component.
We attach a ref to it so that we can use it by calling the methods that the component comes with.
We can draw on it. The signature can be cleared.
And we can add a watermark with the style of our choice.
vue-typer
If we want to display text with a typing animation effect, we can use vue-typer to do it in a Vue app.
To use it, we install it by running:
npm i vue-typer
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueTyperPlugin from "vue-typer";
Vue.use(VueTyperPlugin);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<vue-typer text="hello world"></vue-typer>
</div>
</template>
<script>
export default {};
</script>
We use the vue-typer component to display the typing effect.
Whatever string is in the text prop is animated with that effect.
It emits events when the text is animated.
Conclusion
vue-timers lets us add a timer.
vue-context provides us with a way to add context menus.
vue-signature lets users add signatures and watermarks.
vue-typer lets us animate text with a typing effect.
