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.
