Vue3 Infinite Loading

https://vue3-infinite-loading.vercel.app/guide/
Admin
Vue3 Infinite Loading is a Vue 3 component library that provides infinite scroll functionality for...
Tokens:6,597
Snippets:21
Trust Score:7.8
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Vue3 Infinite Loading via NPM

Source: https://vue3-infinite-loading.vercel.app/guide/README

Installs the Vue3 Infinite Loading package using NPM. This is the recommended method for larger applications.

```bash
npm install @codog/vue3-infinite-loading
```

--------------------------------

### Import Vue3 Infinite Loading as a Component

Source: https://vue3-infinite-loading.vercel.app/guide/README

Demonstrates how to import and use the Vue3 Infinite Loading component within a Vue template and script setup.

```vue
<template>
  <infinite-loading></infinite-loading>
</template>

<script setup>
import InfiniteLoading from '@codog/vue3-infinite-loading'
</script>
```

--------------------------------

### Register Vue3 Infinite Loading as a Plugin

Source: https://vue3-infinite-loading.vercel.app/guide/README

Shows how to register the Infinite Loading component as a global plugin using Vue's `use` API. This allows for default option configuration.

```javascript
// main.js or index.js
import InfiniteLoading from '@codog/vue3-infinite-loading'

Vue.use(InfiniteLoading, { /* options */ });
```

--------------------------------

### Vue 3 Template for Infinite Loading

Source: https://vue3-infinite-loading.vercel.app/guide/start-with-hn

This HTML template sets up the structure for infinite scrolling in a Vue 3 application. It includes a header, a loop to display items, and the InfiniteLoading component which listens for the 'infinite' event.

```html
<header>
  <!-- Hacker News header -->
</header>

<div v-for="(item, $index) in list" :key="$index">
  <!-- Hacker News item loop -->
</div>

<infinite-loading @infinite="infiniteHandler"></infinite-loading>
```

--------------------------------

### Vue 3 Infinite Loading with Hacker News API

Source: https://vue3-infinite-loading.vercel.app/guide/start-with-hn

This snippet demonstrates fetching data from the Hacker News API using Axios in a Vue 3 application. It implements infinite scrolling by appending new data as the user scrolls down. The `infiniteHandler` function is responsible for making API requests and updating the component's state.

```vue
<template>
  <header class="hacker-news-header">
    <a target="_blank" href="http://www.ycombinator.com/">
      <img src="https://news.ycombinator.com/y18.svg">
    </a>
    <span>Hacker News</span>
  </header>
  <div class="container">
    <div
      class="hacker-news-item"
      v-for="(item, $index) in list"
      :key="$index"
      :data-num="$index + 1">
      <a target="_blank" :href="item.url" v-text="item.title"></a>
      <p>
        <span v-text="item.points"></span>
        points by
        <a
          target="_blank"
          :href="`https://news.ycombinator.com/user?id=${item.author}`"
          v-text="item.author"></a>
        |
        <a
          target="_blank"
          :href="`https://news.ycombinator.com/item?id=${item.objectID}`"
          v-text="`${item.num_comments} comments`"></a>
      </p>
    </div>
    <infinite-loading @infinite="infiniteHandler"></infinite-loading>
  </div>
</template>


<script setup>
import { ref } from 'vue'
import axios from 'axios'
// import InfiniteLoading from '@'
import InfiniteLoading from '../../lib'

const page = ref(0)
const list = ref([])
const api = '//hn.algolia.com/api/v1/search_by_date?tags=story';

const infiniteHandler = ($state) => {
  axios.get(api, {
    params: {
      page: page.value,
    },
  }).then(({ data }) => {
    if (data.hits.length) {
      page.value += 1;
      list.value.push(...data.hits);
      $state.loaded();
    } else {
      $state.complete();
    }
  });
}
</script>

<style lang="scss" scoped>

.hacker-news-header {
  /* position: fixed; */
  top: 0;
  left: 0;
  right: 0;
  padding: 4px 20px;
  line-height: 14px;
  background-color: #FF6600;

  img {
    display: inline;
    border: 1px solid #fff;
    vertical-align: middle;
  }

  span {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
    vertical-align: middle;
  }
}

.container {
  max-height: 400px;
  overflow: auto;
}

