Usage

For Gueleton to work properly, you must pass the following three parameters:

1. data-key: A unique string key to identify the data source
2. data: The data source object
3. loading: A boolean value indicating whether to show the skeleton screen

Additionally, Gueleton provides a scoped variable named data in the default slot, representing pre-stored data or the original data. You need to use this variable to render your content, like this:

Basic.vue

<template>
  <Gueleton
    :data-key="dataKey"
    :data="data"
    :loading="loading"
    v-slot="{ data }"
  >
    <div class="flex flex-col gap-4 p-4 bg-(--color-red-50)">
      <TweetCard v-for="(item, index) in data" :key="index" v-bind="item" />
    </div>
  </Gueleton>
</template>

When the page is first rendered, the remotely fetched data and data-key will be stored in the .gueleton/index.json file.

In subsequent page loads, Gueleton will prioritize using the pre-stored data from .gueleton/index.json to render the default slot content, then generate skeleton screens based on DOM elements.

Online Basic Example

Recommended Reading: How Gueleton Works

Optional Parameters

In addition to the three required parameters above, all global options mentioned in the installation section can also be used in components.

Here’s a complete example:

Full.vue

<template>
  <Gueleton
    :data="data"
    :data-key="dataKey"
    :loading="loading"
    :limit="limit"
    :fuzzy="fuzzy"
    :type="type"
    :bone="bone"
    :container="container"
    v-slot="{ data }"
  >
    <div class="flex flex-col gap-4 p-4 bg-(--color-red-50)">
      <TweetCard v-for="(item, index) in data" :key="index" v-bind="item" />
    </div>
  </Gueleton>
</template>

Online Full Example