vue3-dummy
Version:
Placeholder Images and Dummy Text for Vue3
112 lines (77 loc) • 2.5 kB
Markdown
### vue3-dummy
## Placeholder Images and Dummy Text for Vue3
`vue3-dummy` is a wrapper around the https://dummyjs.com/ library to expose placeholder Images and Dummy, Lorum Ipsum Text as a vue directive
Really hard work belongs to Paul Collett with original repository :[https://github.com/paulcollett/vue-dummy](https://github.com/paulcollett/vue-dummy)
## Usage
Add to your HTML page:
```html
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue3-dummy"></script>
```
or, import into your module `npm install vue3-dummy --save-dev`
```js
import Vue from "vue"
import Vue3Dummy from "vue3-dummy"
CreateApp({}).use(Vue3Dummy).mount('#app')
```
## Dummy Text
```html
<p v-dummy></p>
```
Choose the number of words:
```html
<p v-dummy="150"></p>
```
Choose random amount of words between 3 & 10:
```html
<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:
```html
<dummy></dummy>
<dummy text="30"></dummy>
<dummy t="1,3"></dummy>
```
## Dummy Images
```html
<img v-dummy="300" />
```
```html
<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_
```html
<img v-dummy width="150" height="150" />
```
Defaults to the size of the parent container
```html
<img v-dummy />
```
Create random sized images. _Useful for testing dimentions of unknown sized user uploaded images_
```html
<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:
```html
<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
```html
<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
```html
<ul>
<li v-for="i in 6" v-dummy>#{{i}}: </li>
</ul>
```