{"id":12583,"library":"vue-spinner","title":"Vue Spinner Components","description":"vue-spinner is a collection of 16 highly customizable loading spinner components for Vue.js applications. Currently at version 3.0.1, it specifically targets Vue 3.5+ using the Composition API, offering full TypeScript support with detailed prop types, and ships with ESM and UMD outputs for broad compatibility. The library differentiates itself by providing a variety of pre-built, production-ready spinners based on the Halogen project, covering common loading patterns with props for `loading` state, `color`, `size` (or `height`/`width`), `margin`, and `radius`. While it recently underwent a major overhaul for Vue 3 compatibility, previous versions (like 1.0.4) are available for Vue 1.x projects, establishing a clear versioning strategy tied to Vue's major releases. The project appears to have an active maintenance cadence, with recent updates adding significant test coverage via Vitest.","status":"active","version":"3.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/greyby/vue-spinner","tags":["javascript","spinner","vuejs","vue3","loading","typescript"],"install":[{"cmd":"npm install vue-spinner","lang":"bash","label":"npm"},{"cmd":"yarn add vue-spinner","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-spinner","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vue.js components, specifically requires Vue 3.5.0 or later for v3.x versions.","package":"vue","optional":false}],"imports":[{"note":"This is the recommended ES Module import for named components. CommonJS `require` is not supported for individual components directly from the main bundle in v3.","wrong":"const PulseLoader = require('vue-spinner')","symbol":"PulseLoader","correct":"import { PulseLoader } from 'vue-spinner'"},{"note":"Direct import of a single Vue component file. Useful for tree-shaking or when you only need a specific spinner.","symbol":"PulseLoader","correct":"import PulseLoader from 'vue-spinner/src/PulseLoader.vue'"},{"note":"Available in browser environments when using the UMD build (`vue-spinner.umd.js`), which exposes a global `VueSpinner` object.","symbol":"VueSpinner","correct":"const { PulseLoader, GridLoader } = VueSpinner"},{"note":"Since v3.0.1, the package ships with full TypeScript declarations for all components and their props.","symbol":"types","correct":"import type { PulseLoaderProps } from 'vue-spinner'"}],"quickstart":{"code":"import { ref } from 'vue'\nimport { PulseLoader } from 'vue-spinner'\n\nconst App = {\n  setup() {\n    const loading = ref(true)\n    const color = ref('#5dc596')\n    const size = ref('15px')\n\n    // Simulate loading state change after a few seconds\n    setTimeout(() => {\n      loading.value = false;\n    }, 3000);\n\n    return {\n      loading,\n      color,\n      size\n    }\n  },\n  template: `\n    <div style=\"display: flex; justify-content: center; align-items: center; min-height: 100px;\">\n      <pulse-loader :loading=\"loading\" :color=\"color\" :size=\"size\"></pulse-loader>\n      <p v-if=\"!loading\" style=\"margin-left: 10px;\">Content Loaded!</p>\n    </div>\n  `,\n  components: { PulseLoader }\n}\n\n// In a real Vue app, you would mount this:\n// import { createApp } from 'vue'\n// createApp(App).mount('#app')","lang":"typescript","description":"Demonstrates importing and using the PulseLoader component in a Vue 3 setup script, managing its loading state and custom props."},"warnings":[{"fix":"For Vue 1.x projects, use `vue-spinner@1.0.4`. For Vue 3.x projects, ensure your Vue version is 3.5.0 or higher. Migrate your component usage to the Vue 3 Composition API where applicable.","message":"Version 3.x of vue-spinner is a complete rewrite for Vue 3.x and is incompatible with Vue 1.x.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Always consult the 'Props' section in the documentation or the component's TypeScript definitions to determine the correct sizing props for each spinner component.","message":"While many spinners use a `size` prop, some like `FadeLoader` and `ScaleLoader` use `height` and `width` instead. Check the documentation for specific spinner props.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"If experiencing unexpected styling, inspect the elements to check for conflicting CSS rules. Use more specific CSS selectors or consider CSS Modules/scoped styles in your own components to avoid global clashes.","message":"Global CSS styles could potentially conflict with the spinner styles if not properly scoped. Although `vue-spinner` v3 now uses scoped CSS, external styles might still interfere.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you either use a named import like `import { PulseLoader } from 'vue-spinner'` and list it in `components: { PulseLoader }`, or globally register it with `app.component('PulseLoader', PulseLoader)`.","cause":"The spinner component was not correctly imported or registered with the Vue application.","error":"Failed to resolve component: <component-name>"},{"fix":"When importing individual components like `import PulseLoader from 'vue-spinner/src/PulseLoader.vue'`, ensure your build setup (Vite, Webpack) is correctly configured to process `.vue` Single File Components. For most cases, `import { PulseLoader } from 'vue-spinner'` is preferred as it imports the pre-compiled component.","cause":"Attempting to import a `.vue` file component directly in an environment that doesn't support Vue SFC compilation (e.g., a vanilla JS file without a build step, or a mismatched bundler configuration).","error":"[Vue warn]: Component <Component> is missing template or render function."}],"ecosystem":"npm"}