Creating dynamic pages with Nuxt + directus

[Tobias]

Hi there,
I’ve been eyeing with directus for some years now but always failed to setup a working prototype for a simple Vue3 website with dynamic pages (thus Nuxt) and directus as the CMS. The goal would be to have dynamic pages created by the owner of the website and dynamic content with pre-created components.

Used versions:
image: directus/directus:12.3.0
@directus/sdk: ^25.0.0
nuxt: ^4.5.2
vue: ^3.5.41

My latest effort in setting up a working prototype is by following this tutorial page of directus for dynamic pages to the teeth:

Create Dynamic Pages for a CMS using Directus and Nuxt

But I am stuck with an empty (white) page with only the headline “Directus Blog” and no items displayed.

When checking each step several times over, I found that I cannot access directus via my Nuxt URL:
“http://localhost:3000/directus”

In the console I get these errors:

In my Nuxt project, I still see several variables underlined in red (but they would most likely be auto-resolved through Nuxt), but due to uncertainty, it might be an indicator, that something else might be missing.

In the tutorial page, I reached as far as this point:

Create the Posts Listing - Create Dynamic Pages for a CMS using Directus and...

But did not create separate components yet under:
components/Post.vue

Could you please help me out? I really would like to get this to work, but nothing I ever did could help me get this setup to work.

As additional info:
I know Vue.js, but I am totally new to Nuxt (except for my years of trial to make this setup work with directus from time to time with long breaks in-between).

Either it’s now or never. I am willing to try everything out or give as much feedback as necessary, to make it work - if someone is willing to help me out on this. I really wished for it to work so that I can hope for wonderful and cool projects in the future with directus.

Thank you.

[Cas]

This is most likely a build issue in your Nuxt server/environment. If you use docker, just check “docker compose logs -f” and you’ll most likely see a build error. Most likely culprit, you have defined components or pages that are syntaxtically incorrect (because of the missing component or something like that)

[Tobias]

@Cas thank you, again for your response.

As I suppose, the Nuxt.js setup is somewhat faulty, even though I completely did everything as closely as possible to the tutorial as mentioned in the first post.

When running the Nuxt frontend with “npm run dev”, I see a warning in the terminal, stating:

 WARN  [NUXT_E4014] No pages found. <NuxtPage> requires at least one page component in the pages/ directory.                                                                                                                                                                                                      15:47:09
╰▶ fix: Create an index.vue file inside the pages/ directory.

But I created the index.vue file (see output below). I could imagine it might not accept it due to several red underlinings without proper imports (but Nuxt should handle that, as far as I found out). Nevertheless, I experimented with importing those from “nuxt/app”, “#app” and “#imports” but nothing ever solved the problem.

Here are the files with it’s current content.

nuxt.config.ts:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  routeRules: {
    "/directus/**": { proxy: ${import.meta.env.API_URL}/** },
  },
})

.env:

API_URL="http://0.0.0.0:8055"

env.d.ts:

/// <reference types="vite/client" /> 
interface ImportMetaEnv {
  readonly API_URL: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

/plugins/directus.ts:

import { createDirectus, rest, readItem, readItems } from "/sdk";

const directus = createDirectus(
  "http://localhost:3000/directus",
).with(rest());

export default defineNuxtPlugin(() => {
  return {
    provide: { directus, readItem, readItems },
  };
});

/pages/index.vue:

<script setup lang="ts">
const { $directus, $readItems } = useNuxtApp()
const route = useRoute()

const { data, error } = await useAsyncData('post', async () => {
  return $directus.request($readItems('posts'))
})
</script>

<template>
  <div v-if="data">
    <div v-for="post in data" :key="post.id">
      <h1>{{ post.title }}</h1>
    </div>
  </div>
  <div v-else>Loading...</div>
</template>

/app/app.vue:

<template>
  <div>
    <h1>Directus Blog</h1>
    <NuxtRouteAnnouncer />
    <NuxtPage />
  </div>
</template>

Can you see something in those files, that could cause the issue of not establishing the connection with or not receiving the posts data from directus?