Nuxt Image with Directus integration.

Integration between Directus and the image module.

To use this provider you just need to specify the base URL of your project.

export default defineNuxtConfig({  image: {    directus: {      // This URL needs to include the final `assets/` directory      baseURL: 'http://localhost:8055/assets/',    }  }})

You can easily override default options:

export default defineNuxtConfig({  image: {    directus: {      baseURL: '',      modifiers: {        withoutEnlargement: 'true',        transforms: [['blur', 4], ['negate']]      }    }  }})


All the default modifiers from Directus documentation are available.

<NuxtImg  provider="directus"  src="ad514db1-eb90-4523-8183-46781437e7ee"  height="512"  fit="inside"  quality="20"  :modifiers="{ withoutEnlargement: 'true' }"/>

Since Directus exposes the full sharp API through the transforms parameter, we can use it inside our modifiers prop:

<NuxtImg  provider="directus"  src="ad514db1-eb90-4523-8183-46781437e7ee"  :modifiers="{ height: '512', withoutEnlargement: 'true', transforms: [['blur', 4], ['negate']] }"/>
Note that the transforms parameter, as stated in the Directus documentation, is basically a list of lists. This is to facilitate the use of those sharp functions, like normalise, that would need multiple values in input: transforms: [['normalise', 1, 99], ['blur', 4], ['negate']].