Vue Bootstrap Dummy MDB Pro component

Vue Dummy - Bootstrap 4 & Material Design

The mdb-dummy is a custom directive which loads placeholders for images, tables, text & lists.

Live Preview

Import

Step 1: Import the directive from 'mdbvue'

<script>
  import {
    mdbDummy
  } from "mdbvue";
</script>

Step 2: Add mdbDummy to the directives object 

<script>
  import {
    mdbDummy
  } from "mdbvue";
  export default {
    directives: {
      mdbDummy
    }
  };
</script>

Random text

To generate random text, attach the directive to the element which innerText attribute is to be edited and add :text modifier. The value indicated the number of characters in the generated text. 

<template>
  <p v-mdb-dummy:text="1000"></p>
</template>
<script>
  import {
    mdbDummy
  } from "mdbvue";
  export default {
    directives: {
      mdbDummy
    }
  };
</script>
Name Type Default Description Example
value Number 150 Specifies the length of the generated random text <p v-mdb-dummy:text="300" ></p>

Image placeholder

To generate an image placeholder in the given size, attach the directive to an img tag (the directive will also work if it's attached to a wrapper containing img elements - bear in mind that in this case, it will affect all of the nested images) and add :img modifier. The value will indicate the size of a placeholder - there are two data types supported: number and object (with width and height keys) 

<template>
  <div>
    <img v-mdb-dummy:img="{ height: 100, width: 50 }" class="img-fluid" />
    <img v-mdb-dummy:img="100" class="img-fluid" />
  </div>
</template>
<script>
  import {
    mdbDummy
  } from "mdbvue";
  export default {
    directives: {
      mdbDummy
    }
  };
</script>
Name Type Default Description Example
value Number, Object 150 Specifies the size of an image placeholder <p v-mdb-dummy:img="300" ></p>

List

The directive attached to an ol or ul element will append li elements to it - the number depend on the value passed to the directive. 

<template>
  <ol v-mdb-dummy:list="10"></ol>
</template>
<script>
  import {
    mdbDummy
  } from "mdbvue";
  export default {
    directives: {
      mdbDummy
    }
  };
</script>
Name Type Default Description Example
value Number 5 Number of list items <p v-mdb-dummy:list="3" ></p>

Table

You can generate a simple table with v-mdb-dummy as well - attach the directive to a table element, add :table modifier and pass an object indicating a number of rows and columns. 

<template>
  <table v-mdb-dummy:table="{ columns: 3, rows: 10 }" class="table" />
</template>
<script>
  import {
    mdbDummy
  } from "mdbvue";
  export default {
    directives: {
      mdbDummy
    }
  };
</script>
Name Type Default Description Example
value Object { rows: 10, columns: 5} Number of rows and columns <p v-mdb-dummy:table="{columns: 7, rows: 14}" ></p>

Layout example

Live Preview 
<template>
  <mdb-container>
    <mdb-row>
      <mdb-col class="mb-4">
        <mdb-carousel
          indicators
          controlls
          slide
          v-mdb-dummy:img="{ width: 1200, height: 600 }"
          :items="[
            { img: true, src: '' },
            { img: true, src: '' },
            { img: true, src: '' }
          ]"
        />
      </mdb-col>
    </mdb-row>
    <mdb-row>
      <mdb-col>
        <p v-mdb-dummy:text="1000"></p>
      </mdb-col>
    </mdb-row>
    <hr class="my-5" />
    <mdb-row>
      <mdb-col md="5" class="mb-4">
        <mdb-card>
          <mdb-card-image v-mdb-dummy:img="{ width: 600, height: 300 }" src="" />
          <mdb-card-body>
            <mdb-card-title v-mdb-dummy:text="24"></mdb-card-title>
            <mdb-card-text v-mdb-dummy:text="300"></mdb-card-text>
          </mdb-card-body>
        </mdb-card>
      </mdb-col>
      <mdb-col md="7" class="mb-4">
        <p v-mdb-dummy:text="700"></p>
        <div class="d-flex  align-items-end mt-5">
          <mdb-avatar tag="img" v-mdb-dummy:img="40" :width="40" />
          <h5 class="ml-3 mb-0">John Doe</h5>
        </div>
      </mdb-col>
    </mdb-row>
  </mdb-container>
</template>
<script>
  import {
    mdbContainer,
    mdbRow,
    mdbCol,
    mdbCard,
    mdbCardBody,
    mdbCardText,
    mdbCardTitle,
    mdbCardImage,
    mdbCarousel,
    mdbAvatar,
    mdbDummy
  } from "mdbvue";
  export default {
    components: {
      mdbContainer,
      mdbRow,
      mdbCol,
      mdbCard,
      mdbCardBody,
      mdbCardText,
      mdbCardTitle,
      mdbCardImage,
      mdbCarousel,
      mdbAvatar
    },
    directives: {
      mdbDummy
    }
  };
</script>