Top Vue Packages for Adding Timers, Social Sharing Links, Tooltips, and Callback Refs
Tags: javascript, webdev, beginners, programming
Published: 2021-01-19 00:20:08

---
title: Top Vue Packages for Adding Timers, Social Sharing Links, Tooltips, and Callback Refs
published: true
date: 2020-07-26 23:44:43 UTC
tags: javascript,webdev,beginner,programming
canonical_url: https://thewebdev.info/2020/07/26/top-vue-packages-for-adding-timers-social-sharing-links-tooltips-and-callback-refs/?utm_source=rss&utm_medium=rss&utm_campaign=top-vue-packages-for-adding-timers-social-sharing-links-tooltips-and-callback-refs
---

**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](https://thewebdev.info/2020/07/26/top-vue-packages-for-adding-timers-social-sharing-links-tooltips-and-callback-refs/) appeared first on [The Web Dev](https://thewebdev.info).