Content only development mode

[snovik]

Is there a way to make a Nuxt Content page accessible only in development mode and completely unavailable in production? I’m using it to build internal developer documentation and don’t want it exposed in prod.

[yudin-s]

I would handle this at the content source level if the page must be completely unavailable in production. A route guard can hide the page, but the content may still be part of the generated content database/payload. Excluding it from the production collection is cleaner.

For example, put internal docs under something like content/dev/** and exclude that folder outside development:

// content.config.ts
import { defineCollection, defineContentConfig } from "@nuxt/content"

const isDev = process.env.NODE_ENV === "development"

export default defineContentConfig({
  collections: {
    docs: defineCollection({
      type: "page",
      source: {
        include: "**/*.md",
        exclude: isDev ? [] : ["dev/**"]
      }
    })
  }
})

That way the production build does not import those files into the collection.

If you also have a normal Vue page/route that should 404 in production, add a route-level check as a second layer:

<script setup lang="ts">
definePageMeta({
  validate() {
    return import.meta.dev || {
      statusCode: 404,
      statusMessage: "Page not found"
    }
  }
})
</script>

So my recommendation is:

1. Exclude the content files from production collections.
2. Add a route/page validation or middleware if there is still a route that could be visited directly.

That avoids accidentally shipping internal docs and also gives visitors a proper 404.