Vue Loading Skeleton

1.1.9 · maintenance · verified Sun Apr 19

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.

Common errors

```
[Vue warn]: Unknown custom element: <Skeleton> - did you register the component correctly?
```
cause 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
```
cause 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.
```
cause 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.

Warnings

breaking This 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`.
gotcha The `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.
deprecated The 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.

Install

npm install vue-loading-skeleton npm
yarn add vue-loading-skeleton yarn
pnpm add vue-loading-skeleton pnpm

Imports

Skeleton
wrong:
```
import Skeleton from 'vue-loading-skeleton'
```
correct:
```
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
wrong:
```
const Skeleton = require('vue-loading-skeleton')
```
correct:
```
import { Skeleton, SkeletonTheme } from 'vue-loading-skeleton'; export default { components: { Skeleton, SkeletonTheme } }
```
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.

Quickstart

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.

<!-- App.vue -->
<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>

view raw JSON →