# @fred78290/vue3-content-placeholders

> Vue3 Components for rendering animated content placeholders like facebook

Latest version **1.0.1** (published 2023-10-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install @fred78290/vue3-content-placeholders
pnpm add @fred78290/vue3-content-placeholders
yarn add @fred78290/vue3-content-placeholders
bun add @fred78290/vue3-content-placeholders
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2023-10-13 |
| First published | 2023-10-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 17.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Orignal author: Michał Sajnóg |
| Maintainers | fred78290 |
| Keywords | vue, vuejs, plugin, loader, fake, placeholder, progressive, skeleton-ui |

## Links

- npm: https://www.npmjs.com/package/@fred78290/vue3-content-placeholders
- Repository: https://github.com/Fred78290/vue3-content-placeholders
- Homepage: https://github.com/Fred78290/vue3-content-placeholders#readme
- Issues: https://github.com/Fred78290/vue3-content-placeholders/issues
- npm.io page: https://npm.io/package/@fred78290/vue3-content-placeholders

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^3.3.4

## Alternatives

- [pagerjs](https://npm.io/package/pagerjs.md) — 60 weekly downloads
- [whistle.savefor-mock](https://npm.io/package/whistle.savefor-mock.md) — 4 weekly downloads
- [whistle.scene-mock](https://npm.io/package/whistle.scene-mock.md) — 0 weekly downloads
- [pipiads-mcp-server](https://npm.io/package/pipiads-mcp-server.md) — 0 weekly downloads
- [easy-mok](https://npm.io/package/easy-mok.md) — 0 weekly downloads

## Recent versions

- 1.0.1 (latest) — 2023-10-13
- 1.0.0 — 2023-10-10

## README

# vue3-content-placeholders

![npm](https://img.shields.io/npm/v/@fred78290%2fvue3-content-placeholders.svg)
[![vue3](https://img.shields.io/badge/vue-3.x-brightgreen.svg)](https://vuejs.org/)

This is a port of vue-content-placeholders for vue2 to vue3 from [Michał Sajnóg](http://github.com/michalsnik/vue-content-placeholders.git) repository

> Vue addon for rendering fake content while data is fetching to provide better UX and lower bounce rate.

![example](https://i.imgur.com/JQlFjsS.gif)

---

## :cd: Installation

* via npm: `npm install @fred78290/vue3-content-placeholders --save`
* via yarn: `yarn add @fred78290/vue3-content-placeholders`

## :rocket: Usage

Include plugin in your `main.js` file.

```javascript
import {createApp} from 'vue'
import VueContentPlaceholders from '@fred78290/vue3-content-placeholders'
import '@fred78290/vue3-content-placeholders/style.css'

const app = createApp(...)

...

app.use(VueContentPlaceholders)

```

### Examples:

```html
<content-placeholders>
  <content-placeholders-heading :img="true" />
  <content-placeholders-text :lines="3" />
</content-placeholders>
```

![rendered example](https://i.imgur.com/LWfqxUe.png)

```html
<content-placeholders :rounded="true">
  <content-placeholders-img />
  <content-placeholders-heading />
</content-placeholders>
```

![rendered example](https://i.imgur.com/NBb6ZB7.png)

### Available components and properties

* root `<content-placeholders>`
  * Boolean `animated` (default: true)
  * Boolean `rounded` (default: false) - border radius
  * Boolean `centered` (default: false)
  > these properties define how all children components will act

* `<content-placeholders-heading />`
  * Boolean `img` (default: false)

* `<content-placeholders-text />`
  * Number `lines` (default: 4)

* `<content-placeholders-img />`

---

## 🔓 License

See the [LICENSE](LICENSE.md) file for license rights and limitations (MIT).

---
_Source: https://npm.io/package/@fred78290/vue3-content-placeholders · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._