Categories
Top Vue Packages

Top Vue Packages for Adding Notifications, Progressive Image Loading, 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 adding notifications, progressive image loading, ripple effect, and password input.

vuejs-noty

vuejs-noty is a notification library for Vue apps.

To use it, we run:

npm i vuejs-noty

to install it.

Then we can write:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueNoty from "vuejs-noty";
import "vuejs-noty/dist/vuejs-noty.css";

Vue.use(VueNoty);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

to register the component and import the CSS.

App.vue

<template>
  <div></div>
</template>

<script>
export default {
  mounted() {
    this.$noty.show("Hello!");
  }
};
</script>

to display the notification.

We can also change the configuration.

Then we can set the configuration by writing:

import Vue from "vue";
import App from "./App.vue";
import VueNoty from "vuejs-noty";
import "vuejs-noty/dist/vuejs-noty.css";

Vue.use(VueNoty, {
  timeout: 4000,
  progressBar: true,
  layout: "topCenter"
});
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

timeout is the duration to display.

progressBar displays a progress bar on the notification.

layout is the placement of the notification.

Material Ripple Effect

Material Ripple Effect is a directive to lets us add a ripple effect on an element.

To use it, we run:

npm i vue-ripple-directive

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import Ripple from "vue-ripple-directive";

Vue.directive("ripple", Ripple);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div>
    <div v-ripple>button</div>
  </div>
</template>

<script>
export default {};
</script>

We just import the directive and use it on an element.

We can add modifiers to change their behavior.

And we can also change the color of the ripple.

We can write:

<template>
  <div>
    <div v-ripple.mouseover.1500>button</div>
  </div>
</template>

<script>
export default {};
</script>

We add the mouseover modifier to see the ripple effect on mouseover.

1500 is the duration of the effect.

We can also change the color:

<template>
  <div>
    <div v-ripple="'green'">button</div>
  </div>
</template>

<script>
export default {};
</script>

Vue-APlayer

Vue-APlayer is an easy to use audio player for Vue apps.

To install it, we run:

npm i vue-aplayer

Then we can use it by running:

<template>
  <div>
    <aplayer
      autoplay
      :music="{
        title: 'sample',
        artist: 'musician',
        src: 'https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3',
        pic: 'http://placekitten.com/200/200'
      }"
    />
  </div>
</template>

<script>
import Aplayer from "vue-aplayer";

export default {
  components: {
    Aplayer
  }
};
</script>

title is the clip title.

artist is the artist’s name.

They’ll both be displayed on the screen.

src is the clip URL.

pic is the URL for the picture.

Then we can see an audio player and play the clip.

The picture is displayed on the player.

vue-password

We can add a password input with vue-password.

To install it, we run:

npm i vue-password

Then we can use it by writing:

<template>
  <div>
    <form>
      <label for="password">Password</label>
      <VuePassword v-model="password" id="password1" :strength="strength" type="text"/>
    </form>
  </div>
</template>

<script>
import VuePassword from "vue-password";

export default {
  components: {
    VuePassword
  },
  computed: {
    strength() {
      if (this.password.length > 4) {
        return 4;
      }
      return Math.floor(this.password.length / 4);
    }
  },
  data() {
    return {
      password: ""
    };
  }
};
</script>

We use the VuePassword component to add the input.

v-model binds the input value to the password state.

strength sets the strength meter.

There are slots to customize the password input, icon, strength meter, and more.

strength must return an integer between 0 and 4.

vue-progressive-image

We can use the vue-progressive-image to add an image element that loads progressively.

To use it, we run:

npm i vue-progressive-image

Then we can write:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueProgressiveImage from "vue-progressive-image";

Vue.use(VueProgressiveImage);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div>
    <progressive-img src="http://placekitten.com/200/200"/>
  </div>
</template>

<script>
export default {};
</script>

Then we use the progressive-img component to show the image.

Also, we can use the progressive-background to add a background:

<template>
  <div>
    <progressive-background src="http://placekitten.com/200/200"/>
  </div>
</template>

<script>
export default {};
</script>

Conclusion

vuejs-noty is a useful notification library.

Material Ripple Effect gives us ripple effect on elements.

vue-password lets us add a password input with a strength meter.

vue-progressive-image lets add an image element to load images progressively.

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.