vue-dummy is a wrapper around the https://dummyjs.com/ library to expose placeholder Images and Dummy, Lorum Ipsum Text as a vue directive
Add to your HTML page:
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-dummy"></script>or, import into your module npm install vue-dummy --save-dev
import Vue from "vue"
import VueDummy from "vue-dummy"
Vue.use(VueDummy)<p v-dummy></p>Choose the number of words:
<p v-dummy="150"></p>Choose random amount of words between 3 & 10:
<p v-dummy="'3,10'"></p> <!-- Note: the quotes to pass the expression as a string -->
<p v-dummy:3,10></p> <!-- or, as a Vue argument-->As a component:
<dummy></dummy>
<dummy text="30"></dummy>
<dummy t="1,3"></dummy><img v-dummy="300" /><img v-dummy="'400x300'" /> <!-- Note: the quotes to pass the expression as a string -->
<img v-dummy:400x300 /><!-- or, as a Vue argument -->
<img v-dummy.400x300 /><!-- or, as a Vue modifier -->Use width & height attribues or, size with CSS
<img v-dummy width="150" height="150" />Defaults to the size of the parent container
<img v-dummy />Create random sized images. Useful for testing dimentions of unknown sized user uploaded images
<img v-dummy="'100,400x200,400'" /> <!-- Note: the quotes to pass the expression as a string -->
<img v-dummy:100,400x200,400 /> <!-- or, as a Vue argument (or modifier) -->As a component:
<dummy img></dummy>
<dummy img="400x300"></dummy>
<dummy i="100"></dummy>Using v-dummy on some tags will result in some placeholder content with expected markup. This is useful in some cases like quick styling of elements
<ol v-dummy></ol> <!-- outputs a small list -->
<ul v-dummy></ul> <!-- outputs a small list -->
<table v-dummy></table> <!-- outputs a small table -->Combine with v-for to repeat elements
<ul>
<li v-for="i in 6" v-dummy>#{{i}}: </li>
</ul>