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 the best packages for watching visibility, displaying confetti, toasts, focus trap and embed Vimeo videos.
v-visibility-change
We can use v-visibility-change to watch for visibility changes in our elements.
To use it, we run:
npm i vue-visibility-change
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import visibility from "vue-visibility-change";
Vue.use(visibility);
visibility.change((evt, hidden) => {
console.log(evt, hidden);
});
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<div v-visibility-change="visibilityChange" v-for="n in 30" :key="n">item {{n}}</div>
</div>
</template>
<script>
export default {
methods: {
visibilityChange(evt, hidden) {
console.log(hidden);
}
}
};
</script>
We have the v-visibility directive that we pass a handler method into that runs when visibility of an element changes.
Also, we have:
visibility.change((evt, hidden) => {
console.log(evt, hidden);
});
to watch for visibility changes.
Vue wrapper for Vimeo Embed Player
vue-vimeo-player lets us embed videos from Vimeo in our Vue app.
We install it by running:
npm i vue-vimeo-player
Then we can use it by writing:
<template>
<div>
<vimeo-player ref="player" :video-id="videoID"/>
</div>
</template>
<script>
import { vueVimeoPlayer } from "vue-vimeo-player";
export default {
data() {
return {
videoID: 420233198
};
},
components: { vueVimeoPlayer }
};
</script>
We add the vimeo-player component with the video-id prop to set the Vimeo video ID.
Now we see the Vimeo player with the video.
We can set autoplay, player width and height, looping, and control options.
vue-confetti
We can use vue-confetti to display animated confetti in our Vue app.
To use it, we run:
npm i vue-confetti
to install it.
Then we can use it by writing:
<template>
<div>
<main>
<button @click="start">Start</button>
<button @click="stop">Stop</button>
<button @click="love">hearts</button>
</main>
</div>
</template>
<script>
import Vue from "vue";
import VueConfetti from "vue-confetti";
Vue.use(VueConfetti);
export default {
methods: {
start() {
this.$confetti.start();
},
stop() {
this.$confetti.stop();
},
love() {
this.$confetti.update({
particles: [
{
type: "heart"
},
{
type: "circle"
}
],
defaultColors: ["red", "pink", "#ba0000"]
});
}
}
};
</script>
We use the this.$cofetti.start method to show confetti.
this.$confetti.stop stops the confetti.
And this.$confetti.update updates the confetti while we’re showing it.
vue2-toast
vue2-toast lets us add toasts to our Vue app.
To use it, we run:
npm i vue2-toast
to install it.
Then we write:
main.js
import Vue from "vue";
import App from "./App.vue";
import "vue2-toast/lib/toast.css";
import Toast from "vue2-toast";
Vue.use(Toast);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<button @click="openTop()">top</button>
<button @click="openCenter()">center</button>
<button @click="openBottom()">bottom</button>
<button @click="openLoading()">loading</button>
</div>
</template>
<script>
export default {
methods: {
openTop() {
this.$toast.top("top");
},
openCenter() {
this.$toast.center("center");
},
openBottom() {
this.$toast("bottom");
},
openLoading() {
this.$loading("loading...");
setTimeout(() =>{
this.closeLoading();
}, 2000);
},
closeLoading() {
this.$loading.close();
}
}
};
</script>
to use it.
We register the component and import the CSS.
We can use this.$toast to show toasts in various styles.
top to show toast at the top.
center shows toast ar the center.
openLoading shows a toast with a loading indicator.
close close the loading indicator.
We can change the duration, type of toast, and styling options like word wrap and width.
focus-trap-vue
focus-trap-vue lets us keep focus on the element inside the provided component.
We can install it by running:
npm i focus-trap-vue
Then we can use it by writing:
<template>
<div id="app">
<focus-trap v-model="isActive">
<input ref="nameInput">
</focus-trap>
</div>
</template>
<script>
import { FocusTrap } from "focus-trap-vue";
export default {
components: {
FocusTrap
},
data() {
return {
isActive: true
};
}
};
</script>
We use the focus-trap component to set focus on the input inside.
isActive indicates that the focus is a trap is active if it’s true .
Conclusion
v-visibility-change is a plugin to watch the visibility status of an element.
Vue wrapper for Vimeo Embed Player lets us embed Vimeo videos to our app.
vue-confetti is a fun plugin to lets us display confetti in our Vue app.
vue2-toast lets us display toasts with ease.
focus-trap-vue lets us focus on an element.
