Registry / web-framework / skeleton-loader-vue

skeleton-loader-vue

library1.0.10jsnpmunverified

skeleton-loader-vue is a simple, customizable skeleton loader component designed for Vue.js applications to enhance user experience by displaying placeholder content while data is being fetched. Currently at version 1.0.10, this library is specifically built for Vue 2.x environments (peer dependency `vue: ^2.6.11`). It provides configurable shapes (rectangle, circle), dimensions, animations (wave, fade, pulse), and colors. Its release cadence is no longer active, as it has not seen updates in several years. Key differentiators include its ease of use and direct integration into Vue 2 component structures for displaying progressive loading states.

web-framework

npm install skeleton-loader-vue

github ↗package ↗

INSTALL

IMPORT

SIG · SKELETON-LOADER-VU

skeleton-loader-vue

web-frameworkjavascriptv1.0.10

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.

VueSkeletonLoader

✓ import VueSkeletonLoader from 'skeleton-loader-vue';

✗ const VueSkeletonLoader = require('skeleton-loader-vue');

Primarily designed for ESM usage in modern Vue 2 projects. CommonJS `require` might not work seamlessly with all build setups.

Global Component Registration

✓ import VueSkeletonLoader from 'skeleton-loader-vue'; Vue.component('vue-skeleton-loader', VueSkeletonLoader);

✗ Vue.component('skeleton-loader', VueSkeletonLoader);

The component is usually registered globally as `vue-skeleton-loader` or imported locally. Using a different global name requires explicit registration.

Local Component Import

✓ import VueSkeletonLoader from 'skeleton-loader-vue'; export default { components: { VueSkeletonLoader }, };

✗ import { VueSkeletonLoader } from 'skeleton-loader-vue';

The component is a default export, so curly braces for named imports should not be used.

This example demonstrates how to integrate `skeleton-loader-vue` into a Vue component to display a user profile loading state, using circle and rectangle types with custom dimensions and animations.

<template> <div class="facebook-card"> <p>Loading user profile...</p> <skeleton-loader-vue type="circle" :width="100" :height="100" animation="wave" color="#e0e0e0" wave-color="#f5f5f5" /> <div style="margin-top: 10px;"> <skeleton-loader-vue type="rect" :width="250" :height="20" rounded /> <skeleton-loader-vue type="rect" :width="200" :height="15" style="margin-top: 5px;" /> </div> </div> </template> <script> import VueSkeletonLoader from 'skeleton-loader-vue'; export default { name: 'UserProfileLoader', components: { VueSkeletonLoader }, mounted() { console.log('Skeleton loader component mounted.'); } }; </script> <style scoped> .facebook-card { border: 1px solid #eee; padding: 20px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; max-width: 300px; margin: 20px auto; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } p { color: #888; font-size: 14px; margin-bottom: 15px; } </style>

Debug

Known issues

breakingThis package is explicitly built for Vue 2.x and is not compatible with Vue 3. Attempting to use it in a Vue 3 project will result in errors related to Vue API changes.

fix

For Vue 3 projects, consider using a different skeleton loader library that officially supports Vue 3, or migrate your project to Vue 2 if this specific library is critical.

affects: >=1.0.0

gotchaThe project appears to be abandoned, with no significant updates or commits on its GitHub repository for several years. This means there will likely be no new features, bug fixes, or security updates.

fix

Evaluate the risk of using an unmaintained library. For new projects or critical applications, consider alternatives with active development. For existing projects, be aware that you may need to fork and maintain it yourself for any issues.

affects: >=1.0.0

gotchaEnsure the component is correctly registered, either globally via `Vue.component` or locally within the `components` option of your Vue component. Forgetting to register will lead to 'Unknown custom element' errors.

fix

Verify that `import VueSkeletonLoader from 'skeleton-loader-vue';` and then `Vue.component('vue-skeleton-loader', VueSkeletonLoader);` (for global) or `components: { VueSkeletonLoader }` (for local) is correctly implemented.

affects: >=1.0.0

Errors

Common errors & fixes

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

The `VueSkeletonLoader` component has not been registered with Vue, either globally or locally within the parent component.

fix

Ensure you have either `Vue.component('vue-skeleton-loader', VueSkeletonLoader);` in your main.js or `components: { VueSkeletonLoader }` in the script section of your .vue file.

Error in render: 'width' is not defined

The `width` or `height` prop is being passed without a `:` prefix when using a numeric value, causing it to be interpreted as a string literal instead of a number.

fix

Use prop binding syntax: `:width="200"` instead of `width="200"`. Although `width` and `height` accept strings, for numeric values or dynamic binding, the colon is essential.

TypeError: Cannot read properties of undefined (reading 'install')

This error can occur if you're trying to use a Vue 2 plugin in a Vue 3 environment or if the plugin's entry point is incorrect.

fix

This specific package is for Vue 2. If you are on Vue 3, you must use a different skeleton loader. If you are on Vue 2, ensure your build setup correctly resolves the package's main file.

Upgrade

Version history

1.0.10latest on npm

Audit

Dependencies

vuerequiredPeer dependency, required for the component to function within a Vue 2 application.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/abdulqudus001/vue-skeleton-loader ↗

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