Skip to content
On this page


A placeholder preview for content before the data gets loaded, an alternative for spinners.

We have implemented 3 types of placeholder. You can use any of them depending on your need.

Basic example

    <!-- Example One -->
    <CardSkeleton :count="3" />
    <!-- Example Two -->
    <TodoSkeleton :count="3" />
    <!-- Example Three -->
    <TableSkeleton :count="3" />
<script setup>
import CardSkeleton from '@/components/Skeleton/Project-grid.vue';
import TodoSkeleton from '@/components/Skeleton/Todo.vue';
import TableSkeleton from '@/components/Skeleton/Table.vue';

COPYRIGHT © 2022 Codeshaper, All rights reserved.