Working with lists #

To get a list of models from your api, use the useList function.

<script setup lang="ts">
import vroom from '@/vroom';

const { items } = vroom.useList('book');
</script>

• model: The name of the model to fetch
• options (optional): An object of options (each of these are described in further detail in later sections)
  • sort: An array of sort fields
  • filter: An object of filters
  • include: An array of relations to include
  • pagination (object): Pagination options
  • lazy (boolean): If true useList will only fetch when refresh is called (default: false)
    • From >=0.12.0 this can be a reactive prop
  • loadOnUpdate (boolean): If true isLoading will be set to true on every fetch (including refreshes) (default: false)
  • mergePages (boolean): If true any change of page/cursor in pagination will append the next page instead of swapping them (useful for infinite scrolling) (default false)
  • path (string): If set will overwrite the path being called (instead of vrooms autogenerated one)
  • throttle (number ms) (>=0.12.0): Only call the api every N ms (will debounce the last trigger so it always runs)

Return values #

useList will return the following

• items: A computed array of items returned from the api (will be an empty array while loading)
• isLoading (boolean): True while the fetching from api the first time (if loadOnUpdate is set to true it will also be true on refreshes)
• isFailed (boolean): True if the latest fetch failed
• refresh (function): Calling this function will refetch from the api
• pushId ((id) => void): If you have an item loading (e.g. something you just created) that you want to show in the list, you can use this function to add the id
• create ((data) => void): Shorthand for creating a new item and pushing the id to the list

Autorefreshing with computed props #

useList will automatically refresh your list if it sees your filters, sort og pagination change. To do that you can pass it reactive props like ref or computed like so:

<script setup lang="ts">
import vroom from '@/vroom';

const page = ref(1);

// If page is changed, a refetch will trigger
const { items } = vroom.useList('book', { pagination: { page }});
</script>