🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A Vue component for rendering fake content while data is fetching to provide better UX and lower bounce rate.

Loading

Documentation

vue-content-placeholders

npm vue2

Vue addon for rendering fake content while data is fetching to provide better UX and lower bounce rate.

example


💿 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>

rendered example

<content-placeholders :rounded="true">   <content-placeholders-img />   <content-placeholders-heading /> </content-placeholders>

rendered example

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

  • <content-placeholders-heading />

    • Boolean img (default: false)
  • <content-placeholders-text />

    • Number lines (default: 4)
  • <content-placeholders-img />


🔓 License

See the LICENSE file for license rights and limitations (MIT).


You May Also Like