Composable components for rendering progressive content like Facebook in Vue.js

vue-content-placeholders

Vue.js plugin for rendering fake content (Facebook like). It can be useful as a placeholder while content is loading or data fetching to provide better UX and lower bounce rate.

You can use it as any other component (plugin) for Vue projects. For example:

Usage

Installation

* via npm: `npm install vue-content-placeholders --save`
* via yarn: `yarn add vue-content-placeholders`

Include the 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.

In your templates:

content-placeholders is the main component and within 3 types of content can exist

<content-placeholders-text />
<content-placeholders-heading />
<content-placeholders-img />

For available properties take a look further below.

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

Result: rendered example

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

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

That's it more or less! This open source project is under an MIT license.