Registry / web-framework / vue-content-loading

vue-content-loading

library1.6.0jsnpmunverified

Vue Content Loading (version 1.6.0) is a component library designed for Vue 2 applications to create customizable SVG loading card placeholders, similar in style to Facebook's content loading animations. It allows developers to either use predefined presets or construct custom loading patterns using SVG elements. This package was last published in March 2019, indicating it is no longer actively maintained and is considered abandoned for modern Vue development. For Vue 3 compatibility and ongoing updates, developers should use the similarly named but distinct package `vue-content-loader` (without the hyphen), which is a separate, actively maintained project. This package primarily targets the Vue 2 ecosystem and does not officially support Vue 3, making it unsuitable for new projects built with Vue 3.

web-framework

npm install vue-content-loading

package ↗

INSTALL

IMPORT

SIG · VUE-CONTENT-LOADIN

vue-content-loading

web-frameworkjavascriptv1.6.0

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.

VueContentLoading

✓ import VueContentLoading from 'vue-content-loading';

✗ const VueContentLoading = require('vue-content-loading')

This is the primary default export for the main component, typically used for custom loading patterns. While CommonJS `require` might work in some older setups, ESM `import` is the standard for Vue components.

VclFacebook

✓ import { VclFacebook } from 'vue-content-loading';

✗ import VclFacebook from 'vue-content-loading/VclFacebook';

Commonly used for specific presets like the Facebook-style loader. Presets are usually named exports from the main package. Direct path imports for presets are generally incorrect.

VclCode

✓ import { VclCode } from 'vue-content-loading';

Another common named export for a preset, e.g., for a code block loading animation.

This quickstart demonstrates global registration of the main `VueContentLoading` component for custom patterns, and local import of a specific preset like `VclFacebook` in a Vue 2 Single File Component.

import Vue from 'vue'; import App from './App.vue'; import VueContentLoading from 'vue-content-loading'; Vue.component('VueContentLoading', VueContentLoading); new Vue({ render: h => h(App) }).$mount('#app'); // MyComponent.vue <template> <div class="card-container"> <h3>User Profile</h3> <VueContentLoading :width="400" :height="120"> <circle cx="30" cy="30" r="30" /> <rect x="75" y="13" rx="4" ry="4" width="250" height="15" /> <rect x="75" y="37" rx="4" ry="4" width="150" height="10" /> </VueContentLoading> <h3>Recent Posts</h3> <VclFacebook class="facebook-loader" /> </div> </template> <script lang="ts"> import Vue from 'vue'; import { VclFacebook } from 'vue-content-loading'; export default Vue.extend({ name: 'UserProfileLoader', components: { VclFacebook, // Only need to import named presets if not globally registered }, }); </script> <style> .card-container { border: 1px solid #eee; padding: 20px; border-radius: 8px; max-width: 450px; margin: 20px auto; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .facebook-loader { margin-top: 20px; } </style>

Debug

Known issues

breakingThis package is designed for Vue 2 and is not compatible with Vue 3. Attempting to use it in a Vue 3 project will likely result in runtime errors due to API changes.

fix

For Vue 3 projects, use the `vue-content-loader` package (without the hyphen), which is the actively maintained Vue 3 compatible alternative.

affects: >=1.0.0

deprecatedThe `vue-content-loading` package has not been updated since March 2019 and is considered abandoned. It may contain unpatched bugs or security vulnerabilities and will not receive new features or official support.

fix

Migrate to `vue-content-loader` for active maintenance, Vue 3 compatibility, and ongoing support. For Vue 2 projects, consider alternatives or accept the risks of using an abandoned library.

affects: >=1.6.0

gotchaThere is a similarly named but distinct package, `vue-content-loader` (without the hyphen), which is the actively maintained and Vue 3-compatible version. Ensure you are installing and importing the correct package for your project's Vue version.

fix

Always double-check the exact package name (`vue-content-loading` vs `vue-content-loader`) in your `package.json` and import statements. Use `vue-content-loader` for modern Vue applications.

affects: >=1.0.0

gotchaSVG-based content loaders, especially complex ones or those with many elements, can sometimes impact performance or accessibility if not implemented carefully. Ensure proper `aria` attributes for screen readers.

fix

Test performance on various devices and network conditions. For accessibility, ensure meaningful `aria-label` or `aria-labelledby` attributes are provided for the SVG to describe the loading state, especially if the visual content is critical.

affects: >=1.0.0

Errors

Common errors & fixes

[Vue warn]: Failed to resolve component: <VueContentLoading> (or <VclFacebook>)

The component was not properly registered with Vue, or the import path is incorrect.

fix

Ensure you either globally register the component (e.g., `Vue.component('VueContentLoading', VueContentLoading)`) or locally register it in the `components` option of your Vue component (e.g., `components: { VclFacebook }`). Verify the import path is `from 'vue-content-loading'`.

TypeError: Cannot read property 'install' of undefined

Attempting to use `Vue.use()` with a component that is not a Vue plugin (i.e., does not have an `install` method).

fix

This package exports components directly, not a plugin. Do not use `Vue.use(VueContentLoading)`. Instead, import and register the components directly, either globally or locally within your Vue components.

Error: `vue-content-loading` is not compatible with Vue 3.

Using `vue-content-loading` (hyphenated) in a Vue 3 project environment.

fix

This package is only for Vue 2. For Vue 3, use the `vue-content-loader` package (without the hyphen) instead. You will need to uninstall `vue-content-loading` and install `vue-content-loader`.

Upgrade

Version history

1.6.0latest on npm

Audit

Dependencies

vuerequiredRuntime dependency for the Vue component. Expected to be Vue 2.x given the package's last update.

Agent activity

11 hits · last 30 days

node

OpenAI (training)

Resources

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