web
mobile

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>