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.
