vue-content-placeholders
Vue addon for rendering fake content while data is fetching to provide better UX and lower bounce rate.
:cd: Installation
- via npm:
npm install vue-content-placeholders --save - via yarn:
yarn add vue-content-placeholders
:rocket: Usage
Include plugin in your main.js file.
import Vue from 'vue'
import VueContentPlaceholders from 'vue-content-placeholders'
Vue.use(VueContentPlaceholders)
⚠️ A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.
Examples:
<content-placeholders>
<content-placeholders-heading :img="true" />
<content-placeholders-text :lines="3" />
</content-placeholders>
<content-placeholders :rounded="true">
<content-placeholders-img />
<content-placeholders-heading />
</content-placeholders>
Available components and properties
-
root
<content-placeholders>- Boolean
animated(default: true) - Boolean
rounded(default: false) - border radius - Boolean
centered(default: false)
these properties define how all children components will act
- Boolean
-
<content-placeholders-heading />- Boolean
img(default: false)
- Boolean
-
<content-placeholders-text />- Number
lines(default: 4)
- Number
-
<content-placeholders-img />
? License
See the LICENSE file for license rights and limitations (MIT).