Directus provider for NuxtImage

Provides Directus assets source for Nuxt Image.

• ✨  Release Notes

Quick Setup

1. Add @bicou/nuxt-image-directus dependency to your project

# Using pnpm
pnpm add -D @bicou/nuxt-image-directus

# Using yarn
yarn add --dev @bicou/nuxt-image-directus

# Using npm
npm install --save-dev @bicou/nuxt-image-directus

2. Add @bicou/nuxt-image-directus to the modules section of nuxt.config.ts before @nuxt/image-edge

export default defineNuxtConfig({
  modules: [
    // must be listed before @nuxt/image-edge
    "@bicou/nuxt-image-directus",
    "@nuxt/image-edge"
  ]
})

3. Add the alias #image-directus to the list of providers for nuxt image and pass baseURL option :

export default defineNuxtConfig({
  modules: [
    "@bicou/nuxt-image-directus",
    "@nuxt/image-edge"
  ],
  image: {
    providers: {
      directus: {
        // need to use runtime alias
        provider: "#image-directus",
        options: {
          // path to your directus assets
          baseURL: "https://directushost:8055/assets" 
        }  
      }  
    }  
  }  
})

That's it! You can now use <nuxt-img provider="directus" src="..." /> or <nuxt-picture provider="directus" src="..." /> with your Directus assets in your Nuxt app ✨

Development

# Install dependencies
pnpm install

# Generate type stubs
pnpm run prepare

# Develop with the playground
pnpm run dev

# Build the playground
pnpm run build

# Run ESLint
pnpm run lint