michalsnik/vue-content-placeholders

JavaScript

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

lazy-loadingprogressive-renderingloaderfake-contentskeletonvuevue-components

Key Metrics

Star Growth

Stars

1.6k

Forks

Weekly Growth

—

Issues

5001k1.5k

Nov 2017Apr 2019Sep 2020Mar 2022Aug 2023Feb 2025Jul 2026

Artifactsnpmnpm install vue-content-placeholders

README

vue-content-placeholders

npm

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

example

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

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

Related repositories

verlok/vanilla-lazyload

LazyLoad is a lightweight, flexible script that speeds up your website by deferring the loading of your below-the-fold images, backgrounds, videos, iframes and scripts to when they will enter the viewport. Written in plain "vanilla" JavaScript, it leverages IntersectionObserver, supports responsive images and enables native lazy loading.

JavaScriptnpmMIT Licenselazyload-imageslazy-loading

andreaverlicchi.eu/vanilla-lazyload/

7.9k673

ApoorvSaxena/lozad.js

🔥 Highly performant, light ~1kb and configurable lazy loader in pure JS with no dependencies for responsive images, iframes and more

JavaScriptnpmMIT Licenseperformancejavascript

apoorv.pro/lozad.js/demo/

7.5k436

thebuilder/react-intersection-observer

React implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport.

TypeScriptnpmMIT Licenseintersectionobserver-apireact

react-intersection-observer.vercel.app