Dummy
Vue Bootstrap 5 Dummy plugin
Dummy plugin creates placeholder content for accelerated building and testing your frontend templates.
Responsive Dummy plugin built with the latest Bootstrap 5. Plenty of implementation examples such as images, lists, tables, and much more.Note: Read the API tab to find all available options and advanced customization
Create Dummy component for an element by adding directive
v-mdb-dummy to it. Depending on the base element, different
Dummies will be created. For most of the HTML tags default Dummy is
Text.
To explicitly create specific Dummy add proper directive argument.
Text
Create Dummy Text by adding v-mdb-dummy:text to element
or simple v-mdb-dummy to any element that has not have
its own dummy tag. To create text with custom length add key
length with desired text length to the directive binding.
Change text color with color key.
- Implicitly generated text:
- Explicitly generated text with 40 characters length:
- Text with custom color:
<template>
<dl class="row" style="width: 100%">
<dt class="col-sm-6">Implicitly generated text:</dt>
<dd class="col-sm-6" v-mdb-dummy></dd>
<dt class="col-sm-6">
Explicitly generated text with 40 characters length:
</dt>
<dd class="col-sm-6" v-mdb-dummy:text="{ length: 40 }"></dd>
<dt class="col-sm-6">Text with custom color:</dt>
<dd class="col-sm-6" v-mdb-dummy:text="{ color: 'red' }"></dd>
</dl>
</template>
<script>
import { mdbDummy } from "mdb-vue-dummy";
export default {
directives: {
mdbDummy,
},
};
</script>
Image
Create Dummy Image by using directive on img element or
adding v-mdb-dummy:img to element or simple
v-mdb-dummy to an img element.
Default
By default Dummy Image is created with size 150x150px and grey background
<template>
<img v-mdb-dummy />
</template>
<script>
import { mdbDummy } from "mdb-vue-dummy";
export default {
directives: {
mdbDummy,
},
};
</script>
Size
Change Dummy Image size with
size: "width value, height value" | Number. Height
value is optional, when omitted square image will be created.
<template>
<img v-mdb-dummy:img="{ size: '400,300' }" />
</template>
<script>
import { mdbDummy } from "mdb-vue-dummy";
export default {
directives: {
mdbDummy,
},
};
</script>
Make Dummy Image inherit full size of its container with
size: '100%,100%'.
Note: It will only work with container having explicitly set width and height.
Setting size: '100%' will create square image with
width and height of its container width
<template>
<MDBContainer style="width: 500px">
<img v-mdb-dummy:img="{ size: '100%' }" />
</MDBContainer>
</template>
<script>
import { mdbDummy } from "mdb-vue-dummy";
import { MDBContainer } from "mdb-vue-ui-kit";
export default {
components: {
MDBContainer
},
directives: {
mdbDummy,
},
};
</script>
Text
Add text to Dummy Image with
text: Boolean | String | Number | Text Dummy Object
attribute.
<template>
<img class="me-2" v-mdb-dummy="{ size: 300, text: 'Custom text' }" />
<img v-mdb-dummy="{ size: 300, text: { length: 30 } }" />
</template>
<script>
import { mdbDummy } from "mdb-vue-dummy";
export default {
directives: {
mdbDummy,
},
};
</script>
Colours
Set image background color with color: String and text
color with text: { color: String }. Dummy Image only
accepts the color values in hexagonal values.
<template>
<img
class="dummy me-2"
v-mdb-dummy="{
size: 200,
color: '#FF5733',
text: {
length: 5,
color: '#FFF',
},
}"
/>
</template>
<script>
import { mdbDummy } from "mdb-vue-dummy";
export default {
directives: {
mdbDummy,
},
};
</script>
List
Create Dummy List by adding v-mdb-dummy to
ul or ol elements or
v-mdb-dummy:list to any other element.
Default
By default Dummy List will create list with 5 Dummy Text elements
<template>
<ul v-mdb-dummy></ul>
</template>
<script>
import { mdbDummy } from "mdb-vue-dummy";
export default {
directives: {
mdbDummy,
},
};
</script>
Size
Change Dummy List length with
v-mdb-dummy:list="{ length: Number }" and length of
Dummy Text element with
v-mdb-dummy:list="{ text: Boolean | String | Number | Text Dummy
Object }".
<template>
<ul v-mdb-dummy="{ length: 10, text: 30 }"></ul>
</template>
<script>
import { mdbDummy } from "mdb-vue-dummy";
export default {
directives: {
mdbDummy,
},
};
</script>
Table
Create Dummy Table by adding v-mdb-dummy to
table element or v-mdb-dummy:table to any
other element.
Default
By default Dummy Table will create table with 5 rows and 5 columns.
<template>
<table v-mdb-dummy></table>
</template>
<script>
import { mdbDummy } from "mdb-vue-dummy";
export default {
directives: {
mdbDummy,
},
};
</script>
Size
Change Dummy Table rows and columns size with
v-mdb-dummy:table="{size: 'rows length value, columns length
value'}". Change length of default Dummy Text with
v-mdb-dummy:table="{ text: Boolean | String | Number | Text Dummy
Object }".
<template>
<table v-mdb-dummy:table="{ size: '10,5', text: 10 }"></table>
</template>
<script>
import { mdbDummy } from "mdb-vue-dummy";
export default {
directives: {
mdbDummy,
},
};
</script>
Copy
Create a Dummy Copy of any existign element with
v-mdb-dummy:copy="existing element selector"
Original element
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Dummy Copy element
<template>
<MDBCol col="6" class="d-flex flex-column align-items-center">
<p><strong>Original element</strong></p>
<MDBCard id="original-element" style="max-width: 400px">
<MDBCardBody>
<MDBCardTitle>Card title</MDBCardTitle>
<MDBCardText>
Some quick example text to build on the card title and make up
the bulk of the card's content.
</MDBCardText>
<MDBBtn color="primary">Button</MDBBtn>
</MDBCardBody>
</MDBCard>
</MDBCol>
<MDBCol col="6" class="d-flex flex-column align-items-center">
<p><strong>Dummy Copy element</strong></p>
<div v-mdb-dummy:copy="'#original-element'"></div>
</MDBCol>
</template>
<script>
import { mdbDummy } from "mdb-vue-dummy";
import {
MDBCol,
MDBBtn,
MDBCard,
MDBCardTitle,
MDBCardBody,
MDBCardText
} from 'mdb-vue-ui-kit';
export default {
components: {
MDBCol,
MDBBtn,
MDBCard,
MDBCardTitle,
MDBCardBody,
MDBCardText
},
directives: {
mdbDummy,
},
};
</script>
Repeat
Dummy Repeat will repeat element on which
v-mdb-dummy:repeat="number of repetitions" was invoked.
-
.webp)
Jane Smith
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti molestiae inventore, quis omnis est, asperiores repellat dignissimos blanditiis placeat ad eveniet deserunt temporibus explicabo voluptatem tenetur? Consequatur totam maiores eum.
<template>
<ul class="list-unstyled">
<li v-mdb-dummy:repeat="3">
<MDBRow class="mb-4">
<MDBCol col="2">
<img
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(26).webp"
class="img-fluid shadow-1-strong rounded" alt=""
/>
</MDBCol>
<MDBCol col="10">
<p class="mb-2"><strong>Jane Smith</strong></p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Corrupti molestiae inventore, quis omnis est, asperiores
repellat dignissimos blanditiis placeat ad eveniet deserunt
temporibus explicabo voluptatem tenetur? Consequatur totam
maiores eum.
</p>
</MDBCol>
</MDBRow>
</li>
</ul>
</template>
<script>
import { mdbDummy } from "mdb-vue-dummy";
import { MDBCol, MDBRow } from 'mdb-vue-ui-kit';
export default {
components: {
MDBCol,
MDBRow
},
directives: {
mdbDummy,
},
};
</script>
Any content inside Dummy Repeat can be created from Dummy elements.
<template>
<ul class="list-unstyled">
<li v-mdb-dummy:repeat="3">
<MDBRow class="mb-4">
<MDBCol col="2">
<img class="img-fluid shadow-1-strong rounded" v-mdb-dummy:img="{ size: '120' }" id="image" />
</MDBCol>
<MDBCol col="10">
<strong>
<p v-mdb-dummy="{ length: 15 }"></p>
</strong>
<p v-mdb-dummy="{ length: 100 }"></p>
</MDBCol>
</MDBRow>
</li>
</ul>
</template>
<script>
import { mdbDummy } from "mdb-vue-dummy";
import { MDBCol, MDBRow } from 'mdb-vue-ui-kit';
export default {
components: {
MDBCol,
MDBRow
},
directives: {
mdbDummy,
},
};
</script>
Template
Dummy Template will create single Dummy element or a whole template
from the tag elements passed as string into
v-mdb-dummy:template.
Default
By default Dummy Template will create a template of
h1,p,table,h2,p,blockquote,img,ul tags.
<template>
<div v-mdb-dummy:template></div>
</template>
<script>
import { mdbDummy } from "mdb-vue-dummy";
export default {
directives: {
mdbDummy,
},
};
</script>
Layouts
Combine Dummy Template with other Dummy elements and MDBootstrap components to create layouts in no time!
<template>
<MDBContainer>
<div class="mb-4" v-mdb-dummy:template="{ tags: 'h1,p' }"></div>
<p class="note note-light" v-mdb-dummy></p>
<img class="mb-4" v-mdb-dummy:img="{ size: '100%,500', text: true }" />
<div class="mb-4" v-mdb-dummy:template="{ tags: 'blockquote, ul, h2' }"></div>
<p class="mb-4" id="dummy-text" v-mdb-dummy:text="{ length: 500 }"></p>
<div class="d-flex justify-content-between mb-4">
<MDBCard class="card col-3" v-mdb-dummy:repeat="2">
<img class="card-img-top" v-mdb-dummy:img="{ size: '100%' }" alt="..." />
<MDBCardBody>
<MDBCardTitle v-mdb-dummy></MDBCardTitle>
<MDBCardText v-mdb-dummy></MDBCardText>
<a href="#!" class="btn btn-primary" v-mdb-dummy></a>
</MDBCardBody>
</MDBCard>
</div>
<p v-mdb-dummy:copy="'#dummy-text'"></p>
<div class="d-flex align-items-center">
<img class="col-6" v-mdb-dummy:img="{ size: '100%', text: true }" />
<MDBCol col="6">
<form>
<MDBContainer>
<MDBInput label="Example label" wrapperClass="mb-3" />
<MDBTextarea label="Example label" wrapperClass="mb-3" />
<MDBSelect v-model:options="options" v-model:selected="selected" />
<div v-mdb-dummy:template="{
tags: 'button',
container: false,
}" />
</MDBContainer>
</form>
</MDBCol>
</div>
</MDBContainer>
</template>
<script>
import { ref } from "vue";
import { mdbDummy } from "mdb-vue-dummy";
import {
MDBContainer,
MDBCol,
MDBCard,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBInput,
MDBTextarea,
MDBSelect
} from 'mdb-vue-ui-kit';
export default {
components: {
MDBContainer,
MDBCol,
MDBCard,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBInput,
MDBTextarea,
MDBSelect
},
directives: {
mdbDummy,
},
setup() {
const options = ref([
{ text: "One", value: 1 },
{ text: "Two", value: 2 },
{ text: "Three", value: 3 },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 },
{ text: "Six", value: 6 },
{ text: "Seven", value: 7 },
{ text: "Eight", value: 8 },
]);
const selected = ref("");
return {
options,
selected,
};
},
};
</script>
Dummy - API
Import
Add dummy class to any of HTML tags to initiate Dummy on this element. If no
options are passed, Dummy element based on tag element will be created.
<script>
import { mdbDummy } from "mdb-vue-dummy";
export default {
directives: {
mdbDummy,
},
};
</script>
Arguments
| Name | Default properties | Description |
|---|---|---|
text
|
{ length: 20, color: null } |
Creates Dummy Text of given length and text-color on element. |
img
|
{ size: "150", color: null } |
Creates Dummy Img of given size and background color |
list
|
{ length: 5 } |
Creates Dummy List with given number of list elements |
table
|
{ size: "5,5" } |
Creates Dummy Table with given rows and cols number |
copy
|
|
Creates copy of element based on given selector |
repeat
|
1 |
Creates given number of copies of element to which dummyRepeat was attached. Allows to repeat elements created by other Dummy methods. |
template
|
{
tags: "h1,p,table,h2,p,blockquote,img,ul",
container: true,
}
|
Creates template from given string of HTML tag elements |