{"id":12522,"library":"vue-loading-template","title":"Vue Loading Template","description":"Vue Loading Template (vue-loading-template) is a Vue.js 2 component library offering a collection of SVG-based loading indicators. It provides a straightforward API to embed various animated loaders, such as 'balls', 'bars', 'bubbles', and 'cylon', into Vue applications. The library is currently at version 1.3.2 and appears to be in an unmaintained or abandoned status, with its last npm publish over 7 years ago and GitHub activity ceasing around 2019. Its primary differentiator is the use of SVG for animations, which ensures scalability and high-quality rendering, and its simple integration as either a global Vue plugin or a local component. Due to its age, it is designed for Vue 2 applications and lacks direct compatibility with Vue 3's composition API or `createApp` paradigm.","status":"abandoned","version":"1.3.2","language":"javascript","source_language":"en","source_url":"https://github.com/jkchao/vue-loading","tags":["javascript","vue","loading","template","typescript"],"install":[{"cmd":"npm install vue-loading-template","lang":"bash","label":"npm"},{"cmd":"yarn add vue-loading-template","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-loading-template","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vue 2 applications, as the library is built for Vue 2 ecosystem.","package":"vue","optional":false}],"imports":[{"note":"When importing the component for local registration, use a named import. The default import is for plugin installation.","wrong":"import VueLoading from 'vue-loading-template'","symbol":"VueLoading","correct":"import { VueLoading } from 'vue-loading-template'"},{"note":"When installing as a global Vue plugin via `Vue.use()`, the package exports the plugin as a default export.","wrong":"import { VueLoading } from 'vue-loading-template'; Vue.use(VueLoading);","symbol":"VueLoading","correct":"import VueLoading from 'vue-loading-template'; Vue.use(VueLoading);"},{"note":"For TypeScript users, `VueLoadingOptions` provides type hints for the optional configuration object passed to `Vue.use()`.","symbol":"VueLoadingOptions","correct":"import type { VueLoadingOptions } from 'vue-loading-template'"}],"quickstart":{"code":"<template>\n  <div>\n    <h2>Loading Example</h2>\n    <p>Using the 'bars' type with custom color and size.</p>\n    <vue-loading type=\"bars\" color=\"#d9544e\" :size=\"{ width: '50px', height: '50px' }\"></vue-loading>\n    <p>Another example with 'bubbles' type.</p>\n    <vue-loading type=\"bubbles\" color=\"#5ac1dd\"></vue-loading>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport { VueLoading } from 'vue-loading-template';\n\nexport default defineComponent({\n  name: 'App',\n  components: {\n    VueLoading,\n  },\n});\n</script>","lang":"typescript","description":"This example demonstrates how to import and use the `VueLoading` component directly within a Vue 2 component's template, applying different types, colors, and sizes."},"warnings":[{"fix":"For Vue 3 projects, consider using a modern, actively maintained loading library designed for Vue 3, such as `vue-loading-overlay` or `vue-loading-spinner`, or rewrite the component logic to be Vue 3 compatible. Do not attempt to force `vue-loading-template` into a Vue 3 application.","message":"This library is built exclusively for Vue 2. It is not compatible with Vue 3 due to fundamental changes in the Vue 3 API, including the `createApp` function and component registration process. Direct usage in a Vue 3 project will lead to runtime errors.","severity":"breaking","affected_versions":"<=1.3.2"},{"fix":"Evaluate the risk of using an unmaintained library. For new projects or those requiring active support, consider alternatives. For existing projects, be aware of potential issues and be prepared to fork or replace the library if problems arise.","message":"The package appears to be unmaintained or abandoned, with no significant updates or bug fixes in over 7 years. This means it may not receive security patches, performance improvements, or compatibility updates for newer browser versions or Vue 2 minor releases.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"If conflicts occur, import and register the `VueLoading` component locally in your `components` option, using a different name if necessary, instead of installing it globally.","message":"When installing as a global plugin using `Vue.use(VueLoading)`, the component is registered globally as `<vue-loading>`. Ensure there are no naming conflicts with other components or HTML tags.","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":"Ensure your Webpack or build configuration is set up to use the full build of Vue (e.g., by aliasing `vue` to `vue/dist/vue.esm.js` in Webpack) if you are not using Single File Components (`.vue` files) which pre-compile templates. This is less common in modern Vue CLI setups but can occur in custom configurations.","cause":"`vue-loading-template` (like many Vue 2 components) relies on a Vue build that includes the template compiler if you are using it with inline templates (e.g., in a string template in a `.js` file or directly in `index.html`).","error":"Error in main.js: \"[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available.\" or similar template compilation errors."},{"fix":"Verify that your project is indeed a Vue 2 project and that `Vue` is globally available or correctly imported as `import Vue from 'vue'`. If using Vue 3, this library is incompatible and you should seek a Vue 3-native alternative.","cause":"This error often occurs when attempting to use `Vue.use()` with a Vue 3 `createApp` instance or when `Vue` is not correctly imported or available globally.","error":"TypeError: Cannot read properties of undefined (reading 'use') at <App>"}],"ecosystem":"npm"}