vue3-skeleton-loader

Basic Usage

Using npm

npm install vue3-skeleton-loader

Using yarn

yarn add vue3-skeleton-loader

Using loader in your .vue file

import VueSkeletonLoader from 'vue3-skeleton-loader';

<VueSkeletonLoader type="image@2"></VueSkeletonLoader>

Introduction

Skeleton loader provides a simple solution to provide loading variables in your application.
It prepares the user for content while data is fetched from the server or loaded asynchronously.

Props

Skeleton

Examples

Custom animation

To set a custom animation for the VueSkeletonLoader, first, register the animation globally, then pass its name to the component using the animation prop.

Troubleshooting

Skeleton gets width 0 when parent display is flex

In the example below, the issue is demonstrated. To resolve it, you can either set the style flex:1 for VueSkeletonLoader or enclose the skeleton within a div element, as shown below:

<script setup lang="ts">
  import VueSkeletonLoader from 'vue3-skeleton-loader';
</script>
<template>
  <div class="container">
    <div class="avatar-container">
      <VueSkeletonLoader type="avatar"/>
      <div>
        <VueSkeletonLoader type="text" width="100px" height="10px"/>
        <VueSkeletonLoader type="text" width="70px" height="6px"/>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
  .container {
    max-width: 400px;
    margin: 30px auto;
    padding: 12px;
    border: 2px solid #0000001E;
    border-radius: 0.25rem;

    .avatar-container {
      display: flex;
      gap: 12px;
      align-items: center;
    }
  }

</style>

License

MIT