vue-content-placeholders

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

:cd: Installation

• via npm: npm install @rocketspark/vue-content-placeholders --save
• via yarn: yarn add @rocketspark/vue-content-placeholders

:rocket: Usage

Import the placeholder to your app

import { createApp } from 'vue'
import VueContentPlaceholderPlugin from '@rocketspark/vue-content-placeholders'

Vue.use(VueContentPlaceholders)

⚠️ A css file is included when importing the package. You may have to set up your bundler to embed the css in your page.

Examples:

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

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

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