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
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
Skeletor
✓ import { Skeletor } from 'vue-skeletor';
✗ import Skeletor from 'vue-skeletor';
The main component for displaying skeleton loaders. It is a named export.
VueSkeletor
✓ import VueSkeletor from 'vue-skeletor';
✗ import { VueSkeletor } from 'vue-skeletor';
The plugin for global configuration, used with `app.use()`. It is a default export.
useSkeletor
✓ import { useSkeletor } from 'vue-skeletor';
✗ import useSkeletor from 'vue-skeletor';
A composable for accessing and modifying global Skeletor configuration at runtime, available after registering the VueSkeletor plugin.
Styles
✓ import 'vue-skeletor/dist/vue-skeletor.css';
Required to import the component's base styling. This should be done once in your main application entry file or a global stylesheet.
Demonstrates how to integrate `vue-skeletor` components within a Vue 3 SFC to provide adaptive loading states for an asynchronously fetched post, including an image, title, and multiple lines of text. It shows both fixed-height skeletons and adaptive text skeletons.
<!-- App.vue -->
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { Skeletor } from 'vue-skeletor';
import 'vue-skeletor/dist/vue-skeletor.css'; // Make sure styles are imported
interface Post {
img: string;
title: string;
text: string;
}
const post = ref<Post | null>(null);
const isPostLoading = ref(true);
onMounted(() => {
// Simulate API call
setTimeout(() => {
post.value = {
img: 'https://via.placeholder.com/200/cccccc/ffffff?text=Post+Image',
title: 'My Awesome Blog Post Title',
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
};
isPostLoading.value = false;
}, 2000);
});
</script>
<template>
<div class="post-container" :style="{ maxWidth: '600px', margin: '20px auto', padding: '20px', border: '1px solid #eee', borderRadius: '8px', boxShadow: '0 2px 4px rgba(0,0,0,0.1)' }">
<div class="post__image" :style="{ marginBottom: '15px' }">
<img
v-if="post"
:src="post.img"
height="200"
:style="{ width: '100%', display: 'block', borderRadius: '4px' }"
/>
<Skeletor v-else-if="isPostLoading" height="200" :style="{ borderRadius: '4px' }"/>
</div>
<div class="post__title" :style="{ fontSize: '2em', fontWeight: 'bold', marginBottom: '10px' }">
<template v-if="post">
{{ post.title }}
</template>
<Skeletor v-else-if="isPostLoading"/>
</div>
<div class="post__text" :style="{ lineHeight: '1.6', color: '#555' }">
<template v-if="post">
{{ post.text }}
</template>
<template v-else-if="isPostLoading">
<Skeletor v-for="i in 5" :key="i" :style="{ marginBottom: '8px' }"/>
</template>
</div>
</div>
</template>
<style>
/* Basic styles for demonstration, usually in a global or scoped stylesheet */
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
margin: 0;
padding: 0;
}
</template>
Errors
Common errors & fixes
[Vue warn]: Failed to resolve component: Skeletor
The `Skeletor` component has not been registered either locally within the component where it's used or globally within the Vue application instance.
fixLocally register the component: `import { Skeletor } from 'vue-skeletor'; export default { components: { Skeletor } }` or globally: `import { Skeletor } from 'vue-skeletor'; app.component(Skeletor.name, Skeletor);` TypeError: Cannot read properties of undefined (reading 'shimmer')
Attempting to use the `useSkeletor` composable to access global configuration before the `VueSkeletor` plugin has been registered with the Vue application instance.
fixEnsure `app.use(VueSkeletor, { shimmer: false })` (or similar) is called in your main application entry file (e.g., `main.js`/`main.ts`) before any components that use `useSkeletor` are mounted. Skeletons appear as unstyled blocks or text, without the shimmer animation.
The required CSS stylesheet for `vue-skeletor` components has not been imported into the application.
fixAdd `import 'vue-skeletor/dist/vue-skeletor.css';` to your primary application entry file (e.g., `main.js` or `main.ts`) to ensure the styles are loaded.
Audit
Dependencies
No dependency data recorded yet.