Registry / web-framework / vue-loading-skeleton

vue-loading-skeleton

library1.1.9jsnpmunverified

Vue Loading Skeleton is a component library designed for Vue 2 applications, specifically requiring `vue: ^2.6.11`. It offers a streamlined approach to creating animated loading skeleton screens. A key differentiator of this library is its `Skeleton` component's ability to automatically adapt to the dimensions and typography of the actual content it will eventually replace. This eliminates the manual effort often required to perfectly match font-sizes, margins, or line heights, as it intelligently derives these styles from the wrapped content's first child node. The library also includes a `SkeletonTheme` component, allowing developers to apply global styling parameters like color and animation duration across multiple `Skeleton` instances. The current stable version is 1.1.9, with its last major update occurring approximately six years ago. This indicates that the project is in a maintenance phase, primarily supporting its existing Vue 2 user base, rather than active development with new features. For Vue 3 projects, users should seek out more recently developed, Vue 3-compatible skeleton loading libraries.

web-framework

npm install vue-loading-skeleton

package ↗

INSTALL

IMPORT

SIG · VUE-LOADING-SKELET

vue-loading-skeleton

web-frameworkjavascriptv1.1.9

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Skeleton

✓ import { Skeleton } from 'vue-loading-skeleton'

✗ import Skeleton from 'vue-loading-skeleton'

Named import for the primary skeleton component. This library does not provide a default export.

SkeletonTheme

✓ import { SkeletonTheme } from 'vue-loading-skeleton'

Named import for the theme provider component, used to apply global styles to nested skeletons.

Vue component registration

✓ import { Skeleton, SkeletonTheme } from 'vue-loading-skeleton'; export default { components: { Skeleton, SkeletonTheme } }

✗ const Skeleton = require('vue-loading-skeleton')

Vue components are typically imported as named exports and registered in the `components` option. CommonJS `require` syntax is not the idiomatic way for modern Vue 2 applications, especially with TypeScript support.

This example demonstrates how to integrate `vue-loading-skeleton` into a Vue 2 application, showing a `Skeleton` component while data is being fetched and then rendering the actual content. It also uses `SkeletonTheme` to apply a consistent animation style.

<template> <div id="app"> <h1>Data Loader Example</h1> <SkeletonTheme color="#e6f3fd" highlight="#eef6fd"> <div class="post-card"> <template v-if="post.title"> <h2 class="post-title">{{ post.title }}</h2> <p class="post-body">{{ post.body }}</p> </template> <template v-else> <div class="loading-state"> <Skeleton class="post-title" /> <Skeleton class="post-body" :count="3" /> </div> </template> </div> </SkeletonTheme> </div> </template> <script lang="ts"> import Vue from 'vue'; import { Skeleton, SkeletonTheme } from 'vue-loading-skeleton'; interface Post { title: string; body: string; } export default Vue.extend({ name: 'App', components: { Skeleton, SkeletonTheme, }, data() { return { post: {} as Post, }; }, async created() { // Simulate API call await new Promise(resolve => setTimeout(resolve, 2000)); this.post = { title: 'My Awesome Blog Post', body: 'This is the content of my awesome blog post. It has multiple lines to demonstrate the skeleton loading effect. The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit.', }; }, }); </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } .post-card { max-width: 600px; margin: 0 auto; padding: 20px; border: 1px solid #eee; border-radius: 8px; text-align: left; } .post-title { font-size: 2em; font-weight: bold; margin-bottom: 10px; } .post-body { font-size: 1.1em; line-height: 1.6; } .loading-state .post-title { height: 2em; /* Ensure skeleton matches expected title height */ } .loading-state .post-body { height: 1.1em; /* Ensure skeleton matches expected line height */ } </style>

Debug

Known issues

breakingThis library is built exclusively for Vue 2 applications (specifically `vue: ^2.6.11` as a peer dependency). It is not compatible with Vue 3 due to fundamental changes in Vue's reactivity system and component API. Attempting to use it in a Vue 3 project will lead to runtime errors.

fix

For Vue 3 projects, consider using dedicated Vue 3 skeleton loading libraries such as `vue3-loading-skeleton`, `vue-skeletor`, or `@brayamvalero/vue3-skeleton`.

affects: >=1.0.0

gotchaThe `Skeleton` component's auto-adaptation feature relies on inspecting the tag and text of its *first child node* when the content is present. If the skeleton doesn't adapt as expected, ensure the first direct child element (`h1`, `p`, etc.) encapsulates the primary content, or manually provide sizing props if needed.

fix

Wrap your content in a single root element (e.g., a `<div>` or specific semantic tag) within the `Skeleton` component if auto-adaptation is misbehaving. Alternatively, use `v-if` to conditionally render `Skeleton` or the actual content, or directly pass `height` and `width` props to `Skeleton` for explicit control.

affects: >=1.0.0

deprecatedThe library has not been actively maintained for approximately six years, with the last update being version 1.1.9. While it remains functional for Vue 2 projects, it is considered feature-complete and unlikely to receive new features or significant updates.

fix

For new Vue 2 projects, this library is still a viable option. However, for long-term projects or those considering migrating to Vue 3, plan for a transition to a more actively maintained skeleton library.

affects: <=1.1.9

Errors

Common errors & fixes

[Vue warn]: Unknown custom element: <Skeleton> - did you register the component correctly?

The `Skeleton` component (or `SkeletonTheme`) was used in a Vue template without being properly imported and registered in the parent component's `components` option.

fix

Ensure you `import { Skeleton, SkeletonTheme } from 'vue-loading-skeleton'` in your script and include `Skeleton` and `SkeletonTheme` in the `components: { ... }` object of your Vue component.

TypeError: Cannot read properties of undefined (reading 'install') at Function.use

Attempting to use `vue-loading-skeleton` in a Vue 3 application. The `install` method or component registration approach differs significantly between Vue 2 and Vue 3, leading to compatibility issues.

fix

This library is for Vue 2 only. If you are using Vue 3, you must use a Vue 3-compatible skeleton loading library.

The skeleton component will check the tag and text in the first child node. If you find the component work is not in expect, you should use v-if or loading props.

This is a console warning from the library itself, indicating that the automatic style adaptation might not be working as expected because of the structure of the content wrapped by `Skeleton`.

fix

Either adjust the content structure to ensure a single, representative first child node, or explicitly control the `Skeleton`'s visibility using `v-if` based on a `loading` state, or provide `width` and `height` props to the `Skeleton` component directly.

Upgrade

Version history

1.1.9latest on npm

Audit

Dependencies

vuerequiredRuntime peer dependency required for the Vue 2 component library.

Agent activity

5 hits · last 30 days

node

OpenAI (training)

Resources

packagehttps://www.npmjs.com/package/vue-loading-skeleton ↗