Content Placeholders for Vue 2

0.2.1 · abandoned · verified Sun Apr 19

This package, `vue-content-placeholders`, offers Vue 2 components for generating animated content placeholders, often referred to as "skeleton UI," similar to those seen on platforms like Facebook. It aims to improve user experience during data fetching by providing visual feedback and reducing perceived loading times. The current stable version, 0.2.1, was released in November 2017 and targets Vue 2 applications. Due to its age and lack of updates, it is considered abandoned and not compatible with Vue 3 without significant modifications or using a separate, Vue 3-specific fork. Its primary differentiation was providing a straightforward, component-based API for common placeholder patterns and being one of the early solutions for this UX pattern in the Vue 2 ecosystem.

Common errors

```
[Vue warn]: Unknown custom element: <content-placeholders> - did you register the component correctly?
```
cause The `Vue.use(VueContentPlaceholders)` plugin installation was skipped or failed, or the Vue instance is not correctly mounted.

fix Ensure `import VueContentPlaceholders from 'vue-content-placeholders'; Vue.use(VueContentPlaceholders);` is called before your Vue instance is created. Also, verify that your root Vue instance (`new Vue(...)`) is correctly defined and mounted.
```
Failed to compile. Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type.
```
cause Your bundler (e.g., Webpack) is not configured to process CSS files when `vue-content-placeholders` tries to import its styles.

fix Add or verify `css-loader` and `vue-style-loader` (or similar) in your webpack configuration for `.css` files, ensuring it's applied correctly to your Vue project. For example, in webpack, ensure rules for `test: /\.css$/` exist.
```
TypeError: Cannot read properties of undefined (reading 'config') or similar Vue 3 related errors.
```
cause Attempting to use `vue-content-placeholders` (designed for Vue 2) in a Vue 3 project.

fix This package is incompatible with Vue 3. Migrate to a Vue 3-compatible library for content placeholders, such as `vue3-content-placeholders` or `vue-content-loader`.

Warnings

breaking This package is designed for Vue 2 and is not compatible with Vue 3. Using it directly in a Vue 3 project will result in errors related to the Vue API.
Fix: For Vue 3 projects, consider using a modern alternative like `vue3-content-placeholders` (a separate package) or `vue-content-loader`.
gotcha The package includes a CSS file that is imported during usage. If your bundler (e.g., Webpack, Parcel) is not configured to handle CSS imports, the styles for the placeholders will not be applied.
Fix: Ensure your project's build configuration includes appropriate loaders (e.g., `css-loader`, `vue-style-loader` for Webpack) to process and embed CSS files. You might need to explicitly import the CSS file in your main entry point: `import 'vue-content-placeholders/dist/vue-content-placeholders.css';`
deprecated The `vue-content-placeholders` package has not been updated since November 2017 and is considered abandoned. There are no ongoing updates, bug fixes, or security patches.
Fix: While it may still function in existing Vue 2 projects, it's recommended to evaluate more actively maintained alternatives or be aware of the lack of support. For new projects, especially Vue 3, choose a different solution.

Install

npm install vue-content-placeholders npm
yarn add vue-content-placeholders yarn
pnpm add vue-content-placeholders pnpm

Imports

VueContentPlaceholders

wrong:

import { VueContentPlaceholders } from 'vue-content-placeholders'; // This package exports as a default.

correct:

import VueContentPlaceholders from 'vue-content-placeholders';

This is the default export used for global plugin registration via `Vue.use()`.

ContentPlaceholders

wrong:

import { ContentPlaceholders } from 'vue-content-placeholders'; // Components are globally registered by the plugin, not imported individually.

correct:

<!-- Usage in template after Vue.use() -->
<content-placeholders>
  <!-- ... child components ... -->
</content-placeholders>

The root component `<content-placeholders>` and its children are globally registered when the plugin is installed with `Vue.use()`.

CSS styles
```
import 'vue-content-placeholders/dist/vue-content-placeholders.css'; // Explicitly import the CSS if not automatically handled by bundler
```
The package includes a CSS file that needs to be processed by your bundler. Some setups might require explicit CSS imports or specific webpack/Vite configurations to embed the styles.

Quickstart

This quickstart demonstrates installing the `vue-content-placeholders` plugin globally and then using its components in a Vue 2 application to display animated content placeholders while data is simulated to be loading.

import Vue from 'vue';
import VueContentPlaceholders from 'vue-content-placeholders';

Vue.use(VueContentPlaceholders);

new Vue({
  el: '#app',
  data: () => ({ loading: true }),
  mounted() {
    setTimeout(() => {
      this.loading = false;
    }, 2000);
  },
  template: `
    <div id="app">
      <div v-if="loading">
        <content-placeholders :rounded="true">
          <content-placeholders-img />
          <content-placeholders-heading />
          <content-placeholders-text :lines="3" />
        </content-placeholders>
      </div>
      <div v-else>
        <h1>Content Loaded!</h1>
        <p>This is the actual content displayed after loading.</p>
      </div>
    </div>
  `
});

view raw JSON →