https://github.com/paulcollett/vue-dummy

Placeholder Images and Lorem Ipsum Dummy Text for Vue.js projects
https://github.com/paulcollett/vue-dummy

Last synced: 4 months ago
JSON representation

Placeholder Images and Lorem Ipsum Dummy Text for Vue.js projects

• Host: GitHub
• URL: https://github.com/paulcollett/vue-dummy
• Owner: paulcollett
• License: mit
• Created: 2017-10-11T23:13:12.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-07-08T04:47:52.000Z (over 7 years ago)
• Last Synced: 2024-11-28T08:06:08.186Z (about 1 year ago)
• Language: JavaScript
• Homepage: https://git.io/vue-dummy-example
• Size: 42 KB
• Stars: 117
• Watchers: 2
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue-zh - 虚拟假人 - dummy`指令. (叫研发工具组 / 付款)
• awesome-vue - vue-dummy - Placeholder Text and Dummy Images as a simple `v-dummy` directive. (Components & Libraries / Dev Tools)
• awesome-vue - vue-dummy ★30 - Placeholder Text and Dummy Images as a simple `v-dummy` directive. (Dev Tools / Vue CLI 3 Plugins)
• awesome-vue - vue-dummy - Placeholder Images and Lorem Ipsum Dummy Text for Vue.js projects (Dev Tools [🔝](#readme))
• awesome-vue - vue-dummy - Placeholder Text and Dummy Images as a simple `v-dummy` directive. (Dev Tools / Vue CLI 3 Plugins)

README

          
### 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:

```html

```

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

```js

import Vue from "vue"

import VueDummy from "vue-dummy"

Vue.use(VueDummy)

```

## Dummy Text

```html



```


Choose the number of words:

```html



```


Choose random amount of words between 3 & 10:

```html

 

 

```


As a component:

```html

```

## Dummy Images

```html



```

```html

 





```

Use width & height attribues _or, size with CSS_

```html



```

Defaults to the size of the parent container

```html



```

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

```html

 

 

```

As a component:

```html

```

## 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

```html

 

 

 

```


## Example Repeat Elements

Combine with `v-for` to repeat elements

```html

  


    
#{{i}}: 

  

```


#### Examples

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