Fix: App Manifest Should Be Enabled in Nuxt

What Causes This Error?

This error appears when you try to use features that depend on the app manifest without enabling the experimental flag. The app manifest provides metadata about your application’s routes and capabilities.

The Problem

// Using features that require manifest without enabling it
// Features like:
// - Route preloading
// - Smart prefetching
// - Client-side route validation

The Fix

Enable App Manifest

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    appManifest: true
  }
})

Understanding App Manifest

What Is It?

The app manifest is a JSON file generated during build that contains information about your application:

// /_nuxt/builds/meta/{hash}.json
{
  "id": "build-id",
  "timestamp": 1706000000000,
  "routes": [
    "/",
    "/about",
    "/products/:id"
  ],
  "prerender": ["/", "/about"]
}

What It Enables

1. Smarter Prefetching: Only prefetch valid routes
2. Route Validation: Check if routes exist before navigating
3. Build Tracking: Detect when a new build is deployed
4. Prerender Detection: Know which pages are pre-rendered

Common Use Cases

Route Prefetching

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    appManifest: true
  },

  // Works better with manifest enabled
  routeRules: {
    '/products/**': { prerender: true }
  }
})

Build Detection

<script setup>
// With manifest, can detect new builds
const nuxtApp = useNuxtApp()

// Hook into build changes
nuxtApp.hook('app:manifest:update', (manifest) => {
  // New version deployed!
  console.log('New build:', manifest.id)
})
</script>

Client-Side Route Checking

<script setup>
// With manifest, route validation is improved
const router = useRouter()

// Can verify routes exist before navigation
const routeExists = (path: string) => {
  return router.hasRoute(path)
}
</script>

Full Configuration

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    // Enable app manifest
    appManifest: true,

    // Related features that work well with manifest
    payloadExtraction: true,
    renderJsonPayloads: true
  },

  routeRules: {
    // Prerendering benefits from manifest
    '/': { prerender: true },
    '/products/**': { prerender: true },
    '/blog/**': { swr: 3600 }
  }
})

Debugging Manifest

Check If Manifest Is Generated

# After building
npm run build

# Look for manifest files
ls -la .output/public/_nuxt/builds/

Inspect Manifest Content

# Find and read manifest
cat .output/public/_nuxt/builds/meta/*.json | jq .

Client-Side Check

<script setup>
const nuxtApp = useNuxtApp()

onMounted(async () => {
  // Check manifest availability
  if (process.client) {
    const manifest = await $fetch('/_nuxt/builds/latest.json')
      .catch(() => null)
    console.log('App manifest:', manifest)
  }
})
</script>

When to Enable

Enable app manifest when using:

• Pre-rendering: Pages marked for prerender
• ISR/SWR: Incremental static regeneration
• Smart prefetching: Route-aware prefetch
• Build versioning: Detect deployment changes
• Route validation: Client-side route checking

Potential Issues

Manifest Not Updating

# Clear build cache
rm -rf .nuxt .output node_modules/.cache

# Rebuild
npm run build

CORS Issues with CDN

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    routeRules: {
      '/_nuxt/builds/**': {
        headers: {
          'Access-Control-Allow-Origin': '*'
        }
      }
    }
  }
})

Manifest Size in Large Apps

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    appManifest: true
  },

  // Limit manifest routes if needed
  hooks: {
    'build:manifest'(manifest) {
      // Custom manifest processing
    }
  }
})

Compatibility

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    appManifest: true
  },

  // Ensure compatibility
  compatibilityDate: '2024-04-03'
})

Quick Checklist

• experimental.appManifest: true in config
• Rebuild after enabling (npm run build)
• Check /_nuxt/builds/ directory exists
• Manifest accessible from client (no CORS issues)
• Clear cache if manifest seems stale
• Works with your hosting provider (static vs server)