In this article, we’ll look at the best packages for displaying messages, lazy loading images, and adding modals.
vue-toastr
vue-toastr is a toast component for Vue apps.
To use it, we run:
npm i vue-toastr
to install it.
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueToastr from "vue-toastr";
Vue.use(VueToastr, {});
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div></div>
</template>
<script>
export default {
mounted() {
this.$toastr.defaultPosition = "toast-top-left";
this.$toastr.s("<b>hello</b>");
}
};
</script>
We create a toast by registering a plugin.
Then we use the $toastr property to set the default position and display the toast with the s method.
HTML is supported.
Other options like timeout, styles, etc. can be set.
vue-thin-modal
If we want to add models to our app easily, we can use the vue-thin-modal package to do it.
To install it, we run:
npm i vue-thin-modal
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueThinModal from "vue-thin-modal";
import "vue-thin-modal/dist/vue-thin-modal.css";
Vue.use(VueThinModal);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<button type="button" @click="open">Open Modal</button>
<modal name="demo">
<div class="basic-modal">
<h1 class="title">Title</h1>
<button class="button" type="button" @click="close">Close Modal</button>
</div>
</modal>
</div>
</template>
<script>
export default {
methods: {
open() {
this.$modal.push("demo");
},
close() {
this.$modal.pop();
}
}
};
</script>
We register the component and import the CSS.
Then we use the modal component to add the modal.
this.$modal.push opens the modal.
The argument is the value of the name prop of modal .
To close it, we call the pop method.
v-lazy-image
v-lazy-image is an image component that loads the image only when it’s shown on the screen.
To use it, we run:
npm i v-lazy-image
Then we can write:
main.js
import Vue from "vue";
import App from "./App.vue";
import { VLazyImagePlugin } from "v-lazy-image";
Vue.use(VLazyImagePlugin);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<v-lazy-image
src="http://placekitten.com/200/200"
src-placeholder="http://placekitten.com/201/201"
/>
</div>
</template>
<script>
export default {};
</script>
to use it.
src is the URL of the actual image.
src-placeholder is the URL of the placeholder image.
We can progressively load images.
To do that, we can add transitions effects with CSS.
For instance, we can write:
<template>
<div>
<v-lazy-image
src="http://placekitten.com/200/200"
src-placeholder="http://placekitten.com/201/201"
/>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
.v-lazy-image {
filter: blur(20px);
transition: filter 0.7s;
}
.v-lazy-image-loaded {
filter: blur(0);
}
</style>
We just add transition effects to the v-lazy-image class to add a transition effect when the image loads.
Responsive images are also supported.
vue-flash-message
vue-flash-message is a package that lets us show messages on the screen.
To install it, we run:
npm i vue-flash-message
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueFlashMessage from "vue-flash-message";
Vue.use(VueFlashMessage);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<flash-message></flash-message>
</div>
</template>
<script>
export default {
mounted() {
this.flash("loaded", "success");
}
};
</script>
We use the flash-message component to display messages which will be displayed for a few seconds.
We call this.flash to show the message.
The first argument is the content.
The 2nd argument is the type.
We can add the CSS that comes with the package to add styles:
import Vue from "vue";
import App from "./App.vue";
import VueFlashMessage from "vue-flash-message";
import "vue-flash-message/dist/vue-flash-message.min.css";
Vue.use(VueFlashMessage);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
Other kinds of messages include error, warning, and info.
Conclusion
We can use vue-toastr or vue-flash-messag to display messages.
vue-thin-modal is a modal component for Vue apps.
v-lazy-image is a component for lazy loading images.
