Fix: File Is Not a Valid Page - No Content in Nuxt

What Causes This Error?

This error occurs when Nuxt finds a file in your pages/ directory that is completely empty or doesn’t contain valid Vue component content.

The Problem

<!-- pages/empty.vue -->
<!-- ❌ Empty file - no content -->

<!-- pages/invalid.vue -->
<!-- ❌ Only comments, no actual template -->
<!-- This is a placeholder -->

<!-- pages/broken.vue -->
<template>
  <!-- ❌ Empty template -->
</template>

The Fix

Add Valid Content

<!-- pages/about.vue -->
<!-- ✅ Has actual content -->
<template>
  <div>
    <h1>About Us</h1>
  </div>
</template>

Minimal Valid Page

<!-- pages/placeholder.vue -->
<!-- ✅ Minimal but valid -->
<template>
  <div>Page content coming soon</div>
</template>

Common Scenarios

Placeholder Pages

<!-- pages/coming-soon.vue -->
<template>
  <div class="coming-soon">
    <h1>Coming Soon</h1>
    <p>This page is under construction.</p>
  </div>
</template>

Redirect Pages

<!-- pages/old-page.vue -->
<script setup>
// Redirect to new location
navigateTo('/new-page', { redirectCode: 301 })
</script>

<template>
  <div>Redirecting...</div>
</template>

Dynamic Content Pages

<!-- pages/products/[id].vue -->
<script setup>
const route = useRoute()
const { data } = await useFetch(`/api/products/${route.params.id}`)
</script>

<template>
  <div v-if="data">
    <h1>{{ data.name }}</h1>
  </div>
  <div v-else>
    Loading...
  </div>
</template>

Removing Unwanted Pages

If you don’t need the page, remove it:

# Remove empty page file
rm pages/empty.vue

Or exclude it from the build:

// nuxt.config.ts
export default defineNuxtConfig({
  pages: {
    // Exclude specific patterns
    exclude: ['**/draft-*']
  }
})

Using TypeScript Pages

<!-- pages/typed.vue -->
<script setup lang="ts">
interface PageData {
  title: string
  content: string
}

const data = ref<PageData>({
  title: 'My Page',
  content: 'Page content here'
})
</script>

<template>
  <div>
    <h1>{{ data.title }}</h1>
    <p>{{ data.content }}</p>
  </div>
</template>

Draft/Work-in-Progress Pages

Option 1: Prefix with Underscore

pages/
├── index.vue         ✅ Active
├── about.vue         ✅ Active
└── _draft.vue        ✅ Ignored (underscore prefix)

Option 2: Use .draft Extension

pages/
├── index.vue         ✅ Active
└── new-feature.vue.draft  ✅ Ignored (not .vue)

Option 3: Draft Directory

pages/
├── index.vue         ✅ Active
drafts/               (Outside pages directory)
└── new-page.vue      ✅ Not processed as page

Component-Only Files

If you want a Vue file that’s not a page:

components/
└── PageSection.vue   ✅ Component, not page

pages/
└── index.vue         ✅ Uses PageSection component

Debugging

List All Pages

# See what Nuxt detects as pages
npx nuxi info

Check Page Routes

// nuxt.config.ts
export default defineNuxtConfig({
  hooks: {
    'pages:extend'(pages) {
      console.log('Pages found:', pages.map(p => p.path))
    }
  }
})

Valid Page Structures

Template Only

<template>
  <div>Content</div>
</template>

Script + Template

<script setup>
const message = ref('Hello')
</script>

<template>
  <div>{{ message }}</div>
</template>

Full Component

<script setup>
const count = ref(0)
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="count++">Increment</button>
  </div>
</template>

<style scoped>
div {
  padding: 1rem;
}
</style>

Quick Checklist

• Page file has <template> with content
• Template contains at least one element
• Remove or rename empty placeholder files
• Use _ prefix for ignored files
• Move non-page components to components/
• Check for syntax errors that make file unparseable