Categories
Top Vue Packages

Top Vue Packages for Watching Visibility, Embed Vimeo Videos, and More

Spread the love

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.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.