{"id":12635,"library":"vue3-spinners","title":"Vue 3 Spinners","description":"Vue 3 Spinners is a collection of lightweight, customizable loading spinner components specifically designed for Vue 3 applications. Currently at version 1.3.3, it provides a variety of visually appealing spinners, many of which are derived from Quasar's spinner components and a Vue port of React Spinners. The library is actively maintained, with updates released as new features or bug fixes are introduced, though without a strict release cadence. Key differentiators include its pure Vue component implementation, support for both global and individual component registration, and extensive customization options via props like `color`, `size`, `height`, `width`, `radius`, and `margin`, allowing developers to integrate animated loading indicators seamlessly into their user interfaces. It aims to provide a performant and flexible solution for showing progress or loading states without external CSS frameworks.","status":"active","version":"1.3.3","language":"javascript","source_language":"en","source_url":"https://github.com/leonsilicon/vue3-spinners","tags":["javascript","vue-spinners","vue-spinner","spinner-vue","spinners","spinner","loaders","loader","loading"],"install":[{"cmd":"npm install vue3-spinners","lang":"bash","label":"npm"},{"cmd":"yarn add vue3-spinners","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue3-spinners","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency, required for Vue 3 application integration.","package":"vue","optional":false}],"imports":[{"note":"All individual spinner components are named exports, not default exports. Ensure you use curly braces for destructuring.","wrong":"import VueSpinnerCube from 'vue3-spinners'","symbol":"VueSpinnerCube","correct":"import { VueSpinnerCube } from 'vue3-spinners'"},{"note":"The library primarily targets ESM environments for modern Vue 3 development. Use standard ES module imports.","wrong":"const VueSpinnersPlugin = require('vue3-spinners').VueSpinnersPlugin","symbol":"VueSpinnersPlugin","correct":"import { VueSpinnersPlugin } from 'vue3-spinners'"},{"note":"Each spinner component is prefixed with 'VueSpinner'. Incorrectly omitting 'Vue' will result in a module not found error.","wrong":"import { SpinnerHourglass } from 'vue3-spinners'","symbol":"All Spinners (example: VueSpinnerHourglass)","correct":"import { VueSpinnerHourglass } from 'vue3-spinners'"}],"quickstart":{"code":"<!-- src/components/MyLoadingComponent.vue -->\n<template>\n  <div v-if=\"isLoading\" class=\"loading-overlay\">\n    <VueSpinnerBars :size=\"spinnerSize\" :color=\"spinnerColor\" />\n    <p class=\"loading-text\">Loading data...</p>\n  </div>\n  <div v-else>\n    <!-- Your loaded content here -->\n    <p>Data loaded successfully!</p>\n    <button @click=\"simulateLoading\">Reload Data</button>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted } from 'vue';\nimport { VueSpinnerBars } from 'vue3-spinners';\n\nconst isLoading = ref(true);\nconst spinnerSize = ref(50); // in pixels\nconst spinnerColor = ref('#42b983'); // Vue green\n\nconst simulateLoading = () => {\n  isLoading.value = true;\n  // Simulate an asynchronous operation (e.g., API call)\n  setTimeout(() => {\n    isLoading.value = false;\n  }, 2000);\n};\n\nonMounted(() => {\n  simulateLoading(); // Trigger loading on component mount\n});\n</script>\n\n<style scoped>\n.loading-overlay {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 200px;\n  gap: 15px;\n  background-color: #f0f0f0;\n  border-radius: 8px;\n  margin-top: 20px;\n}\n.loading-text {\n  font-family: sans-serif;\n  color: #333;\n  font-size: 1.1em;\n}\nbutton {\n  padding: 10px 20px;\n  font-size: 1em;\n  color: white;\n  background-color: #42b983;\n  border: none;\n  border-radius: 5px;\n  cursor: pointer;\n  margin-top: 20px;\n}\nbutton:hover {\n  background-color: #368a6f;\n}\n</style>","lang":"typescript","description":"This quickstart demonstrates how to import and conditionally render a specific spinner (`VueSpinnerBars`) in a Vue 3 component using `<script setup>`, simulating a data loading process. It showcases basic prop usage for size and color."},"warnings":[{"fix":"Always use `npm install vue3-spinners` or `yarn add vue3-spinners` for Vue 3 projects.","message":"This `vue3-spinners` package is specifically for Vue 3. An older, unmaintained package named `vue-spinners` exists for Vue 2.x and should not be used in modern Vue 3 applications. Ensure you install `vue3-spinners` to avoid compatibility issues.","severity":"gotcha","affected_versions":"all"},{"fix":"Consult the package's GitHub documentation (https://github.com/leonsilicon/vue3-spinners/tree/main/packages/vue3-spinners/src/spinners) to verify which props are accepted by each individual spinner component.","message":"Spinners have a set of 'universal props' (like `color` and `size`) and 'spinner-dependent props' (like `height`, `width`, `radius`, `margin`) that vary by the specific spinner component. Using a spinner-dependent prop on a spinner that doesn't support it will have no effect or may cause console warnings.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use `<Suspense>` when you need to wait for multiple asynchronous child components to resolve before showing content. For simpler data fetching or state-driven loading, a `v-if` or `v-show` with a local spinner component is often sufficient and more straightforward.","message":"While `vue3-spinners` components can be used as fallback content within Vue 3's built-in `<Suspense>` component, understand that `<Suspense>` is primarily designed to orchestrate asynchronous *component dependencies* (e.g., `async setup()` or `defineAsyncComponent`), not just generic loading states. Misunderstanding its purpose can lead to complex and unnecessary wrapper logic.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you have `import { VueSpinnerXXX } from 'vue3-spinners';` in your script block and either listed in the `components` option (for Options API) or directly used in the template (for `<script setup>`). For global registration, verify `app.use(VueSpinnersPlugin);` is called in your main.ts/main.js file.","cause":"The spinner component was not correctly imported or registered in the Vue application or local component.","error":"Failed to resolve component: VueSpinnerXXX"},{"fix":"Check the documentation or source code for the specific spinner component you are using to confirm its supported props. Ensure you are only passing valid props like `color`, `size`, or other component-specific ones.","cause":"Attempting to pass a prop that is not recognized or accepted by the specific spinner component.","error":"Property 'someUnknownProp' was accessed during render but is not defined on instance."}],"ecosystem":"npm"}