Registry / web-framework / vue3-spinners

vue3-spinners

library1.3.3jsnpmunverified

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.

web-framework

npm install vue3-spinners

github ↗package ↗

INSTALL

IMPORT

SIG · VUE3-SPINNERS

vue3-spinners

web-frameworkjavascriptv1.3.3

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.

VueSpinnerCube

✓ import { VueSpinnerCube } from 'vue3-spinners'

✗ import VueSpinnerCube from 'vue3-spinners'

All individual spinner components are named exports, not default exports. Ensure you use curly braces for destructuring.

VueSpinnersPlugin

✓ import { VueSpinnersPlugin } from 'vue3-spinners'

✗ const VueSpinnersPlugin = require('vue3-spinners').VueSpinnersPlugin

The library primarily targets ESM environments for modern Vue 3 development. Use standard ES module imports.

All Spinners (example: VueSpinnerHourglass)

✓ import { VueSpinnerHourglass } from 'vue3-spinners'

✗ import { SpinnerHourglass } from 'vue3-spinners'

Each spinner component is prefixed with 'VueSpinner'. Incorrectly omitting 'Vue' will result in a module not found error.

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.

<template> <div v-if="isLoading" class="loading-overlay"> <VueSpinnerBars :size="spinnerSize" :color="spinnerColor" /> <p class="loading-text">Loading data...</p> </div> <div v-else>  <p>Data loaded successfully!</p> <button @click="simulateLoading">Reload Data</button> </div> </template> <script setup lang="ts"> import { ref, onMounted } from 'vue'; import { VueSpinnerBars } from 'vue3-spinners'; const isLoading = ref(true); const spinnerSize = ref(50); // in pixels const spinnerColor = ref('#42b983'); // Vue green const simulateLoading = () => { isLoading.value = true; // Simulate an asynchronous operation (e.g., API call) setTimeout(() => { isLoading.value = false; }, 2000); }; onMounted(() => { simulateLoading(); // Trigger loading on component mount }); </script> <style scoped> .loading-overlay { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 200px; gap: 15px; background-color: #f0f0f0; border-radius: 8px; margin-top: 20px; } .loading-text { font-family: sans-serif; color: #333; font-size: 1.1em; } button { padding: 10px 20px; font-size: 1em; color: white; background-color: #42b983; border: none; border-radius: 5px; cursor: pointer; margin-top: 20px; } button:hover { background-color: #368a6f; } </style>

Debug

Known issues

gotchaThis `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.

fix

Always use `npm install vue3-spinners` or `yarn add vue3-spinners` for Vue 3 projects.

affects: all

gotchaSpinners 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.

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.

affects: >=1.0.0

gotchaWhile `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.

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.

affects: all

Errors

Common errors & fixes

Failed to resolve component: VueSpinnerXXX

The spinner component was not correctly imported or registered in the Vue application or local component.

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.

Property 'someUnknownProp' was accessed during render but is not defined on instance.

Attempting to pass a prop that is not recognized or accepted by the specific spinner component.

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.

Upgrade

Version history

1.3.3latest on npm

Audit

Dependencies

vuerequiredPeer dependency, required for Vue 3 application integration.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/leonsilicon/vue3-spinners ↗

packagehttps://www.npmjs.com/package/vue3-spinners ↗