Nuxt•2d ago

Nuxt SPA build not building nitro server

i have an app with nuxt that i want to turn into an SPA, since it's all behind auth i dont really need SSR. using npx nuxi generate with ssr: false does build the project as an SPA but my only issue now is that i have server routes but with this setup the nuxt build is not building the api nitro server at all, any ideas how to resolve that ? my workaround is to have two builds one for the SPA and the other for the server first build: build SPA with with generate + ssr false -> host statically second build: normal build -> host with nodejs and call /api routes

3 Replies

kapa.ai•2d ago

Hi @Riad. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources provided, I can offer some insights and potential solutions to your issue with building a Nuxt SPA that includes server routes. The problem you're experiencing is a known limitation when using ssr: false with nuxi generate. This configuration is designed to create a purely client-side rendered application, which doesn't include the Nitro server for API routes. However, there are a couple of approaches you can consider to resolve this: 1. Use nuxt build instead of nuxi generate: Instead of using nuxi generate, you can use nuxt build with ssr: false. This should build both the SPA and the Nitro server for your API routes. You can then deploy this as a Node.js application. 2. Modify the prerender configuration: If you want to stick with nuxi generate, you can modify the Nitro prerender configuration to include your API routes while still generating a static SPA. Here's how you can do this:

export default defineNuxtConfig({
  ssr: false,
  nitro: {
    prerender: {
      crawlLinks: true,
      routes: ['/'],
      ignore: ["/api"]
    }
  },
})

export default defineNuxtConfig({
  ssr: false,
  nitro: {
    prerender: {
      crawlLinks: true,
      routes: ['/'],
      ignore: ["/api"]
    }
  },
})

This configuration tells Nuxt to prerender the routes as a static SPA, but to ignore the /api routes, which will be handled by the Nitro server at runtime. Stack Overflow: How to make Nuxt 3 correctly build SSG pages + dynamic API routes? (https://stackoverflow.com/questions/77292506) provides this solution, which seems to address a similar issue to yours. 3. Use the noVueServer experimental feature: If you want to completely disable the Vue server renderer endpoint within Nitro, you can use the noVueServer experimental feature:

export default defineNuxtConfig({
  experimental: {
    noVueServer: true
  }
})

export default defineNuxtConfig({
  experimental: {
    noVueServer: true
  }
})

This is mentioned in the Nuxt documentation on experimental features (https://nuxt.com/docs/guide/going-further/experimental-features#novueserver), but be aware that experimental features may change in future versions. Your current workaround of having two separate builds is a valid approach, but it's not the most efficient solution. The methods suggested above should allow you to build both your SPA and API routes in a single build process. Remember, when deploying a Nuxt application as an SPA, you'll need to configure your hosting provider to serve the index.html file for all routes, as explained in the Nuxt documentation on deploying a static client-rendered app (https://nuxt.com/docs/guide/concepts/rendering#deploying-a-static-client-rendered-app). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

<@961933394239967232> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

RiadOP•2d ago

so the issue with 1 and 3 is that it's not generating the "index.html" in the "public" output folder so i cant deploy it as a simple SPA, check image:

Gaming

Programming

Nuxt SPA build not building nitro server