Registry / web-framework / vue-loading-template

vue-loading-template

library1.3.2jsnpmunverified

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.

web-framework

npm install vue-loading-template

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-LOADING-TEMPLA

vue-loading-template

web-frameworkjavascriptv1.3.2

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.

VueLoading

✓ import { VueLoading } from 'vue-loading-template'

✗ import VueLoading from 'vue-loading-template'

When importing the component for local registration, use a named import. The default import is for plugin installation.

VueLoading

✓ import VueLoading from 'vue-loading-template'; Vue.use(VueLoading);

✗ import { VueLoading } from 'vue-loading-template'; Vue.use(VueLoading);

When installing as a global Vue plugin via `Vue.use()`, the package exports the plugin as a default export.

VueLoadingOptions

✓ import type { VueLoadingOptions } from 'vue-loading-template'

For TypeScript users, `VueLoadingOptions` provides type hints for the optional configuration object passed to `Vue.use()`.

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.

<template> <div> <h2>Loading Example</h2> <p>Using the 'bars' type with custom color and size.</p> <vue-loading type="bars" color="#d9544e" :size="{ width: '50px', height: '50px' }"></vue-loading> <p>Another example with 'bubbles' type.</p> <vue-loading type="bubbles" color="#5ac1dd"></vue-loading> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { VueLoading } from 'vue-loading-template'; export default defineComponent({ name: 'App', components: { VueLoading, }, }); </script>

Debug

Known issues

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

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.

affects: <=1.3.2

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

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.

affects: >=1.0.0

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

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.

affects: >=1.0.0

Errors

Common errors & fixes

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.

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

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.

TypeError: Cannot read properties of undefined (reading 'use') at <App>

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.

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.

Upgrade

Version history

1.3.2latest on npm

Audit

Dependencies

vuerequiredPeer dependency for Vue 2 applications, as the library is built for Vue 2 ecosystem.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/jkchao/vue-loading ↗

packagehttps://www.npmjs.com/package/vue-loading-template ↗