Registry / web-framework / vue-content-placeholders

vue-content-placeholders

library0.2.1jsnpmunverified

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.

web-framework

npm install vue-content-placeholders

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-CONTENT-PLACEH

vue-content-placeholders

web-frameworkjavascriptv0.2.1

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.

VueContentPlaceholders

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

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

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

ContentPlaceholders

✓  <content-placeholders>  </content-placeholders>

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

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.

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> ` });

Debug

Known issues

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

affects: >=0.2.1

gotchaThe 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';`

affects: >=0.2.1

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

affects: >=0.2.1

Errors

Common errors & fixes

[Vue warn]: Unknown custom element: <content-placeholders> - did you register the component correctly?

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.

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.

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

Upgrade

Version history

0.2.1latest on npm

Audit

Dependencies

vuerequiredRequired runtime peer dependency for all Vue plugins and components. This package specifically targets Vue 2.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/michalsnik/vue-content-placeholders ↗

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