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>