Shimmer

Vue Guide

Learn how to use Shimmer From Structure with Vue 3.

Installation

npm install @shimmer-from-structure/vue

Basic Usage

Static Content

<script setup>
import { ref } from 'vue';
import { Shimmer } from '@shimmer-from-structure/vue';

const isLoading = ref(true);
</script>

<template>
  <Shimmer :loading="isLoading">
    <div class="card">
      <img src="avatar.jpg" class="avatar" />
      <h2>John Doe</h2>
      <p>Software Engineer</p>
    </div>
  </Shimmer>
</template>

Dynamic Content with templateProps

<script setup>
import { ref } from 'vue';
import { Shimmer } from '@shimmer-from-structure/vue';
import UserCard from './UserCard.vue';

const loading = ref(true);
const user = ref(null);

const userTemplate = {
  name: 'Loading...',
  role: 'Loading role...',
  avatar: 'placeholder.jpg',
};
</script>

<template>
  <Shimmer :loading="loading" :templateProps="{ user: userTemplate }">
    <UserCard :user="user || userTemplate" />
  </Shimmer>
</template>

Global Configuration

Use Vue's provide/inject pattern to set global defaults:

<!-- App.vue -->
<script setup>
import { provideShimmerConfig } from '@shimmer-from-structure/vue';

provideShimmerConfig({
  shimmerColor: 'rgba(56, 189, 248, 0.4)',
  backgroundColor: 'rgba(56, 189, 248, 0.1)',
  duration: 2.5,
  fallbackBorderRadius: 8,
});
</script>

<template>
  <router-view />
</template>

Accessing Config in Composables

import { useShimmerConfig } from '@shimmer-from-structure/vue';

const config = useShimmerConfig();
console.log(config.value.backgroundColor);

Examples

Dashboard with Multiple Sections

<script setup>
import { ref } from 'vue';
import { Shimmer } from '@shimmer-from-structure/vue';

// Independent loading states
const loadingUser = ref(true);
const loadingStats = ref(true);
const loadingOrders = ref(true);

// Mock data templates
const userTemplate = { name: 'Loading...', role: 'Loading...', avatar: '' };
const statsTemplate = [/* ... placeholders ... */];
const ordersTemplate = Array(5).fill({/* ... placeholders ... */});

// Simulate data loading
setTimeout(() => { loadingUser.value = false; }, 1000);
setTimeout(() => { loadingStats.value = false; }, 2000);
setTimeout(() => { loadingOrders.value = false; }, 3000);
</script>

<template>
  <div class="dashboard">
    <!-- User Profile with Template Props -->
    <Shimmer :loading="loadingUser" :templateProps="{ user: userTemplate }">
      <UserProfile :user="user || userTemplate" />
    </Shimmer>

    <!-- Stats Grid with Custom Color -->
    <Shimmer
      :loading="loadingStats"
      :templateProps="{ stats: statsTemplate }"
      shimmerColor="rgba(20, 184, 166, 0.2)"
    >
      <StatsGrid :stats="stats" />
    </Shimmer>

    <!-- Recent Orders Table -->
    <Shimmer :loading="loadingOrders" :templateProps="{ orders: ordersTemplate }">
      <OrdersTable :orders="orders" />
    </Shimmer>
  </div>
</template>

Next Steps