Nuxt Directus SDK

Appearance

Getting Started ​

Get up and running with nuxt-directus-sdk in minutes.

Installation ​

  1. Install the module using your preferred package manager:
bash
npm install nuxt-directus-sdk
bash
yarn add nuxt-directus-sdk
bash
pnpm add nuxt-directus-sdk
bash
bun add nuxt-directus-sdk
  1. Add the module to your nuxt.config.ts:
ts
export default defineNuxtConfig({
  modules: ['nuxt-directus-sdk'], 
  directus: {},
})

INFO

View all module options in the API Reference > Configuration page.

  1. Add the following variables to the .env file in your nuxt project root:
dotenv
DIRECTUS_URL=https://url-to.directus.app
DIRECTUS_ADMIN_TOKEN=admin_token_required_for_typegen
  • DIRECTUS_URL (required): Your Directus instance URL
  • DIRECTUS_ADMIN_TOKEN (optional): Admin token for type generation and useAdminDirectus() module.

Directus Configuration ​

For the module to work properly, you need to configure your Directus instance with the following environment variables depending on your environment:

dotenv
CORS_ENABLED=true
CORS_ORIGIN=*
SESSION_COOKIE_DOMAIN=localhost
dotenv
SESSION_COOKIE_DOMAIN=http://url-to.nuxt.app
SESSION_COOKIE_SECURE=true
SESSION_COOKIE_SAME_SITE=None
dotenv
CORS_ENABLED=true
CORS_ORIGIN=http://url-to.nuxt.app
AUTH_LOCAL_MODE=session
SESSION_COOKIE_DOMAIN=url-to.nuxt.app
SESSION_COOKIE_SECURE=true
SESSION_COOKIE_SAME_SITE=none

INFO

These configuration examples assume that you do not modify the default environment variables in Directus. Refer to Directus Configuration for details about environment variables and their defaults.

Optional Configuration ​

dotenv
WEBSOCKETS_ENABLED=true

Verify Installation ​

Create a simple page to test the integration:

vue
<script setup>
	const directus = useDirectus()
	const { data: posts, error } = await useAsyncData('posts', () =>
		directus.request(
			readItems('posts', {
				limit: 10,
				filter: {
					status: { _eq: 'published' },
				},
			})
		)
	)
</script>

<template>
	<div>
		<h1>Blog Posts</h1>
		<div v-if="posts">
			<p>Successfully connected to Directus!</p>
			<p>Item count: {{ posts.length }}</p>
		</div>
		<pre>{{ error }}</pre>
	</div>
	<div
		v-for="post in posts"
		:key="post.id">
		<h2>{{ post.title }}</h2>
	</div>
</template>

INFO

The examples provided are written to work with the directus-template-cli CMS Template provided by the Directus team.

To populate your Directus instance with the information used in the examples, use the following command:

bash
npx directus-template-cli@latest apply

WARNING

The template cli will attempt to merge with your existing content, but is not guaranteed to preserve anything. It is recommended that you use the cli on a fresh instance for testing as needed or modify the examples to work with your existing data structures.

Development Proxy ​

In development mode, the module automatically creates a proxy at /directus that forwards requests to your Directus instance. This eliminates CORS issues.

You can configure the proxy:

typescript
export default defineNuxtConfig({
  directus: {
    // Proxy configuration (optional)
    devProxy: {
      enabled: true,  // default: true in dev mode
      path: '/directus',  // default: '/directus'
    },
  },
})

The proxy automatically detects the host and port from Nuxt's dev server, including dynamic port changes.

Split URLs (Docker / Kubernetes) ​

If your Nuxt server can reach Directus via an internal URL (e.g. Docker service name), you can configure separate client and server URLs:

typescript
export default defineNuxtConfig({
  directus: {
    url: {
      client: 'https://cms.example.com',    // Used by the browser
      server: 'http://directus:8055',        // Used during SSR
    },
  },
})

The server URL is only used during SSR and is never exposed to the browser. See the Configuration Reference for more details.

Type Generation ​

The module automatically generates TypeScript types from your Directus schema. Make sure you have DIRECTUS_ADMIN_TOKEN set in your .env file.

To disable type generation:

typescript
export default defineNuxtConfig({
  directus: {
    types: {
      enabled: false,
    },
  },
})

Next Steps ​

Now that you're set up, explore the features: