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.