{"id":12520,"library":"vue-loaders","title":"Vue Loaders","description":"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.","status":"active","version":"4.1.4","language":"javascript","source_language":"en","source_url":"https://github.com/Hokid/vue-loaders","tags":["javascript","vue","vuejs","vue-loaders","loader","loaders.css","animation","animate","spinner","typescript"],"install":[{"cmd":"npm install vue-loaders","lang":"bash","label":"npm"},{"cmd":"yarn add vue-loaders","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-loaders","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime peer dependency required for all components.","package":"vue","optional":false}],"imports":[{"note":"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.","wrong":"const VueLoaders = require('vue-loaders');","symbol":"VueLoaders","correct":"import VueLoaders from 'vue-loaders';"},{"note":"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.","wrong":"import { VueLoadersBallBeat } from 'vue-loaders';","symbol":"VueLoadersBallBeat","correct":"import VueLoadersBallBeat from 'vue-loaders/dist/loaders/ball-beat';"},{"note":"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.","wrong":"import 'loaders.css/loaders.min.css';","symbol":"CSS Styles","correct":"import 'vue-loaders/dist/vue-loaders.css';"}],"quickstart":{"code":"import Vue from 'vue/dist/vue.esm.browser';\nimport 'vue-loaders/dist/vue-loaders.css';\nimport VueLoaders from 'vue-loaders';\n\nVue.use(VueLoaders);\n\nconst template = `\n<div>\n  <vue-loaders-ball-beat color=\"red\" scale=\"1\"></vue-loaders-ball-beat>\n  <hr/>\n  <vue-loaders name=\"ball-beat\" color=\"red\" scale=\"1\"></vue-loaders>\n</div>\n`;\n\nnew Vue({\n  template\n}).$mount('#app');","lang":"javascript","description":"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."},"warnings":[{"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.","message":"Version 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.","severity":"breaking","affected_versions":">=4.0.0"},{"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.","message":"Forgetting to import the `vue-loaders.css` stylesheet will result in loaders appearing as static, unstyled elements without animation, making them effectively invisible or broken.","severity":"gotcha","affected_versions":">=1.0.0"},{"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 } }`.","message":"While `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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"The `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'`.","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":"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 } }`.","cause":"The loader component was not globally registered via `Vue.use(VueLoaders)` or locally registered within the Vue component where it's being used.","error":"[Vue warn]: Unknown custom element: <vue-loaders-ball-beat> - did you register the component correctly?"},{"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.","cause":"The required `vue-loaders/dist/vue-loaders.css` stylesheet was not properly imported or linked in the application.","error":"Loader appears as static dots/shapes, no animation or incorrect styling."}],"ecosystem":"npm"}