{"id":12521,"library":"vue-loading-skeleton","title":"Vue Loading Skeleton","description":"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.","status":"maintenance","version":"1.1.9","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","vuejs","vue","skeleton","typescript"],"install":[{"cmd":"npm install vue-loading-skeleton","lang":"bash","label":"npm"},{"cmd":"yarn add vue-loading-skeleton","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-loading-skeleton","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime peer dependency required for the Vue 2 component library.","package":"vue","optional":false}],"imports":[{"note":"Named import for the primary skeleton component. This library does not provide a default export.","wrong":"import Skeleton from 'vue-loading-skeleton'","symbol":"Skeleton","correct":"import { Skeleton } from 'vue-loading-skeleton'"},{"note":"Named import for the theme provider component, used to apply global styles to nested skeletons.","symbol":"SkeletonTheme","correct":"import { SkeletonTheme } from 'vue-loading-skeleton'"},{"note":"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.","wrong":"const Skeleton = require('vue-loading-skeleton')","symbol":"Vue component registration","correct":"import { Skeleton, SkeletonTheme } from 'vue-loading-skeleton'; export default { components: { Skeleton, SkeletonTheme } }"}],"quickstart":{"code":"<!-- App.vue -->\n<template>\n  <div id=\"app\">\n    <h1>Data Loader Example</h1>\n    <SkeletonTheme color=\"#e6f3fd\" highlight=\"#eef6fd\">\n      <div class=\"post-card\">\n        <template v-if=\"post.title\">\n          <h2 class=\"post-title\">{{ post.title }}</h2>\n          <p class=\"post-body\">{{ post.body }}</p>\n        </template>\n        <template v-else>\n          <div class=\"loading-state\">\n            <Skeleton class=\"post-title\" />\n            <Skeleton class=\"post-body\" :count=\"3\" />\n          </div>\n        </template>\n      </div>\n    </SkeletonTheme>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { Skeleton, SkeletonTheme } from 'vue-loading-skeleton';\n\ninterface Post {\n  title: string;\n  body: string;\n}\n\nexport default Vue.extend({\n  name: 'App',\n  components: {\n    Skeleton,\n    SkeletonTheme,\n  },\n  data() {\n    return {\n      post: {} as Post,\n    };\n  },\n  async created() {\n    // Simulate API call\n    await new Promise(resolve => setTimeout(resolve, 2000));\n    this.post = {\n      title: 'My Awesome Blog Post',\n      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.',\n    };\n  },\n});\n</script>\n\n<style>\n#app {\n  font-family: Avenir, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\n.post-card {\n  max-width: 600px;\n  margin: 0 auto;\n  padding: 20px;\n  border: 1px solid #eee;\n  border-radius: 8px;\n  text-align: left;\n}\n.post-title {\n  font-size: 2em;\n  font-weight: bold;\n  margin-bottom: 10px;\n}\n.post-body {\n  font-size: 1.1em;\n  line-height: 1.6;\n}\n.loading-state .post-title {\n  height: 2em; /* Ensure skeleton matches expected title height */\n}\n.loading-state .post-body {\n  height: 1.1em; /* Ensure skeleton matches expected line height */\n}\n</style>","lang":"typescript","description":"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."},"warnings":[{"fix":"For Vue 3 projects, consider using dedicated Vue 3 skeleton loading libraries such as `vue3-loading-skeleton`, `vue-skeletor`, or `@brayamvalero/vue3-skeleton`.","message":"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.","severity":"breaking","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"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.","severity":"deprecated","affected_versions":"<=1.1.9"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","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.","error":"[Vue warn]: Unknown custom element: <Skeleton> - did you register the component correctly?"},{"fix":"This library is for Vue 2 only. If you are using Vue 3, you must use a Vue 3-compatible skeleton loading library.","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.","error":"TypeError: Cannot read properties of undefined (reading 'install') at Function.use"},{"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.","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`.","error":"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."}],"ecosystem":"npm"}