Nuxt•4mo ago

How to enable SPA mode

Hello, I am trying to configure nuxt to output a simple SPA similar to a default vite build. Things I've tried: - ssr: false disables serverside rendering, but nitro is still being built - nitro.static: true statically generates all pages - router.options.hashMode: true to enable the hash based clientside routing None of these (in combination) give me the desired build output. All i am looking for is a single index.html entrypoint. Note that i am not working on a regular web app and i pretty much only use nuxt for the file based routing and auto imports. The targeted use case is a user interface embedded into a game using chromium embedded framework. Best regards

3 Replies

manniL•4mo ago

funnily I'll release a video this week about exactly that My Nuxt Config there (most of the things you mentioned):

export default defineNuxtConfig({
  hooks: {
    "prerender:routes"({ routes }) {
      routes.clear() // Do not generate any routes (except the defaults)
    }
  },
  ssr: false,
  router: {
    options: {
      hashMode: true
    }
  }
})

export default defineNuxtConfig({
  hooks: {
    "prerender:routes"({ routes }) {
      routes.clear() // Do not generate any routes (except the defaults)
    }
  },
  ssr: false,
  router: {
    options: {
      hashMode: true
    }
  }
})

make sure you run nuxi generate though, not build

Timo•4mo ago

Thank you! Can't wait to watch your video to get a better understanding of it 😄

manniL•4mo ago

@Timo9 https://www.youtube.com/watch?v=7Lr0QTP1Ro8

Alexander Lichter

YouTube

Building a plain SPA with Nuxt!?

🗝️ Single Page Applications are amazing! Sometimes you simply don't need SSR at all, especially when building behind authentication. While you can use plain Vue to build a fully client-side rendered application, Nuxt is also capable of building good old SPAs (unlike other meta frameworks 👀). In this video, you'll learn how it works, what you can...

Gaming

Programming

How to enable SPA mode