.hacker-news-item {
  $gap: 40px;

  margin: 10px 0;
  padding: 0 10px 0 $gap;
  line-height: 16px;
  font-size: 14px;

  &::before {
    content: attr(data-num) '.';
    float: left;
    margin-left: -$gap;
    width: $gap - 8px;
    color: #888;
    text-align: right;
  }

  > a {
    color: #333;
    text-decoration: none;

    &:hover {
      color: #000;
    }
  }

  p {
    margin: 0;
    font-size: 12px;

    &,
    a {
      color: #888;
    }

    a:not(:hover) {
      text-decoration: none;
    }
  }
}
</style>
```

--------------------------------

### Top Direction Scroll Setup in Vue Template

Source: https://vue3-infinite-loading.vercel.app/guide/top-dir-scroll

This snippet shows how to integrate the infinite-loading component at the top of a list for top-direction scrolling. It sets the `direction` attribute to 'top' and listens for the `@infinite` event to trigger data loading.

```html
<header>
  <!-- Hacker News header -->
</header>

<infinite-loading direction="top" @infinite="infiniteHandler"></infinite-loading>

<div v-for="(item, $index) in list" :key="$index">
  <!-- Hacker News item loop -->
</div>
```

--------------------------------

### Vue 3 Infinite Loading Handler Logic (JavaScript)

Source: https://vue3-infinite-loading.vercel.app/guide/start-with-hn

This JavaScript code provides the core logic for the infinite scrolling handler in Vue 3. It uses axios to fetch data from the Hacker News API, updates the component's data with new items, and signals the InfiniteLoading component when data is loaded or when all data has been fetched.

```javascript
import axios from 'axios';

const api = '//hn.algolia.com/api/v1/search_by_date?tags=story';

export default {
  data() {
    return {
      page: 1,
      list: [],
    };
  },
  methods: {
    infiniteHandler($state) {
      axios.get(api, {
        params: {
          page: this.page,
        },
      }).then(({ data }) => {
        if (data.hits.length) {
          this.page += 1;
          this.list.push(...data.hits);
          $state.loaded();
        } else {
          $state.complete();
        }
      });
    },
  },
};
```

--------------------------------

### Vue 3 Infinite Loading Component with Spinner and State Management

Source: https://vue3-infinite-loading.vercel.app/guide/configure-load-msg

This Vue 3 component utilizes the `infinite-loading` component to showcase various spinner types and manage loading states. It includes template code for UI elements and script setup for logic, using Vue's reactivity system and refs. The `infiniteHandler` function simulates data fetching and state updates, while `changeType` and `changeSpinner` functions control the component's behavior and appearance.

```vue
<template>
  <div class="tab">
    <a
      href="javascript:;"
      @click="changeType('spinners')"
      :class="{ active: type === 'spinners' }">
      spinners
    </a>
    <a
      href="javascript:;"
      @click="changeType('no-more')"
      :class="{ active: type === 'no-more' }">
      no-more
    </a>
    <a
      href="javascript:;"
      @click="changeType('no-results')"
      :class="{ active: type === 'no-results' }">
      no-results
    </a>
    <a
      href="javascript:;"
      @click="changeType('error')"
      :class="{ active: type === 'error' }">
      error
    </a>
  </div>
  <infinite-loading :spinner="spinner" @infinite="infiniteHandler" ref="infiniteLoadingRef"></infinite-loading>
  <div class="spinner-types" v-show="type === 'spinners'">
    <h3>Built-in spinner types:</h3>
    <button @click="changeSpinner('default')" :class="{ active: spinner === 'default' }">default</button>
    <button @click="changeSpinner('spiral')" :class="{ active: spinner === 'spiral' }">spiral</button>
    <button @click="changeSpinner('circles')" :class="{ active: spinner === 'circles' }">circles</button>
    <button @click="changeSpinner('bubbles')" :class="{ active: spinner === 'bubbles' }">bubbles</button>
    <button @click="changeSpinner('waveDots')" :class="{ active: spinner === 'waveDots' }">waveDots</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import InfiniteLoading from '../../lib'

const type = ref('spinners')
const spinner = ref('default')
const infiniteLoadingRef = ref(null)

