useDirectusFiles
Check out the Directus Files documentation.
getFiles
Search for files, global search querys can be used.
- Arguments:
data:id: String(optional)params:global search querys.
- Returns:
Array<T>
pages/files.vue
<script setup>const { getFiles } = useDirectusFiles();const router = useRouter();const fetchFiles = async () => { const files = await getFiles({ params: { { content: "testcontent", title: "Test1" }, }, });};</script>Check out Files Type Definitions or to add typescript support here.
getThumbnail
Generate image url from file id
Directus will generate the image with the given parameters on the server and deliver you an optimized image
- Arguments:
- fileId:
String - options:
DirectusThumbnailOptions
- fileId:
- Returns:
String
<template> <div> <img :src="img(fileId)" alt="original" /> <img :src="img(fileId, { width: 300, height: 300, fit: 'cover' })" alt="square" /> <img :src="img(fileId, { width: 300, format: 'webp' })" alt="webp" /> </div></template><script setup>const fileId = "5e47b7e6-fd78-400c-821f-0dca4a176f4f";const { getThumbnail: img } = useDirectusFiles();</script>What do you think?
How helpful was this article?
Worst Doc ever 🥲
Not helpful 🤬
Helpful 😊
Super Helpful 😍
Table of Contents