Fix: Error Fetching App Manifest in Nuxt

What Causes This Error?

This error occurs when Nuxt fails to fetch the application manifest file (_nuxt/builds/meta/*.json). The manifest contains information about your app’s routes, preloaded assets, and build metadata.

Common Causes and Fixes

Cause 1: Missing Build Files

The manifest is generated during build. If build files are missing or corrupted:

# Clean and rebuild
rm -rf .nuxt .output
npm run build

Cause 2: CDN or Static Hosting Issues

If you’re using a CDN or static hosting, ensure the manifest files are being served:

# Check if manifest exists after build
ls -la .output/public/_nuxt/builds/

Cause 3: Incorrect Base URL

If your app is hosted at a subpath:

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    baseURL: '/my-app/',  // Must match your hosting path
    buildAssetsDir: '/_nuxt/'
  }
})

Cause 4: CORS Issues

If manifest is on a different domain:

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

Cause 5: Server Not Serving JSON Files

Some servers don’t serve .json files by default:

# Nginx config
location /_nuxt/ {
    types {
        application/json json;
    }
}

Cause 6: Experimental App Manifest Disabled

If using older Nuxt or disabled manifest:

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

Production Debugging

Check Network Tab

1. Open browser DevTools (F12)
2. Go to Network tab
3. Reload the page
4. Look for requests to /_nuxt/builds/meta/*.json
5. Check status code (should be 200)

Common Status Codes

Status	Meaning	Fix
404	File not found	Rebuild app, check deployment
403	Forbidden	Check file permissions
500	Server error	Check server logs
CORS error	Cross-origin blocked	Add CORS headers

Netlify / Vercel Deployment

Netlify

# netlify.toml
[[headers]]
  for = "/_nuxt/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

Vercel

// vercel.json
{
  "headers": [
    {
      "source": "/_nuxt/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ]
}

Docker Deployment

Ensure all build artifacts are copied:

# Dockerfile
FROM node:20-alpine

WORKDIR /app

COPY package*.json ./
RUN npm ci

COPY . .
RUN npm run build

# Make sure .output directory is complete
CMD ["node", ".output/server/index.mjs"]

Disabling App Manifest

If you don’t need the manifest features:

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

Note: Disabling may affect:

• Route prefetching
• Build metadata
• Some optimization features

Related Errors

Error Matching Route Rules

[nuxt] Error matching route rules.

Same manifest issue—follows same troubleshooting steps.

Quick Checklist

• App is built (npm run build)
• .output directory contains manifest files
• Server serves .json files correctly
• Base URL matches hosting configuration
• No CORS issues blocking manifest fetch
• CDN/cache not serving stale files
• Correct Nuxt version with manifest support (3.4+)