Composable components for rendering fake (progressive) content like facebook in vue
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
config Initial plugin Nov 12, 2017
src Fix styles Nov 13, 2017
.babelrc Fix babel configuration Nov 13, 2017
.editorconfig Initial plugin Nov 12, 2017
.eslintignore Initial plugin Nov 12, 2017
.eslintrc.js Initial plugin Nov 12, 2017
.gitignore Initial plugin Nov 12, 2017
.npmignore Add .npmignore file Nov 12, 2017
LICENSE.md Initial plugin Nov 12, 2017
README.md Simplify Readme Nov 12, 2017
index.js Initial plugin Nov 12, 2017
package.json Fix babel configuration Nov 13, 2017

README.md

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