Vue Plugins You Don’t Know You May Need

John Au-Yeung
May 12 · 4 min read
Image for post
Image for post
Photo by Sharon McCutcheon on Unsplash

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 some Vue packages you don’t know you want to add to your app.

Vue-Dummy

We can install it by running:

npm install --save vue-dummy

It’s also available as a standalone script that we can add by adding:

<script src="https://unpkg.com/vue-dummy"></script>

to our HTML code.

Then we can use it as follows:

main.js :

import Vue from "vue";
import App from "./App.vue";
import VueDummy from "vue-dummy";
Vue.use(VueDummy);Vue.config.productionTip = false;new Vue({
render: h => h(App)
}).$mount("#app");

App.vue :

<template>
<div id="app">
<p v-dummy="150"></p>
<img v-dummy="'200x150'">
</div>
</template>
<script>
export default {
name: "App"
};
</script>

In the code above, we added a p element and bind it to the v-dummy directive. We set the value to 150 so that we get 150 fake words on the page.

Next, we added an image that’s 200px wide by 150px high.

We can also have a random number of words between a range for the dummy text. To use this feature, we can write:

<template>
<div id="app">
<p v-dummy="'100,130'"></p>
</div>
</template>
<script>
export default {
name: "App"
};
</script>

Then we get a random block of text between 100 to 130 words. It can also be written as a directive argument. For instance, we can write:

<template>
<div id="app">
<p v-dummy:100,130></p>
</div>
</template>
<script>
export default {
name: "App"
};
</script>

to do the same thing we did in the previous example.

Likewise, dummy images dimensions can be set as directive arguments or modifiers.

To set dummy image dimensions as an argument, we can write:

<img v-dummy:300x200>

To set dummy image dimensions as a directive modifer, we can write:

<img v-dummy.400x300>

We can also set the width and height attributes of the img tag to set its dimensions:

<img v-dummy width="250" height="150">

We can also create randomly sized images:

<img v-dummy="'100,400x200,400'">

The code above will create images that’s between 100 to 400px wide and 200 to 400px high.

We can also put the numbers as a directive argument as follows:

<img v-dummy:100,400x200,400>

The dummy component is also available to generate the placeholder text or image as follows:

<dummy text="100"></dummy>
<dummy img="420x300"></dummy>

The first line creates a text block that’s 100 words long, and the 2nd creates a placeholder image that’s 420px wide by 300px high.

We can also create a table with fake content as follows:

<table v-dummy></table>
Image for post
Image for post
Photo by Creative Nerds on Unsplash

Vue.ImagesLoaded

It calls a callback when the image is loaded or fails to load. We can install it by running:

npm install vue-images-loaded --save

Then we can use it as follows:

<template>
<div id="app">
{{loaded}}
<div v-images-loaded:on.progress="imageProgress">
<img
src="https://images.unsplash.com/photo-1562953208-602ead7f3d47?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=375&q=80"
>
</div>
</div>
</template>
<script>
import imagesLoaded from "vue-images-loaded";
export default {
name: "App",
directives: {
imagesLoaded
},
data() {
return { loaded: "" };
},
methods: {
imageProgress(instance, image) {
this.loaded = image.isLoaded ? "loaded" : "broken";
}
}
};
</script>

In the code above, we registered the imagesLoaded directive from the vue-image-loaded package in our App component.

Then we added the v-images-loaded:on.progress=”imageProgress” directive with the imageProgress method as the value.

Then we can get whether the image is loaded from the image parameter’s isLoaded property.

The instance parameter has the elements property with an array for the parent of the image element that’s being loaded. The images property has an array of image elements for the images that are being loaded.

Other modifiers for the v-images.on directive include always, done, fail, progress to watch for all image loading events, watching only when the image is successfully loaded, watch only when it fails to load or watch the image when it’s loading respectively.

Conclusion

To watch the progress of image loading, we can use the Vue.ImageLoaded package to do that.

The Startup

Medium's largest active publication, followed by +733K people. Follow to join our community.

John Au-Yeung

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

The Startup

Medium's largest active publication, followed by +733K people. Follow to join our community.

John Au-Yeung

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

The Startup

Medium's largest active publication, followed by +733K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store