vue-lorem

Handy faker.js dummy components for your Vue.js project.

Installation

Install via NPM...

$ npm install vue-lorem

...and require the plugin like so:

import VueLorem from 'vue-lorem'
Vue.use(VueLorem);

Usage

<vue-lorem lorem sentences />

<p v-text="$faker.lorem.sentences()"></p>

Both will result in presenting the lorem sentence!

You have to pass two props; one for faker category data and one for category method. Here's detailed API from faker.js

Examples

In component:

mounted () {
  this.foo = this.$faker.random.number()
}

<vue-lorem image avatar />

<!-- results in -->

<img src="(randomimgsrc)" />

Rendering numbers:

<vue-lorem random number />

<!-- results in -->

<span>123456789</span>

Pass data as prop:

<input type="number" :value="$faker.random.number()" />

<!-- results in -->

<input type="number" value="123456789">

Using scoped slot:

<vue-lorem random number>
    <template v-slot="{value}">
      {{value}} - {{value}}
    </template>
</vue-lorem>

<!-- results in -->

<span>
    123456789 - 123456789
</span>

Configuration

vue-lorem uses faker for locale, and you can define behaviour regarding errors.

Vue.use(VueLorem, {
  locale: 'de', //default en
  disableErrorStyling: false, // default true(!)
  disableErrorLogs: true // default false
})

ErrorStyling will provide red border in case prop was incorrectly passed. Error Logs will output console warning if prop was incorectly passed.