# Creating dynamic pages with Nuxt + directus

**URL:** <https://community.directus.com/t/creating-dynamic-pages-with-nuxt-directus/2493>\
**Category:** Help\
**Tags:** v12\
**Created:** [August 26, 2026, 2:02pm UTC](https://community.directus.com/t/creating-dynamic-pages-with-nuxt-directus/2493 "2026-08-26T14:02:36Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tobias](https://sea2.discourse-cdn.com/flex002/user_avatar/community.directus.com/tobias/32/1809_2.png) [@Tobias](https://community.directus.com/u/Tobias)\
**Post date:** [August 26, 2026, 2:02pm UTC](https://community.directus.com/t/creating-dynamic-pages-with-nuxt-directus/2493/1 "2026-08-26T14:02:36Z")

</div>

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](https://directus.com/docs/frameworks/nuxt/dynamic-pages)**
>
> Learn how to create dynamic pages you can use in your 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](http://localhost:3000/directus)”

In the console I get these errors:

 ![Bildschirmfoto_20260826_154943](https://us1.discourse-cdn.com/flex002/uploads/directus/original/2X/4/40903b8c354de523179a684f958203ce16df520c.png)

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...](https://directus.com/docs/frameworks/nuxt/dynamic-pages#create-the-posts-listing)**
>
> Directus provides a headless CMS, which when combined with Nuxt will streamline content management. This post covers how to combine the two to create dynamic pages for a content management system. | Learn how to create dynamic pages you can use in...

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. 😊

---

<div class="post-metadata">

**Author:** ![Cas](https://sea2.discourse-cdn.com/flex002/user_avatar/community.directus.com/cas/32/1813_2.png) [@Cas](https://community.directus.com/u/Cas)\
**Post date:** [August 27, 2026, 6:56am UTC](https://community.directus.com/t/creating-dynamic-pages-with-nuxt-directus/2493/2 "2026-08-27T06:56:41Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![Tobias](https://sea2.discourse-cdn.com/flex002/user_avatar/community.directus.com/tobias/32/1809_2.png) [@Tobias](https://community.directus.com/u/Tobias)\
**Post date:** [August 27, 2026, 2:14pm UTC](https://community.directus.com/t/creating-dynamic-pages-with-nuxt-directus/2493/3 "2026-08-27T14:14:24Z")

</div>

@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:

```auto
 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:

```typescript
// 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:

```typescript
API_URL="http://0.0.0.0:8055"

```

env.d.ts:

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

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

```

/plugins/directus.ts:

```typescript
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:

```typescript
<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:

```typescript
<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?