Categories
Top Vue Packages

Top Vue Packages for Adding a Timer, Context Menu, Signature Input, and Typing Effect

Spread the love

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.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.