CODEWITHSUNDEEP
vue.jsnuxt.jsnuxt3.jsstatic-pages
Lioanys López García
Lioanys López García

Reputation: 23

How can I configure nuxt 3 so that when I directly open a static page generated with npm run generate it works correctly?

My project works fine. After running npm run generate and npx serve .output/public I can correctly access all the functionalities. But if I open the index.html of .output/public through my file system with a double click, it shows me the start correctly but no functionality does its job properly: neither the buttons nor the navigation bar. This same problem occurred to me programming in Vue 3, but I solved it by setting PublicPath: "" but with Nuxt I have not been able to solve the problem.

I tried setting SSR: false in nuxt.config.ts but it didn't work, neither app: {baseURL: "" } or nitro: {baseURL: "", static: true}

Is there any configuration that allows the project to work correctly by accessing it through the folders?

Upvotes: 1

Views: 660

Answers (2)

typed-sigterm
typed-sigterm

Reputation: 1047

TL;DR: There is no way to do that due to CORS.

Nuxt uses Vite, and Vite uses native ES6 Modules. When you double-click to open an HTML file, the browser will use file:// url, indicating a local file. However, ES6 Module can't be loaded from file:// urls. The request to the entry script will fail, the app won't hydrate.

Unlike file://, http:// or https:// will work. That's why npx serve .output/public will work.

Upvotes: 2

kissu
kissu

Reputation: 46676

You are not supposed to open an isomorphic app (or even a VueJS app) just by double-clicking on it.
You need to have a small server running to properly manage the whole state part.

This might be a start

export default defineNuxtConfig({
  nitro: {
    preset: 'browser'
  }
})

I know that there are ways to generate a Nuxt app fully statically too, but then I don't really see how it would manage some dynamic things.

Also, what is the issue of running serve?

Upvotes: 1

Related Questions