Vue Content Loading (Vue 2-era)

Common errors

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

  cause 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

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

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

Warnings

• breaking 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.
  Fix: For Vue 3 projects, use the `vue-content-loader` package (without the hyphen), which is the actively maintained Vue 3 compatible alternative.
• deprecated 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.
  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.
• gotcha 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.
  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.
• gotcha 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.
  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.

Install

• npm install vue-content-loading npm
• yarn add vue-content-loading yarn
• pnpm add vue-content-loading pnpm

Imports

• VueContentLoading
  wrong:

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

  correct:

  import VueContentLoading from '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
  wrong:

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

  correct:

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

  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.

Quickstart

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.

<!-- main.ts or main.js for global registration -->
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>