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:
Show code

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

Show code

Size

Change Dummy Image size with size: "width value, height value" | Number. Height value is optional, when omitted square image will be created.

Show code

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

Show code

Text

Add text to Dummy Image with text: Boolean | String | Number | Text Dummy Object attribute.

Show code

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.

Show code

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

    Show code

    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 }".

      Show code

      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.

      Show code

      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 }".

      Show code

      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

      Show code

      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.

      Show code

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

      •

      Show code

      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.

      Show code

      Layouts

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

      ...

      Show code