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
The vue-dummy package lets us add dummy text to our app when while we’re developing it so we won’t have to worry about generating the text ourselves. We can also add placeholder images with it.
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>
Vue.ImagesLoaded
The Vue.ImagesLoaded directive detects whether an image has been loaded.
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
The v-dummy package lets us create placeholder text and images during development so we don’t have to do that ourselves.
To watch the progress of image loading, we can use the Vue.ImageLoaded package to do that.
