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:
Comedical stirpicult
Explicitly generated text with 40 characters length:
Uncombinational nonnobility havel philon
Text with custom color:
Drawability cotype m
<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>
<script setup lang="ts">
  import { mdbDummy as vMdbDummy } from "mdb-vue-dummy";
</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>
<script setup lang="ts">
  import { mdbDummy as vMdbDummy } from "mdb-vue-dummy";
</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>
<script setup lang="ts">
  import { mdbDummy as vMdbDummy } from "mdb-vue-dummy";
</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>
<script setup lang="ts">
  import { mdbDummy as vMdbDummy } from "mdb-vue-dummy";
  import { MDBContainer } from "mdb-vue-ui-kit";
</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>
<script setup lang="ts">
  import { mdbDummy as vMdbDummy } from "mdb-vue-dummy";
</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>
<script setup lang="ts">
  import { mdbDummy as vMdbDummy } from "mdb-vue-dummy";
</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

  • Tiglinic solum rainp
  • Maravedi preinstruct
  • Yokel swagman antero
  • Pretincture specious
  • Cated noncommutative
<template>
  <ul v-mdb-dummy></ul>
</template>
<script>
  import { mdbDummy } from "mdb-vue-dummy";

  export default {
    directives: {
      mdbDummy,
    },
  };
</script>
<script setup lang="ts">
  import { mdbDummy } from "mdb-vue-dummy";
</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 }".

  • Overcertify typikon
  • Ruralised phenylamin
  • Beset stirpiculture
  • Anaglyph reperused p
  • Postfebrile azerbaij
  • Mds hipping intertid
  • Unincludible stupefy
  • Rareripe battue pseu
  • Invigorated crackly
  • Untackling boulle st
<template>
  <ul v-mdb-dummy="{ length: 10, text: 30 }"></ul>
</template>
<script>
  import { mdbDummy } from "mdb-vue-dummy";

  export default {
    directives: {
      mdbDummy,
    },
  };
</script>
<script setup lang="ts">
  import { mdbDummy as vMdbDummy } from "mdb-vue-dummy";
</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.

Baalistic unincludibBaalistic unincludibBaalistic unincludibBaalistic unincludibBaalistic unincludib
Inescapableness dolp Inescapableness dolp Inescapableness dolp Inescapableness dolp Inescapableness dolp
Inescapableness dolp Inescapableness dolp Inescapableness dolp Inescapableness dolp Inescapableness dolp
Inescapableness dolp Inescapableness dolp Inescapableness dolp Inescapableness dolp Inescapableness dolp
Inescapableness dolp Inescapableness dolp Inescapableness dolp Inescapableness dolp Inescapableness dolp
Inescapableness dolp Inescapableness dolp Inescapableness dolp Inescapableness dolp Inescapableness dolp
 
<template>
  <table v-mdb-dummy></table>
</template>
<script>
  import { mdbDummy } from "mdb-vue-dummy";

  export default {
    directives: {
      mdbDummy,
    },
  };
</script>
<script setup lang="ts">
  import { mdbDummy vMdbDummy } from "mdb-vue-dummy";
</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 }".

Biosphere brunetnessBiosphere brunetnessBiosphere brunetnessBiosphere brunetnessBiosphere brunetness
Keswick crookesite d Keswick crookesite d Keswick crookesite d Keswick crookesite d Keswick crookesite d
Keswick crookesite d Keswick crookesite d Keswick crookesite d Keswick crookesite d Keswick crookesite d
Keswick crookesite d Keswick crookesite d Keswick crookesite d Keswick crookesite d Keswick crookesite d
Keswick crookesite d Keswick crookesite d Keswick crookesite d Keswick crookesite d Keswick crookesite d
Keswick crookesite d Keswick crookesite d Keswick crookesite d Keswick crookesite d Keswick crookesite d
Keswick crookesite d Keswick crookesite d Keswick crookesite d Keswick crookesite d Keswick crookesite d
Keswick crookesite d Keswick crookesite d Keswick crookesite d Keswick crookesite d Keswick crookesite d
Keswick crookesite d Keswick crookesite d Keswick crookesite d Keswick crookesite d Keswick crookesite d
Keswick crookesite d Keswick crookesite d Keswick crookesite d Keswick crookesite d Keswick crookesite d
Keswick crookesite d Keswick crookesite d Keswick crookesite d Keswick crookesite d Keswick crookesite d
 
<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>
<script setup lang="ts">
  import { mdbDummy as vMdbDummy } from "mdb-vue-dummy";
</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

Card title

Some quick example text to build on the card title and make up the bulk of the card's content. 

<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>
<script setup lang="ts">
  import { mdbDummy as vMdbDummy } from "mdb-vue-dummy";
  import {
    MDBCol,
    MDBBtn,
    MDBCard,
    MDBCardTitle,
    MDBCardBody,
    MDBCardText
  } from 'mdb-vue-ui-kit';
</script>

Repeat

Dummy Repeat will repeat element on which v-mdb-dummy:repeat="number of repetitions" was invoked.

  • Woman Portrait

    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.

  • Woman Portrait

    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.

  • Woman Portrait

    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.

  • Woman Portrait

    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>
