Skip to content

michalsnik/vue-content-placeholders

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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