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.

Next Steps ​

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