<script setup lang="ts">
  import { mdbDummy as vMdbDummy } from "mdb-vue-dummy";
  import { MDBCol, MDBRow } from 'mdb-vue-ui-kit';
</script>

Any content inside Dummy Repeat can be created from Dummy elements.

  • Noncommutative

    Predaciou realizable brunetness folia menace immorally politicalize manly cated predictated valorise

  • Noncommutative

    Predaciou realizable brunetness folia menace immorally politicalize manly cated predictated valorise

  • Noncommutative

    Predaciou realizable brunetness folia menace immorally politicalize manly cated predictated valorise

  • Noncommutative

    Predaciou realizable brunetness folia menace immorally politicalize manly cated predictated valorise

<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>
<script setup lang="ts">
  import { mdbDummy as vMdbDummy } from "mdb-vue-dummy";
  import { MDBCol, MDBRow } from 'mdb-vue-ui-kit';
</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.

Rhamnaceous airwoman newsbeat bridelike carracci exophthalmos gavin scripture stupefy nomad comedica

Stimulatingly speciously dosshouse cated holophyte accuracy bivalvular reperused leucosis immorally

Sandarac anteroom keSandarac anteroom keSandarac anteroom keSandarac anteroom keSandarac anteroom ke
Botulinuses terminis Botulinuses terminis Botulinuses terminis Botulinuses terminis Botulinuses terminis
Botulinuses terminis Botulinuses terminis Botulinuses terminis Botulinuses terminis Botulinuses terminis
Botulinuses terminis Botulinuses terminis Botulinuses terminis Botulinuses terminis Botulinuses terminis
Botulinuses terminis Botulinuses terminis Botulinuses terminis Botulinuses terminis Botulinuses terminis
Botulinuses terminis Botulinuses terminis Botulinuses terminis Botulinuses terminis Botulinuses terminis

Yokel gutterlike overcertify militancy enrober dubonnet preelect exophthalmos botulinuses cadman ble

Typikon biosphere unmoldy scripture benthamite holism study purposed highness soc inescapableness po

Pellucidity uncombinational residency botulinuses

Spouter de Rareripe semifrontie
  • Cotype alloplasmatic
  • Plesiosaur desulfuri
  • Compute intercarpell
  • Underyoke scarless d
  • Terminism marg dubon
<template>
  <div v-mdb-dummy:template></div>
</template>
<script>
  import { mdbDummy } from "mdb-vue-dummy";

  export default {
    directives: {
      mdbDummy,
    },
  };
</script>
<script setup lang="ts">
  import { mdbDummy as vMdbDummy } from "mdb-vue-dummy";
</script>

Layouts

Combine Dummy Template with other Dummy elements and MDBootstrap components to create layouts in no time!

Speciously purposed manly purposed unstunned gavin araucan stambul yokel havel leucosis hipping saff

Irritate plesiosaur unacetic ungossiping nonexcavation scripture southernwood trinitrophenylmethylni

Snippiness nomad sni

Unaccustomed ruralised kline revaccinate residency

Manly fact Pretincture nonphilo
  • Leverrier energistic
  • Agribusiness peduncl
  • Noyau terminism mils
  • Rareripe vaporimeter
  • Menace purposed outt

Jurisp scoff punish discreditability manly diseasing equities exophthalmos revoted sanderling unmold

Araucan predeterminate italian geek sanctity camaraderie dysteleological preinstructional contrive phenylamine araucan corticate unit thoreau gutterlike saffian maravedi doom realizable eulis predictated energistic gormandising bootie hyperbatic repositories bloodwort unexported spouter salvia gutterlike atomize gasholder anaglyph candlenut coinstantaneously modulate unincludible tribunitial battue milstein saffian scripture vaporimeter untackling totable revoted steatite airwoman strutting rain

...
Unfree dolphinfishes

Scoff keyman energis

Contemptuous melchiz
...
Unfree dolphinfishes

Scoff keyman energis

Contemptuous melchiz
...
Unfree dolphinfishes

Scoff keyman energis

Contemptuous melchiz

Araucan predeterminate italian geek sanctity camaraderie dysteleological preinstructional contrive phenylamine araucan corticate unit thoreau gutterlike saffian maravedi doom realizable eulis predictated energistic gormandising bootie hyperbatic repositories bloodwort unexported spouter salvia gutterlike atomize gasholder anaglyph candlenut coinstantaneously modulate unincludible tribunitial battue milstein saffian scripture vaporimeter untackling totable revoted steatite airwoman strutting rain

Baalistic mirkier sc
<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>
<script setup lang="ts">
  import { ref } from "vue";
  import { mdbDummy as vMdbDummy } from "mdb-vue-dummy";
  import {
    MDBContainer,
    MDBCol,
    MDBCard,
    MDBCardBody,
    MDBCardTitle,
    MDBCardText,
    MDBInput,
    MDBTextarea,
    MDBSelect
  } from 'mdb-vue-ui-kit';

  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("");
</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