vue-content-placeholders

Composable components for rendering fake (progressive) content like facebook in vue

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>

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

GitHub