Nuxt.js: Allow nuxt running from subfolder or `file://` protocol (like vue-cli 3 projects)

[tiptronic]

What problem does this feature solve?

Allow to run a compiled (pre-rendered) nuxt project from the file:// protocol or from any subfolder (on the server) without modification.
Much like proposed here:
https://cli.vuejs.org/config/#publicpath

What does the proposed changes look like?

Can't say, but in vue-cli 3 the trick is setting publicPath to the empty string ("")

_{This feature request is available on Nuxt community (#c9558)}

[manniL]

Vue CLI docs also state on the same page:

Relative publicPath has some limitations and should be avoided when:
You are using HTML5 history.pushState routing;
You are using the pages option to build a multi-paged app.

Nuxt fulfills both points by default, so this might be a bit tricky.
Using hash router instead of the history one would solve the first point mentioned, not sure how to handle the second.

[tiptronic]

I don't understand these comments, because imo history.pushState routing is something which is not really a common use-case - and why sacrify something useful for something rare?

I don't know what the pages option to build a multi-paged app means. So - I for one - would rather refrain from using that feature in favor of relative paths... (which - again - imo is one of the most basic/common ways of navigation inside a multi-level html-installation)

[manniL]

I don't understand these comments, because imo history.pushState routing is something which is not really a common use-case - and why sacrify something useful for something rare?

It's quite the opposite actually!
Sure, you can run SPAs with the router hash mode and "no real URLs", but the history mode is the most common.

[tiptronic]

Just a bit, please... I am still talking about pre-rendered (static) sites - where there's no need for mod-rewrite and the likes 😋

[aldarund]

pre rendered static sites still use history mode when navigation on client after initial load

[tiptronic]

Isn't that an unnecessary restriction to the whole system?

If a site gets pre-rendered to its lowest common factor (html/css files), everything about the site's structure is known. And these static sites ought to run without javascript, because there's no need to navigate using Javascript, since all pages/files are known and statically available (at a known location). _(I'm not talking about dynamic enhancements)_

So, if a user switches off Javascript in the browser - the sites should still be useable.

If that's not the case - my understanding of static sites may be wrong ...

[manniL]

It will be usable, but not necessarily the whole page.
Plus, if JS is enabled, it will behave as an SPA nevertheless. The "traditional navigation" via a tags and full reloads is just a fallback.

[tiptronic]

For me it's not useable at all but the initial page (any links are pointing towards the root -> in case of the file:// protocal it's e.g. file:///docs). In Vue, I can adjust publicpath to the empty string to allow for that. Using nuxt.js that doesn't work.

But maybe you can quickly folow the 'Setup' here:
https://github.com/nuxt/nuxtjs.org

git clone https://github.com/nuxt/nuxtjs.org.git
cd nuxtjs.org/
yarn install
git clone https://github.com/nuxt/docs

and let me know how to change nuxt.config.js, so I can run it from the file-system (using file://) inside any folder - or using 'traditional navigation' (which is no problem when using Vue.js )

[pimlie]

Try to set router.base to ./, that works for me to use a static generated website in an electron app without a webserver.

[tiptronic]

@pimlie Did you try running directly from the file-system (without Electron)? Because that's what I was talking about...

[vampics]

+1

Have the same problem. Router base didnt work for us. We are using nuxt in full static mode and cant open the site with the file protocol. We already tried something with replacing in the webpack build but noting work well.

Our case is a bit tricky because of the use case that our complete site need to be exportable for local use with file protocol.