vue-content-placeholders
Vue addon for rendering fake content while data is fetching to provide better UX and lower bounce rate.
💿 Installation
- via npm:
npm install vue-content-placeholders --save
- via yarn:
yarn add vue-content-placeholders
🚀 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).