useDirectusItems


Check out the Directus Items documentation.

getItems

Search for items in a specific collection, global search querys can be used

pages/articles.vue
<script setup lang="ts">const { getItems } = useDirectusItems();const router = useRouter();interface Article {  id?: string | number;  title: string;  content: string;  status: string;}const fetchArticles = async () => {  try {    const filters = { content: "testcontent", title: "Test1" };    const items = await getItems<Article>({      collection: "News",      params: {        filter: filters,      },    });  } catch (e) {}};</script>

getSingletonItem

Get object from Singleton marked collection

pages/imprint.vue
<script setup lang="ts">const { getSingletonItem } = useDirectusItems();interface Imprint {  id?: string | number;  content: string;}const fetchArticle: Article[] = async () => {  try {    const item = await getSingletonItem<Imprint>({      collection: "Imprint",    });  } catch (e) {}};</script>

getItemById

Search for an item by id in a specific collection

pages/article.vue
<script setup lang="ts">const { getItemById } = useDirectusItems();const fetchArticle = async () => {  try {    const item = await getItemById({      collection: "News",      id: "4776864a-75ee-4746-9ef4-bd5c2e38cc66",    });  } catch (e) {}};</script>

createItems

Create one or multiple items in a specific collection

Items don't have a pre-defined schema. The format depends completely on how you configured your collections and fields in Directus.

pages/articles.vue
<script setup lang="ts">const { createItems } = useDirectusItems();interface Article {  id?: string | number;  title: string;  content: string;  status: string;}const createArticles: Article[] = async () => {  try {    const items: Article[] = [      {        title: "testitem",        content: "testcontent",        status: "published",      },      {        title: "testitem2",        content: "testcontent2",        status: "published",      },    ];    await createItems<Article>({ collection: "News", items });  } catch (e) {}};</script>

deleteItems

Delete one or multiple items in a specific collection

pages/articles.vue
<script setup lang="ts">const { deleteItems } = useDirectusItems();const deleteArticles: void = async () => {  try {    const items = ["15", "20", "22"];    await deleteItems({ collection: "News", items });  } catch (e) {}};</script>

updateItem

Update item in a specific collection

pages/articles.vue
<script setup lang="ts">const { updateItem } = useDirectusItems();interface Article {  id?: string | number;  title: string;  content: string;  status: string;}const updateArticles: Article[] = async () => {  try {    const newItem = { title: "This Item was updated" };    await updateItem<Article>({      collection: "News",      id: "itemid",      item: newItem,    });  } catch (e) {}};</script>