vue3-skeleton-loader v0.2.0

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';
import 'vue3-skeleton-loader/dist/style.css';

<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';
  import 'vue3-skeleton-loader/dist/style.css';
</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