Minimal Skeleton Loading Screen Component – Vue3-Skeleton

Install & Download:

# NPM
$ npm install @brayamvalero/vue3-skeleton

Description:

Yet another skeleton loader component that displays a skeleton screen while content is loading in your app. Supports both dynamic data and static elements.

How to use it:

1. Install and import the Vue3-Skeleton plugin.

// globally
import { createApp } from 'vue'
import App from './App.vue'
import Skeleton from '@brayamvalero/vue3-skeleton'
import '@brayamvalero/vue3-skeleton/dist/style.css'
createApp(App)
  .use(Skeleton)
  .mount('#app')

// locally 
import { Skeleton } from '@brayamvalero/vue3-skeleton'
import '@brayamvalero/vue3-skeleton/dist/style.css'
export default {
  components: { Skeleton },
}

2. Add the <Skeleton /> component to your app.

<template>
  <div>
      <h1>
        <Skeleton>{{ data.title }}</Skeleton>
      </h1>
      <p>
        {{ data.description }}
      </p>
  </div>
</template>

3. Available component props.

rows: 1, // number of rows
enableAnimation: undefined,
inline: undefined, // inline mode

Preview: