vue-loaders

library4.1.4jsnpmunverified

vue-loaders is a JavaScript library providing Vue.js component wrappers for the popular loaders.css library, which offers a collection of animated loading indicators. The current stable version is 4.1.4. The project actively maintains support for both Vue 2 and Vue 3, with v4.0.0 introducing compatibility for Vue 3. Releases are made on an as-needed basis for features and bug fixes, indicated by recent minor version bumps and a major version increment for Vue 3 support. It differentiates itself by offering flexible integration options: developers can register all loaders globally via a plugin, import individual loader components directly, or dynamically render loaders using a single vue-loaders component with a name prop. It also ships with TypeScript types, improving developer experience in typed environments.

web-framework

npm install vue-loaders

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-LOADERS

vue-loaders

web-frameworkjavascriptv4.1.4

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.

VueLoaders

✓ import VueLoaders from 'vue-loaders';

✗ const VueLoaders = require('vue-loaders');

This imports the main plugin. It is typically used with `Vue.use(VueLoaders)` to globally register all loader components. Modern Vue applications primarily use ESM imports.

VueLoadersBallBeat

✓ import VueLoadersBallBeat from 'vue-loaders/dist/loaders/ball-beat';

✗ import { VueLoadersBallBeat } from 'vue-loaders';

For selective imports, individual loader components are imported directly from their respective paths. This allows for local component registration and can help optimize bundle size by only including necessary loaders.

CSS Styles

✓ import 'vue-loaders/dist/vue-loaders.css';

✗ import 'loaders.css/loaders.min.css';

This CSS import is crucial for the visual styling and animations of all `vue-loaders` components. It must be included once in your application's entry point or main stylesheet for loaders to render correctly.

This example demonstrates how to register all loaders globally using `Vue.use(VueLoaders)` and then utilize both the dedicated component syntax (`<vue-loaders-ball-beat>`) and the dynamic `name` prop approach (`<vue-loaders name="ball-beat">`). It also includes the necessary CSS import for styling.

import Vue from 'vue/dist/vue.esm.browser'; import 'vue-loaders/dist/vue-loaders.css'; import VueLoaders from 'vue-loaders'; Vue.use(VueLoaders); const template = ` <div> <vue-loaders-ball-beat color="red" scale="1"></vue-loaders-ball-beat> <hr/> <vue-loaders name="ball-beat" color="red" scale="1"></vue-loaders> </div> `; new Vue({ template }).$mount('#app');

Debug

Known issues

breakingVersion 4.0.0 introduced breaking changes by adding initial support for Vue 3. Projects using Vue 2 should remain on v3.x.x to avoid compatibility issues, or migrate their application to Vue 3.

fix

For Vue 2 projects, use `npm install vue-loaders@^3` to explicitly install the latest Vue 2 compatible version. For Vue 3 projects, upgrade to v4.x.x.

affects: >=4.0.0

gotchaForgetting to import the `vue-loaders.css` stylesheet will result in loaders appearing as static, unstyled elements without animation, making them effectively invisible or broken.

fix

Ensure `import 'vue-loaders/dist/vue-loaders.css';` is present in your application's entry point (e.g., `main.js`/`main.ts`) or properly linked in your HTML/main stylesheet.

affects: >=1.0.0

gotchaWhile `Vue.use(VueLoaders)` is convenient for global registration of all loaders, it might lead to a larger bundle size if only a few specific loaders are needed. Consider importing and registering individual components locally for better tree-shaking.

fix

Instead of `Vue.use(VueLoaders)`, import specific loaders like `import VueLoadersBallBeat from 'vue-loaders/dist/loaders/ball-beat';` and register them in your component's `components` option: `{ components: { VueLoadersBallBeat } }`.

affects: >=1.0.0

gotchaThe `color` prop directly sets the loader's color. If you want the loader to inherit its color from a parent element's text color, you must explicitly set the `color` prop to `'currentColor'`.

fix

Use `<vue-loaders name="ball-beat" color="currentColor"></vue-loaders>` if you intend for the loader to dynamically inherit its color from its parent container's CSS `color` property.

affects: >=1.0.0

Errors

Common errors & fixes

[Vue warn]: Unknown custom element: <vue-loaders-ball-beat> - did you register the component correctly?

The loader component was not globally registered via `Vue.use(VueLoaders)` or locally registered within the Vue component where it's being used.

fix

Add `Vue.use(VueLoaders);` to your application's entry file (e.g., `main.js` or `main.ts`), or import specific loaders and register them in your component's `components` option: `{ components: { VueLoadersBallBeat } }`.

Loader appears as static dots/shapes, no animation or incorrect styling.

The required `vue-loaders/dist/vue-loaders.css` stylesheet was not properly imported or linked in the application.

fix

Ensure `import 'vue-loaders/dist/vue-loaders.css';` is included in your main JavaScript/TypeScript file or that the CSS file is otherwise correctly loaded by your build system.

Upgrade

Version history

4.1.4latest on npm

Audit

Dependencies

vuerequiredRuntime peer dependency required for all components.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/Hokid/vue-loaders ↗

packagehttps://www.npmjs.com/package/vue-loaders ↗