vue-content-placeholders
v0.2.1
Published
Vue Components for rendering animated content placeholders like facebook
Downloads
24,135
Maintainers
Readme
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).