Placeholder Images and Lorem Ipsum Dummy Text for Vue.js projects
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist update to DummyJs 1.1.6 Jul 8, 2018
example added component support Oct 21, 2017
src allow using words or w prop with the component Oct 22, 2017
.gitignore update to the latest dummyjs Oct 14, 2017
LICENSE Initial commit Oct 11, 2017
README.md readme, update syntax Jul 8, 2018
build.js support the latest dummyjs, module versions Oct 12, 2017
package-lock.json 1.1.3 Jul 8, 2018
package.json 1.1.3 Jul 8, 2018

README.md

vue-dummy

Placeholder Images and Dummy Text for Vue.js

vue-dummy is a wrapper around the https://dummyjs.com/ library to expose placeholder Images and Dummy, Lorum Ipsum Text as a vue directive

Usage

Add to your HTML page:

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-dummy"></script>

or, import into your module npm install vue-dummy --save-dev

import Vue from "vue"
import VueDummy from "vue-dummy"

Vue.use(VueDummy)

Dummy Text

<p v-dummy></p>

Choose the number of words:

<p v-dummy="150"></p>

Choose random amount of words between 3 & 10:

<p v-dummy="'3,10'"></p> <!-- Note: the quotes to pass the expression as a string -->
<p v-dummy:3,10></p> <!-- or, as a Vue argument-->

As a component:

<dummy></dummy>
<dummy text="30"></dummy>
<dummy t="1,3"></dummy>

Dummy Images

<img v-dummy="300" />
<img v-dummy="'400x300'" /> <!-- Note: the quotes to pass the expression as a string -->
<img v-dummy:400x300 /><!-- or, as a Vue argument -->
<img v-dummy.400x300 /><!-- or, as a Vue modifier -->

Use width & height attribues or, size with CSS

<img v-dummy width="150" height="150" />

Defaults to the size of the parent container

<img v-dummy />

Create random sized images. Useful for testing dimentions of unknown sized user uploaded images

<img v-dummy="'100,400x200,400'" /> <!-- Note: the quotes to pass the expression as a string -->
<img v-dummy:100,400x200,400 /> <!-- or, as a Vue argument (or modifier) -->

As a component:

<dummy img></dummy>
<dummy img="400x300"></dummy>
<dummy i="100"></dummy>

Special Elements

Using v-dummy on some tags will result in some placeholder content with expected markup. This is useful in some cases like quick styling of elements

<ol v-dummy></ol> <!-- outputs a small list -->
<ul v-dummy></ul> <!-- outputs a small list -->
<table v-dummy></table> <!-- outputs a small table -->

Example Repeat Elements

Combine with v-for to repeat elements

  <ul>
    <li v-for="i in 6" v-dummy>#{{i}}: </li>
  </ul>

Examples

https://git.io/vue-dummy-example