{"id":15903,"library":"vue-content-loading","title":"Vue Content Loading (Vue 2-era)","description":"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.","status":"abandoned","version":"1.6.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","ui","ux","svg","vue","card","cards","vuejs","loading"],"install":[{"cmd":"npm install vue-content-loading","lang":"bash","label":"npm"},{"cmd":"yarn add vue-content-loading","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-content-loading","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency for the Vue component. Expected to be Vue 2.x given the package's last update.","package":"vue","optional":false}],"imports":[{"note":"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.","wrong":"const VueContentLoading = require('vue-content-loading')","symbol":"VueContentLoading","correct":"import VueContentLoading from 'vue-content-loading';"},{"note":"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.","wrong":"import VclFacebook from 'vue-content-loading/VclFacebook';","symbol":"VclFacebook","correct":"import { VclFacebook } from 'vue-content-loading';"},{"note":"Another common named export for a preset, e.g., for a code block loading animation.","symbol":"VclCode","correct":"import { VclCode } from 'vue-content-loading';"}],"quickstart":{"code":"\nimport Vue from 'vue';\nimport App from './App.vue';\nimport VueContentLoading from 'vue-content-loading';\n\nVue.component('VueContentLoading', VueContentLoading);\n\nnew Vue({\n render: h => h(App)\n}).$mount('#app');\n\n// MyComponent.vue\n\n\n\n\n","lang":"typescript","description":"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."},"warnings":[{"fix":"For Vue 3 projects, use the `vue-content-loader` package (without the hyphen), which is the actively maintained Vue 3 compatible alternative.","message":"This 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.","severity":"breaking","affected_versions":">=1.0.0"},{"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.","message":"The `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.","severity":"deprecated","affected_versions":">=1.6.0"},{"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.","message":"There 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"SVG-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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"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'`.","cause":"The component was not properly registered with Vue, or the import path is incorrect.","error":"[Vue warn]: Failed to resolve component: (or )"},{"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.","cause":"Attempting to use `Vue.use()` with a component that is not a Vue plugin (i.e., does not have an `install` method).","error":"TypeError: Cannot read property 'install' of undefined"},{"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`.","cause":"Using `vue-content-loading` (hyphenated) in a Vue 3 project environment.","error":"Error: `vue-content-loading` is not compatible with Vue 3."}],"ecosystem":"npm"}