const infiniteHandler = ($state) => {
  if (type.value === 'error') {
   	setTimeout(() => {
      $state.error();
    }, 1000);
  }
}
const changeType = (v) => {
  const stateChanger = infiniteLoadingRef.value.stateChanger

 	type.value = v;

  switch (v) {
    case 'spinners':
     	stateChanger.reset();
      break;

    case 'no-more':
      stateChanger.reset();
      setTimeout(() => {
        stateChanger.loaded();
        stateChanger.complete();
      }, 1);
      break;

    case 'no-results':
      stateChanger.reset();
      setTimeout(() => {
        stateChanger.complete();
      }, 1);
      break;

    case 'error':
      stateChanger.error();
      break;

    default:
  }
}
const changeSpinner = (v) => {
 	spinner.value = v;
}

</script>

<style lang="scss" scoped>
.tab {
  display: flex;
  margin-bottom: 20px;
  font-size: 14px;
  background-color: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);

  a {
    flex: 1;
    display: block;
    padding: 0 5px;
    color: #666;
    line-height: 40px;
    text-align: center;
    text-decoration: none;

    &.active {
      color: #4777a5;
      box-shadow: 0 -3px 0 0 #4777a5 inset;
    }
  }
}

.spinner-types {
  /* position: absolute; */
  top: 150px;
  left: 0;
  right: 0;
  padding: 0 12px;

  h3 {
    margin: 0 0 5px 4px;
    font-size: 16px;
    color: #666;
  }

  button {
    margin: 8px 4px;
    min-width: 88px;
    padding: 8px 14px;
    color: #fff;
    font-size: 14px;
    background: linear-gradient(30deg, #3f5b77, #51779b);
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    outline: none;
    transition: 0.2s all;
    overflow: hidden;

    &,
    &:active {
      box-shadow: 0 12px 30px -10px rgba(28, 90, 160, 0.5);
    }

    &:not(:active):not(.active):hover {
      transform: translateY(-1px);
      box-shadow: 0 13px 30px -10px rgba(28, 90, 160, 0.5);
    }

    &.active {
      position: relative;

      &::before {
        content: '\2714';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 0;
        height: 0;
        color: #51779b;
        font-size: 12px;
        line-height: 10px;
        border: 12px solid transparent;
        border-right-color: #fff;
        border-bottom-color: #fff;
      }
    }
  }
}
</style>
```

--------------------------------

### Configure Default Props and System Settings for Vue3 Infinite Loading

Source: https://vue3-infinite-loading.vercel.app/guide/configure-plugin-opts

Configure default spinner and system settings like throttleLimit for all InfiniteLoading components. This uses the Vue.use method with an options object containing 'props' and 'system' fields.

```javascript
import Vue from 'vue';
import InfiniteLoading from '@codog/vue3-infinite-loading';

Vue.use(InfiniteLoading, {
  props: {
    spinner: 'default',
    /* other props need to configure */
  },
  system: {
    throttleLimit: 50,
    /* other settings need to configure */
  },
});
```

--------------------------------

### Data Fetching for Top Direction Scroll (JavaScript)

Source: https://vue3-infinite-loading.vercel.app/guide/top-dir-scroll

This JavaScript code demonstrates fetching data for top-direction infinite scrolling. It uses Axios to make API requests, reverses the fetched data, and prepends it to the list using `unshift`. It manages pagination and signals the loading state.

```javascript
import axios from 'axios';

const api = '//hn.algolia.com/api/v1/search_by_date?tags=story';

export default {
  data() {
    return {
      page: 1,
      list: [],
    };
  },
  methods: {
    infiniteHandler($state) {
      axios.get(api, {
        params: {
          page: this.page,
        },
      }).then(({ data }) => {
        if (data.hits.length) {
          this.page += 1;
          this.list.unshift(...data.hits.reverse());
          $state.loaded();
        } else {
          $state.complete();
        }
      });
    },
  },
};
```

--------------------------------

### Configure spinner via prop

Source: https://vue3-infinite-loading.vercel.app/guide/configure-load-msg

Set the spinner type using the 'spinner' prop. Only built-in spinner types are supported.

```html
<infinite-loading spinner="spiral"></infinite-loading>
```

--------------------------------

### Global slot configuration via plugin API

Source: https://vue3-infinite-loading.vercel.app/guide/configure-load-msg

Configure slots globally using the plugin API. Pass strings for default messages, components for custom content, or objects to control styles and hiding.

```js
import Vue from 'vue';
import InfiniteLoading from '@codog/vue3-infinite-loading';
import InfiniteError from 'path/to/your/components/InfiniteError';

Vue.use(InfiniteLoading, {
  slots: {
    // keep default styles
    noResults: 'No results message',

    // remove default styles
    noMore: InfiniteError,

    // hide slot
    error: {
      render: h => h('div'),
    },
  },
});
```

--------------------------------

### Manage slot styles and visibility

Source: https://vue3-infinite-loading.vercel.app/guide/configure-load-msg

Control default styles and visibility of slots. Wrap content in a template tag to retain default styles, use an empty non-template element to hide a slot, or use a non-template element to remove default styles.

```html
<infinite-loading>
  <!-- The no-more message will has default styles -->
  <template v-slot:no-more>No more message</template>
</infinite-loading>
```

```html
<infinite-loading>
  <!-- The no-more slot will not be displayed -->
  <span v-slot:no-more></span>
</infinite-loading>
```

```html
<infinite-loading>
  <!-- The no-more message will has no default styles -->
  <div v-slot:no-more>No more message</div>
</infinite-loading>
```

--------------------------------

### Vue 3 Infinite Loading for Hacker News

Source: https://vue3-infinite-loading.vercel.app/guide/use-with-filter-or-tabs

This snippet displays a Hacker News feed with infinite scrolling. It fetches data from the Algolia Hacker News API, allowing users to switch between different news types. The `vue3-infinite-loading` component handles the loading of more items as the user scrolls down. It depends on Vue 3, Axios, and the `vue3-infinite-loading` library.

```vue
<template>
  <header class="hacker-news-header">
    <a target="_blank" href="http://www.ycombinator.com/">
      <img src="https://news.ycombinator.com/y18.svg">
    </a>
    <span>Hacker News</span>
    <select v-model="newsType" @change="changeType()">
      <option value="story">Story</option>
      <option value="poll">Poll</option>
      <option value="show_hn">Show hn</option>
      <option value="ask_hn">Ask hn</option>
      <option value="front_page">Front page</option>
    </select>
  </header>
  <div class="container">
    <div
      class="hacker-news-item"
      v-for="(item, $index) in list"
      :key="$index"
      :data-num="$index + 1">
      <a target="_blank" :href="item.url" v-text="item.title"></a>
      <p>
        <span v-text="item.points"></span>
        points by
        <a
          target="_blank"
          :href="`https://news.ycombinator.com/user?id=${item.author}`"
          v-text="item.author"></a>
        |
        <a
          target="_blank"
          :href="`https://news.ycombinator.com/item?id=${item.objectID}`"
          v-text="`${item.num_comments} comments`"></a>
      </p>
    </div>
    <infinite-loading :identifier="infiniteId" @infinite="infiniteHandler"></infinite-loading>
  </div>
</template>


<script setup>
import { ref } from 'vue'
import axios from 'axios'
// import InfiniteLoading from '@'
import InfiniteLoading from '../../lib'

const page = ref(0)
const list = ref([])
const api = '//hn.algolia.com/api/v1/search_by_date?tags=story';
const newsType = ref('story')
const infiniteId = ref(new Date())

const infiniteHandler = ($state) => {
  axios.get(api, {
    params: {
      page: page.value,
    },
  }).then(({ data }) => {
    if (data.hits.length) {
      page.value += 1;
      list.value.push(...data.hits);
      $state.loaded();
    } else {
      $state.complete();
    }
  });
}

const changeType = () => {
  page.value = 1
  list.value = []
  infiniteId.value += 1
}
</script>

<style lang="scss" scoped>
.hacker-news-header {
  /* position: fixed; */
  top: 0;
  left: 0;
  right: 0;
  padding: 4px 20px;
  line-height: 14px;
  background-color: #FF6600;

  img {
    display: inline;
    border: 1px solid #fff;
    vertical-align: middle;
  }

  span {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
    vertical-align: middle;
  }

  select {
    float: right;
    color: #fff;
    background-color: transparent;
    border: 1px solid #fff;
    outline: none;
  }
}

.container {
  max-height: 400px;
  overflow: auto;
}

.hacker-news-item {
  $gap: 40px;

  margin: 10px 0;
  padding: 0 10px 0 $gap;
  line-height: 16px;
  font-size: 14px;

  &::before {
    content: attr(data-num) '.';
    float: left;
    margin-left: -$gap;
    width: $gap - 8px;
    color: #888;
    text-align: right;
  }

  > a {
    color: #333;
    text-decoration: none;

    &:hover {
      color: #000;
    }
  }

  p {
    margin: 0;
    font-size: 12px;

    &,
    a {
      color: #888;
    }

    a:not(:hover) {
      text-decoration: none;
    }
  }
}
</style>
```

--------------------------------

### Vue 3 Infinite Loading Component

Source: https://vue3-infinite-loading.vercel.app/guide/top-dir-scroll

This Vue 3 component utilizes the `infinite-loading` library to fetch and display Hacker News articles. It makes API calls using Axios, manages the list of articles with Vue's ref, and implements an infinite scroll handler. The component also includes styling for the header and news items.

```html
<template>
  <header class="hacker-news-header">
    <a target="_blank" href="http://www.ycombinator.com/">
      <img src="https://news.ycombinator.com/y18.svg">
    </a>
    <span>Hacker News</span>
  </header>

  <div class="container">
    <infinite-loading direction="top" @infinite="infiniteHandler"></infinite-loading>
    <div
      class="hacker-news-item"
      v-for="(item, $index) in list"
      :key="$index"
      :data-num="list.length - $index">
      <a target="_blank" :href="item.url" v-text="item.title"></a>
      <p>
        <span v-text="item.points"></span>
        points by
        <a
          target="_blank"
          :href="`https://news.ycombinator.com/user?id=${item.author}`"
          v-text="item.author"></a>
        |
        <a
          target="_blank"
          :href="`https://news.ycombinator.com/item?id=${item.objectID}`"
          v-text="`${item.num_comments} comments`"></a>
      </p>
    </div>
  </div>
</template>


<script setup>
import { ref } from 'vue'
import axios from 'axios'
// import InfiniteLoading from '@'
import InfiniteLoading from '../../lib'

const page = ref(0)
const list = ref([])
const api = '//hn.algolia.com/api/v1/search_by_date?tags=story';

const infiniteHandler = ($state) => {
  axios.get(api, {
    params: {
      page: page.value,
    },
  }).then(({ data }) => {
    if (data.hits.length) {
      page.value += 1;
      list.value.unshift(...data.hits.reverse());
      $state.loaded();
    } else {
      $state.complete();
    }
  });
}
</script>

<style lang="scss" scoped>

.hacker-news-header {
  /* position: fixed; */
  top: 0;
  left: 0;
  right: 0;
  padding: 4px 20px;
  line-height: 14px;
  background-color: #FF6600;

  img {
    display: inline;
    border: 1px solid #fff;
    vertical-align: middle;
  }

  span {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
    vertical-align: middle;
  }
}

.container {
  max-height: 400px;
  overflow: auto;
}

.hacker-news-item {
  $gap: 40px;

  margin: 10px 0;
  padding: 0 10px 0 $gap;
  line-height: 16px;
  font-size: 14px;

  &::before {
    content: attr(data-num) '.';
    float: left;
    margin-left: -$gap;
    width: $gap - 8px;
    color: #888;
    text-align: right;
  }

  > a {
    color: #333;
    text-decoration: none;

    &:hover {
      color: #000;
    }
  }

  p {
    margin: 0;
    font-size: 12px;

    &,
    a {
      color: #888;
    }

    a:not(:hover) {
      text-decoration: none;
    }
  }
}
</style>
```

--------------------------------

### Element UI Table Integration with Infinite Loading (Vue)

Source: https://vue3-infinite-loading.vercel.app/guide/use-with-el-table

Demonstrates integrating the InfiniteLoading component within an Element UI table's 'append' slot. It highlights the need to specify 'forceUseInfiniteWrapper' with the correct CSS selector for the scrollable container, crucial for dynamic scrollbars.

```html
<div id="app">
  <el-table>
    <!-- el-table-column items -->

    <infinite-loading
      v-slot:append
      @infinite="infiniteHandler"
      force-use-infinite-wrapper=".el-table__body-wrapper .el-scrollbar__wrap">
    </infinite-loading>
  </el-table>
</div>
```

```vue
<template>
  <el-table
    :data="list"
    height="624"
    border>
    <el-table-column
      prop="title"
      label="Hacker News Title">
    </el-table-column>
    <el-table-column
      prop="author"
      label="Author"
      width="125">
    </el-table-column>

    <template #append>
      <infinite-loading
        @infinite="infiniteHandler"
        force-use-infinite-wrapper=".el-table__body-wrapper .el-scrollbar__wrap">
      </infinite-loading>
    </template>
  </el-table>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
// import InfiniteLoading from '@'
import InfiniteLoading from '../../lib'
import { ElTable, ElTableColumn } from 'element-plus'
import 'element-plus/es/components/table/style/css'

const page = ref(0)
const list = ref([])
const api = '//hn.algolia.com/api/v1/search_by_date?tags=story';

const infiniteHandler = ($state) => {
  console.log(111)
  axios.get(api, {
    params: {
      page: page.value,
    },
  }).then(({ data }) => {
    if (data.hits.length) {
      page.value += 1;
      list.value.push(...data.hits);
      $state.loaded();
    } else {
      $state.complete();
    }
  });
}
</script>
```

--------------------------------

### Vue 3 Infinite Loading with Filter/Tabs (HTML)

Source: https://vue3-infinite-loading.vercel.app/guide/use-with-filter-or-tabs

This HTML template demonstrates how to integrate an infinite loading component with a select element for filtering. It uses Vue's `v-model` and `@change` directives to manage the selected news type and triggers the infinite loading handler.

```html
<header>
  <!-- Hacker News header -->
  <select v-model="newsType" @change="changeType">
    <!-- Type options -->
  </select>
</header>

<div v-for="(item, $index) in list" :key="$index">
  <!-- Hacker News item loop -->
</div>

<infinite-loading :identifier="infiniteId" @infinite="infiniteHandler"></infinite-loading>
```

--------------------------------

### Vue 3 Infinite Loading with Filter/Tabs (JavaScript)

Source: https://vue3-infinite-loading.vercel.app/guide/use-with-filter-or-tabs

This JavaScript code provides the logic for the Vue 3 infinite loading component. It uses Axios to fetch data from an API, manages component state like page number and list items, and includes a method to reset the loading process when the news type changes.

```javascript
import axios from 'axios';

const api = '//hn.algolia.com/api/v1/search_by_date';

export default {
  data() {
    return {
      page: 1,
      list: [],
      newsType: 'story',
      infiniteId: +new Date(),
    };
  },
  methods: {
    infiniteHandler($state) {
      axios.get(api, {
        params: {
          page: this.page,
          tags: this.newsType,
        },
      }).then(({ data }) => {
        if (data.hits.length) {
          this.page += 1;
          this.list.push(...data.hits);
          $state.loaded();
        } else {
          $state.complete();
        }
      });
    },
    changeType() {
      this.page = 1;
      this.list = [];
      this.infiniteId += 1;
    },
  },
};
```

--------------------------------

### Custom error component with retry functionality

Source: https://vue3-infinite-loading.vercel.app/guide/configure-load-msg

Implement a custom error component that includes a retry button. The 'trigger' method can be accessed via `$attrs.trigger` or defined as a prop.

```html
<!-- your own error component -->
<div>
  Error message, click
  <a href="#retry" @click.prevent="$attrs.trigger">here</a>
  to retry
</div>
```

```js
// your own error component
export default {
  /* ... */
  props: {
    trigger: Function,
  },
  /* ... */
};
```

--------------------------------

### Configure Default Slots for Vue3 Infinite Loading

Source: https://vue3-infinite-loading.vercel.app/guide/configure-plugin-opts

Configure default slot values, such as 'noMore' messages or error components, for InfiniteLoading components. This involves passing an options object with the 'slots' field to Vue.use.

```javascript
import Vue from 'vue';
import InfiniteLoading from '@codog/vue3-infinite-loading';
import InfiniteError from 'path/to/your/components/InfiniteError';

Vue.use(InfiniteLoading, {
  slots: {
    noMore: 'No more message', // you can pass a string value
    error: InfiniteError, // you also can pass a Vue component as a slot
  },
});
```

--------------------------------

### Configure slots via v-slot directive

Source: https://vue3-infinite-loading.vercel.app/guide/configure-load-msg

Customize spinner, no-more, no-results, and error messages using Vue's v-slot directive. The error slot can receive a 'trigger' prop for retry functionality.

```html
<infinite-loading>
  <template #spinner>
    <div>Loading...</div>
  <template>
  <template #no-more>
    <div>No more message</div>
  <template>
  <template #no-results>
    <div>No results message</div>
  <template>
</infinite-loading>
```

```html
<infinite-loading>
  <template #error="{ trigger }">
    <div>
      Error message, click <a href="#retry" @click.prevent="trigger">here</a> to retry
    </div>
  </template>
</infinite-loading>
```
Tokens:
Raw