Main Concepts

Native Components from SDK

Since this module depends on the Directus SDK, you could enable Nuxt's auto-import feature via directus.moduleConfig.autoImport in your nuxt.config.

export default defineNuxtConfig({
  modules: ['nuxt-directus-next'],
  directus: {
    url: 'http://localhost:8055/',
    moduleConfig: {
      autoImport: true
    }
  }
})

When auto-importing is enabled, by default, all native composables are prefixed with sdk (sdkReadItems()). This is easily customizable by editing your nuxt.config:

export default defineNuxtConfig({
  modules: ['nuxt-directus-next'],
  directus: {
    url: 'http://localhost:8055/',
    moduleConfig: {
      autoImport: true,
      autoImportPrefix: 'OG'
    }
  }
})

As you see, to use native composables from the SDK, you need to define and use a client. This module both provides preconfigured ones as well as a clean one to build upon. All of them are further configurable via injected properties.

// this will use the url from your Nuxt runtimeConfig
const client = useDirectus()
// or you could pass your own
const client = useDirectus({ baseURL: 'my-directus-instance.com' })

// the above is the same as
const client = createDirectus('my-directus-instance.com', {
  globals: {
    fetch: $fetch.create({})
  }
})

Once you use your client please refer to the official Directus documentation on how to use each composable from the SDK.

Example of an item request

import { readItems } from '@directus/sdk'

const client = useDirectusRest()

const { data: posts } = await useAsyncData(() => client.request(readItems('my_collection')))

Authentication Cookies

User authentication credentials, by default, are handled by Nuxt. Both access_token via state management and refresh_token via cookie. Their options and naming can be edited in your nuxt.config.

export default defineNuxtConfig({
  modules: ['nuxt-directus-next'],
  directus: {
    url: 'http://localhost:8055/',
    authConfig: {
      useNuxtCookies: true
      refreshTokenCookieName: 'directus_refresh_token',
      cookieHttpOnly: false,
      cookieSameSite: 'lax',
      cookieSecure: true,
      authStateName: 'directus.auth'
      userStateName: 'directus.user'
    }
  }
})

Other options, like cookie expiry, are handled by Directus's configuration.

If, on the other hand, you would like to handle user authentication only using Directus auth endpoint, you can do so by setting directus.authConfig.useNuxtCookies to false. In this mode you will depend on the cookie configuration set in your Directus deployment config, while leaving Nuxt handle only the access_token and user data via state management.

Nuxt API Routes

It is also possible to fetch data from Nuxt's API Routes.

While being the only server/util currently available, useDirectusRest() behaves exactly like the normal composable, with the exception of missing the authentication configuration and storage. But, since we are in a server-side-only environment we have access to staticTokenServer any other private runtimeConfig. But much like the normal rest client you could pass your own logic for useStaticToken, that you could use to manually pass access_tokens from incoming requests.

import type { Schema } from '~/types'
import { readItems } from '@directus/sdk'

export default defineEventHandler((event) => {
  const client = useDirectusRest<Schema>()

  return client.request(readItems('posts'))
})