https://github.com/michalsnik/vue-content-placeholders

Composable components for rendering fake (progressive) content like facebook in vue
https://github.com/michalsnik/vue-content-placeholders

fake-content lazy-loading loader progressive-rendering skeleton vue vue-components

Last synced: 2 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/michalsnik/vue-content-placeholders
• Owner: michalsnik
• License: mit
• Created: 2017-10-09T19:13:54.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-08-19T20:32:31.000Z (5 months ago)
• Last Synced: 2025-01-14T22:13:05.174Z (9 days ago)
• Topics: fake-content, lazy-loading, loader, progressive-rendering, skeleton, vue, vue-components
• Language: JavaScript
• Size: 10.7 KB
• Stars: 1,585
• Watchers: 11
• Forks: 87
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# vue-content-placeholders

![npm](https://img.shields.io/npm/v/vue-content-placeholders.svg)

[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)

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

![example](https://i.imgur.com/JQlFjsS.gif)

---

## :cd: Installation

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

* via yarn: `yarn add vue-content-placeholders`

## :rocket: Usage

Include plugin in your `main.js` file.

```javascript

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:

```html

  

  

```

![rendered example](https://i.imgur.com/LWfqxUe.png)

```html

  

  

```

![rendered example](https://i.imgur.com/NBb6ZB7.png)

### Available components and properties

* root ``

  * Boolean `animated` (default: true)

  * Boolean `rounded` (default: false) - border radius

  * Boolean `centered` (default: false)

  > these properties define how all children components will act

* ``

  * Boolean `img` (default: false)

* ``

  * Number `lines` (default: 4)

* ``

---

## 🔓 License

See the [LICENSE](LICENSE.md) file for license rights and limitations (MIT).