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 a timer, social sharing links, tooltips, and callback refs.

vue-timers

The vue-timers is a simple mixin that lets us add a timer like setTimeout and setInterval into our Vue app.

To use it, we first install it by writing:

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 world");
    }
  }
};
</script>

We import the package and register it.

Then we use the this.$options.interval to store the object returned by setInterval .

The benefit of this package is that we can add reusable timers without adding our own code.

Clean up is also automatic.

We just add the timers object to call setTimeout .

autostart means that the timer is run automatically.

time is the delay in milliseconds.

We can also call it programmatically by writing:

<template>
  <div></div>
</template>

<script>
export default {
  timers: {
    log: { time: 1000, autostart: true },
    foo: { time: 1000, autostart: false }
  },
  methods: {
    log() {
      console.log("Hello world");
    },
    foo() {
      console.log("foo");
    }
  },
  mounted() {
    this.$timer.start("foo");
  }
};
</script>

We added the foo timer that we can run ourselves with this.$timer.start .

vue-social-sharing

vue-social-sharing lets us add social sharing widgets into our code.

To install it, we run:

npm i vue-social-sharing

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueSocialSharing from "vue-social-sharing";

Vue.use(VueSocialSharing);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div>
    <ShareNetwork
      network="facebook"
      url="https://example.com"
      title="hello"
      description="description"
      quote="quote"
      hashtags="vuejs,vite"
    >Share on Facebook</ShareNetwork>
  </div>
</template>

<script>
export default {};
</script>

We share the https://example.com link to Facebook with the given title and description.

We can also add a quote.

We set the network to facebook to share the link to Facebook.

It supports many other social networks like Twitter, Instagram, and more.

vue-popperjs

vue-popperjs lets us add tooltips easily into our app.

To install it, we run:

npm i vue-popperjs

Then we can use it by writing:

<template>
  <div>
    <popper
      trigger="clickToOpen"
      :options="{
      placement: 'top',
      modifiers: { offset: { offset: '0,10px' } }
    }"
    >
      <div class="popper">content</div>

      <button slot="reference">click me</button>
    </popper>
  </div>
</template>

<script>
import Popper from "vue-popperjs";
import "vue-popperjs/dist/vue-popper.css";

export default {
  components: {
    popper: Popper
  }
};
</script>

We use the bundled popper component.

The trigger prop lets us set how to open the tooltip.

clickToOpen means it’ll open on click.

The reference slot has the element that’s used to open the tooltip.

The default slot has the content.

We also import the CSS.

We can also set the offset to what we want.

placement lets us set the placement of the tooltip.

vue-ref

vue-ref lets us use a direct to set a ref with a callback.

To install it, we run:

npm i vue-ref

Then we use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import ref from "vue-ref";
Vue.use(ref);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div>
    <input v-ref="c => this.dom = c">
  </div>
</template>

<script>
export default {
  data() {
    return {
      dom: undefined
    };
  },
  mounted() {
    this.dom.focus();
  }
};
</script>

We use the v-ref directive to get the element and set it as the value of this.dom .

Then we can call focus on the input to focus it.

Conclusion

The vue-timers package lets us add timers to our components easier than using setTimeout and setInterval .

vue-social-sharing lets us ad social sharing links.

vue-popperjs lets us add tooltips with flexible styling.

vue-ref lets us add callback refs.

The post Top Vue Packages for Adding Timers, Social Sharing Links, Tooltips, and Callback Refs appeared first on The Web Dev.