vue3-content-placeholders

This is a port of vue-content-placeholders for vue2 to vue3 from Michał Sajnóg repository

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

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

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:

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

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

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 file for license rights and limitations (MIT).