{"id":12441,"library":"vue-content-placeholders","title":"Content Placeholders for Vue 2","description":"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.","status":"abandoned","version":"0.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/michalsnik/vue-content-placeholders","tags":["javascript","vue","vuejs","plugin","loader","fake","placeholder","progressive","skeleton-ui"],"install":[{"cmd":"npm install vue-content-placeholders","lang":"bash","label":"npm"},{"cmd":"yarn add vue-content-placeholders","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-content-placeholders","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required runtime peer dependency for all Vue plugins and components. This package specifically targets Vue 2.","package":"vue","optional":false}],"imports":[{"note":"This is the default export used for global plugin registration via `Vue.use()`.","wrong":"import { VueContentPlaceholders } from 'vue-content-placeholders'; // This package exports as a default.","symbol":"VueContentPlaceholders","correct":"import VueContentPlaceholders from 'vue-content-placeholders';"},{"note":"The root component `<content-placeholders>` and its children are globally registered when the plugin is installed with `Vue.use()`.","wrong":"import { ContentPlaceholders } from 'vue-content-placeholders'; // Components are globally registered by the plugin, not imported individually.","symbol":"ContentPlaceholders","correct":"<!-- Usage in template after Vue.use() -->\n<content-placeholders>\n  <!-- ... child components ... -->\n</content-placeholders>"},{"note":"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.","symbol":"CSS styles","correct":"import 'vue-content-placeholders/dist/vue-content-placeholders.css'; // Explicitly import the CSS if not automatically handled by bundler"}],"quickstart":{"code":"import Vue from 'vue';\nimport VueContentPlaceholders from 'vue-content-placeholders';\n\nVue.use(VueContentPlaceholders);\n\nnew Vue({\n  el: '#app',\n  data: () => ({ loading: true }),\n  mounted() {\n    setTimeout(() => {\n      this.loading = false;\n    }, 2000);\n  },\n  template: `\n    <div id=\"app\">\n      <div v-if=\"loading\">\n        <content-placeholders :rounded=\"true\">\n          <content-placeholders-img />\n          <content-placeholders-heading />\n          <content-placeholders-text :lines=\"3\" />\n        </content-placeholders>\n      </div>\n      <div v-else>\n        <h1>Content Loaded!</h1>\n        <p>This is the actual content displayed after loading.</p>\n      </div>\n    </div>\n  `\n});","lang":"javascript","description":"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."},"warnings":[{"fix":"For Vue 3 projects, consider using a modern alternative like `vue3-content-placeholders` (a separate package) or `vue-content-loader`.","message":"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.","severity":"breaking","affected_versions":">=0.2.1"},{"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';`","message":"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.","severity":"gotcha","affected_versions":">=0.2.1"},{"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.","message":"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.","severity":"deprecated","affected_versions":">=0.2.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"The `Vue.use(VueContentPlaceholders)` plugin installation was skipped or failed, or the Vue instance is not correctly mounted.","error":"[Vue warn]: Unknown custom element: <content-placeholders> - did you register the component correctly?"},{"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.","cause":"Your bundler (e.g., Webpack) is not configured to process CSS files when `vue-content-placeholders` tries to import its styles.","error":"Failed to compile. Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type."},{"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`.","cause":"Attempting to use `vue-content-placeholders` (designed for Vue 2) in a Vue 3 project.","error":"TypeError: Cannot read properties of undefined (reading 'config') or similar Vue 3 related errors."}],"ecosystem":"npm"}