Awesome Open Source
Awesome Open Source

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).


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,511,655
Vue (81,071
Vue Components (1,082
Loader (934
Skeleton (768
Lazy Loading (463
Related Projects