Facebook Like Content Loading Placeholder For Vue.js

Install & Download:

# NPM
$ npm install vue-content-placeholders--save

Description:

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

Usage:

Import the component.

import Vue from 'vue'
import VueContentPlaceholders from 'vue-content-placeholders'
Vue.use(VueContentPlaceholders)

Use this component.

<content-placeholders>
  <content-placeholders-heading :img="true" />
  <content-placeholders-text :lines="3" />
</content-placeholders>

Props.

props: {
  rounded: {
    type: Boolean,
    default: false,
  },
  centered: {
    type: Boolean,
    default: false,
  },
  animated: {
    type: Boolean,
    default: true,
  },
},

Preview: