Skip to content

michalsnik/vue-content-placeholders

Repository files navigation

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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published