useItems

This composable allows you to access a given collection's items reactively.

To know more about items, please check out the Directus Docs.

Basic usage

<script lang="ts" setup>
import { useItems } from "vue-directus";

const items = useItems("collectionName");

// Or

const collectionName = ref("collectionName");
const items = useItems(itemsName);

// Or

const route = useRoute();
const items = useItems(() => route.params.collectionName);
</script>

<template>
  <div v-for="item in items" :key="item.id">
    <h1>{{ item.title }}</h1>
  </div>
</template>

Usage with controls

By default, the composable returns a ref containing all your items. You can however turn the controls option to true to return an object with a few convenience methods and refs.

<script lang="ts" setup>
import { useItems } from "vue-directus";

const { items, deleteOne, errors, loading } = useItems("collectionName", {
  controls: true,
});
</script>

<template>
  <div v-if="loading.fetch">
    <p>Loading...</p>
  </div>

  <div v-else-if="errors.fetch">
    <p>Oops! Looks like there was an error.</p>
    <pre>{{ errors.fetch }}</pre>
  </div>

  <template v-else>
    <div v-for="item in items" :key="item.id">
      <h1>{{ item.title }}</h1>
      <button @click="deleteOne(item.id)">Delete</button>
    </div>
  </template>
</template>

Here is the complete list of the returned object properties:

KeyTypeDescription
loadingObjectLoading states for each method
errorsObjectList of errors for each method
itemsRefList of fetched items
fetchFunctionRead many items
createOneFunctionCreate an item
createManyFunctionCreate multiple items
updateOneFunctionUpdate an item
updateManyFunctionUpdate multiple items
deleteOneFunctionUpdate an item
deleteManyFunctionUpdate multiple items

Prevent initial fetch

By default, the composable will fetch the collection items on initialization. You may turn off that behaviour by setting the fetchOnInit option to false. Please note that this will automatically turn on the controls (see above) to let you fetch when necessary.

<script lang="ts" setup>
import { useItems } from "vue-directus";

const { items, fetch } = useItems("collectionName", {
  fetchOnInit: false,
});

// Do something.

await fetch();
</script>