{"id":12576,"library":"vue-skeletor","title":"Vue Skeletor","description":"Vue Skeletor is an adaptive skeleton loading component library specifically designed for Vue 3 applications, currently at version 1.0.6. It aims to simplify the creation of loading states by providing components that automatically adjust to the typography and layout of existing content. Unlike traditional skeleton libraries where developers manually define the size and position of skeleton elements, Vue Skeletor allows direct injection into existing component structures, automatically mimicking text styles. It offers both a component (`Skeletor`) for direct use in templates and a plugin (`VueSkeletor`) for global configuration, including dynamic runtime adjustments via the `useSkeletor` composable. The library focuses on reducing boilerplate and maintenance overhead associated with keeping skeleton loaders in sync with UI changes.","status":"active","version":"1.0.6","language":"javascript","source_language":"en","source_url":"https://github.com/DarkC0der11/vue-skeletor","tags":["javascript","vue","vue js","vue 3","vue 3 skeleton","vue 3 skeleton loading","vue 3 skeleton loader","vue skeleton","vue skeleton loading","typescript"],"install":[{"cmd":"npm install vue-skeletor","lang":"bash","label":"npm"},{"cmd":"yarn add vue-skeletor","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-skeletor","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The main component for displaying skeleton loaders. It is a named export.","wrong":"import Skeletor from 'vue-skeletor';","symbol":"Skeletor","correct":"import { Skeletor } from 'vue-skeletor';"},{"note":"The plugin for global configuration, used with `app.use()`. It is a default export.","wrong":"import { VueSkeletor } from 'vue-skeletor';","symbol":"VueSkeletor","correct":"import VueSkeletor from 'vue-skeletor';"},{"note":"A composable for accessing and modifying global Skeletor configuration at runtime, available after registering the VueSkeletor plugin.","wrong":"import useSkeletor from 'vue-skeletor';","symbol":"useSkeletor","correct":"import { useSkeletor } from 'vue-skeletor';"},{"note":"Required to import the component's base styling. This should be done once in your main application entry file or a global stylesheet.","symbol":"Styles","correct":"import 'vue-skeletor/dist/vue-skeletor.css';"}],"quickstart":{"code":"<!-- App.vue -->\n<script setup lang=\"ts\">\nimport { ref, onMounted } from 'vue';\nimport { Skeletor } from 'vue-skeletor';\nimport 'vue-skeletor/dist/vue-skeletor.css'; // Make sure styles are imported\n\ninterface Post {\n  img: string;\n  title: string;\n  text: string;\n}\n\nconst post = ref<Post | null>(null);\nconst isPostLoading = ref(true);\n\nonMounted(() => {\n  // Simulate API call\n  setTimeout(() => {\n    post.value = {\n      img: 'https://via.placeholder.com/200/cccccc/ffffff?text=Post+Image',\n      title: 'My Awesome Blog Post Title',\n      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.'\n    };\n    isPostLoading.value = false;\n  }, 2000);\n});\n</script>\n\n<template>\n  <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)' }\">\n    <div class=\"post__image\" :style=\"{ marginBottom: '15px' }\">\n      <img \n        v-if=\"post\" \n        :src=\"post.img\"\n        height=\"200\"\n        :style=\"{ width: '100%', display: 'block', borderRadius: '4px' }\"\n      />\n      <Skeletor v-else-if=\"isPostLoading\" height=\"200\" :style=\"{ borderRadius: '4px' }\"/>\n    </div>\n        \n    <div class=\"post__title\" :style=\"{ fontSize: '2em', fontWeight: 'bold', marginBottom: '10px' }\">\n      <template v-if=\"post\">\n        {{ post.title }}\n      </template>\n      <Skeletor v-else-if=\"isPostLoading\"/>\n    </div>\n\n    <div class=\"post__text\" :style=\"{ lineHeight: '1.6', color: '#555' }\">\n      <template v-if=\"post\">\n        {{ post.text }}\n      </template>\n      <template v-else-if=\"isPostLoading\">\n        <Skeletor v-for=\"i in 5\" :key=\"i\" :style=\"{ marginBottom: '8px' }\"/>\n      </template>\n    </div>\n  </div>\n</template>\n\n<style>\n/* Basic styles for demonstration, usually in a global or scoped stylesheet */\nbody {\n  font-family: Arial, sans-serif;\n  background-color: #f9f9f9;\n  margin: 0;\n  padding: 0;\n}\n</template>","lang":"typescript","description":"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."},"warnings":[{"fix":"For adaptive text skeletons that mimic surrounding text styles, omit the `height` prop. For fixed-size block elements (like image placeholders), use the `height` prop as intended to define its dimensions.","message":"When the `height` prop is explicitly set on a `<Skeletor />` component, it automatically renders as a block-level rectangle (`display: block`). This means it will no longer adapt to the typography or layout of its parent element, as it's intended for fixed-size elements like images or buttons. This behavior is by design but can be a surprise if you expect text adaptability.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add `import 'vue-skeletor/dist/vue-skeletor.css';` to your main application entry file (e.g., `main.js` or `main.ts`) or a global stylesheet where it can be applied application-wide.","message":"The visual styles for `vue-skeletor` components are not automatically bundled with the component logic. For the skeletons to render correctly with their characteristic shimmer effect and background, the library's CSS must be explicitly imported into your application.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure you use `import { Skeletor } from 'vue-skeletor';` for the component and `import VueSkeletor from 'vue-skeletor';` for the plugin to register it correctly.","message":"The `Skeletor` component is provided as a named export, whereas the `VueSkeletor` plugin (used with `app.use()`) is a default export. Incorrect import statements can lead to Vue failing to resolve the component or the plugin being undefined.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Locally register the component: `import { Skeletor } from 'vue-skeletor'; export default { components: { Skeletor } }` or globally: `import { Skeletor } from 'vue-skeletor'; app.component(Skeletor.name, Skeletor);`","cause":"The `Skeletor` component has not been registered either locally within the component where it's used or globally within the Vue application instance.","error":"[Vue warn]: Failed to resolve component: Skeletor"},{"fix":"Ensure `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.","cause":"Attempting to use the `useSkeletor` composable to access global configuration before the `VueSkeletor` plugin has been registered with the Vue application instance.","error":"TypeError: Cannot read properties of undefined (reading 'shimmer')"},{"fix":"Add `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.","cause":"The required CSS stylesheet for `vue-skeletor` components has not been imported into the application.","error":"Skeletons appear as unstyled blocks or text, without the shimmer animation."}],"ecosystem":"npm"}