Why does nuxt generate only serve the root route when deploying to Azure?

When running Nuxt in development or SSR mode, Nuxt’s built-in page routing works as expected because the server handles route matching dynamically. However, when you generate a static build with nuxt generate, only the routes you explicitly pre-render (or the default route) become actual HTML files in your output.

In other words, the fact that your deployed site only serves the root (/) route is expected for an SPA/static build if you haven’t pre-rendered the other pages. The Nuxt documentation’s point about “.vue files under /pages are automatically used to generate routes” applies at runtime. For static sites, however, only the routes you pre-render will result in actual HTML pages.

There are two common approaches to resolve this:

1. Explicit Prerendering of Routes:
   Use a Nitro hook (or configure generate.routes) to scan your /pages folder and add those routes so that Nuxt creates static files for each route. That’s what your snippet does. For example:

   JAVASCRIPTCopied
   export default {
     hooks: {
       'nitro:config'(nitroConfig) {
         const fs = require('fs')
         const path = require('path')
         const pages = fs.readdirSync(path.resolve(__dirname, 'pages')).map((file) => {
           return file === 'index.vue' ? '/' : `/${file.replace('.vue', '')}`
         })
   
         nitroConfig?.prerender?.routes?.push(...pages)
       }
     }
   }

2. SPA Fallback with Client-Side Routing:
   If you prefer to have only a single HTML file (index.html) and let the client-side router handle navigation, you need to configure your hosting (Azure Web App in your case) to serve index.html for all routes. This means adding a rewrite rule so that unknown routes return the index.html. In Azure web apps, you typically do that via a web.config file or your deployment settings.

In summary, nothing is “wrong” with your Nuxt app—the behavior is by design. For static sites, you must either pre-render the individual routes or configure your deployment to rely on client-side routing (with a proper fallback). Choose the solution that best suits your deployment scenario.