Way of specifying base URL for static site generation (github pages)

[WiIIiam278]

Describe the feature

Hi there,
Nuxt v2 had an option to specify the base page route, meaning that during generation a base url path would be applied before asset path references. The generator would prepend links to assets in the output HTML with a base url -- like so: (base_url)/_nuxt/asset-path.foo

At the moment, attempting to deploy to standard GitHub pages without using a custom URL doesn't work, as this option no longer exists; the generated files will always reference /_nuxt/asset-path.foo -- and GitHub pages by default mandate a base (the repository name). In effect, this seems to make deploying to GitHub pages no longer possible (unless you use a custom URL, of course); referenced assets will always 404 as it attempts to access them at https://owner.github.io/_nuxt/foo, instead of https://owner.github.io/repository/_nuxt/foo

Could this option either be re-implemented, or some alternate way of specifying this be found? Or perhaps this option does exist in some form, and I just couldn't find it in the documentation 😅?

Regards

Additional information

• Would you be willing to help implement this feature?
• Could this feature be implemented as a module?

Final checks

• Read the contribution guide.
• Check existing discussions and issues.

[danielroe]

You can do this with app.baseURL - https://v3.nuxtjs.org/api/configuration/nuxt.config#baseurl.

[WiIIiam278]

You can do this with app.baseURL - https://v3.nuxtjs.org/api/configuration/nuxt.config#baseurl.

Would an addition to the deployment page about this (or, specifically, using this with GitHub pages) under the static hosting section be a good idea, do you think? The Nuxt v2 docs had this (and a whole page about GitHub pages, actually) -- and I think GH Pages is probably the most common use case for static deployment :)

[danielroe]

Definitely welcome 🙏 Probably would need to be a PR to https://github.com/unjs/nitropack.

[tristan-smith]

(whoops, meant to tag @danielroe ) @WiIIiam278 it seems like this works great in dev mode, but I'm having trouble with yarn generate.

I pulled down the nuxt 3 content example app, and added this to the config:

Then I ran yarn generate and opened the .output/public/index.html file:

You can see the bundled js has the baseURL prepended in the resulting html, but the "_payload.js" does not have the base URL.

Am I missing something? The v3 docs are pretty confusing for baseURL. I also tried adding the nitro baseURL option, as well as setting the NUXT_APP_BASE_URL environment variable at build time.

Thanks for any tips

---

Edit: looks like there may be a PR coming: nuxt/framework#7984

[WiIIiam278]

@tristan-smith I'm softly ashamed to admit I sort of gave up with this setting after painfully debugging it for a few hours! It seems oddly inconsistent with what it does and doesn't decide to prepend baseUrl with in html links. (Note that I'm using npm run generate, not yarn)

On my project, for example, I had a component with an object referencing an svg file in the assets directory, alongside a video with a referencing a file in the public directory. That component was then present on the main page. Generation did as it should and added it to the page -- and also correctly created and prepended the component script and images with the correct baseUrl, but did not do so with the video or images referenced by the component.

The only thing I may suggest is playing around with the ssr option and trying with both true and false. So yeah, it's a little weird.

Sorry that's not much help! I ended up giving up completely and just using a custom domain--I suspect static generation is still fairly immature as it was only added in a recent release candidate.

[danielroe]

There is a pending PR to resolve that: nuxt/framework#7984

[mrleblanc101]

@danielroe Should app.baseURL be appended to relative links added via useHead ?
For exemple, I have this.
But none of the links work when I generate since they dont have the base prefixed, should I hardcode it ?

useHead({
    title: 'NeoBigben',
    link: [
        {
            rel: 'icon',
            href: '/favicon.svg',
            type: 'image/svg+xml',
        },
        {
            rel: 'apple-touch-icon',
            sizes: '180x180',
            href: '/apple-touch-icon.png',
        },
        {
            rel: 'manifest',
            href: '/manifest.webmanifest',
        },
    ],
});

I had to change to this:

useHead({
    title: 'NeoBigben',
    link: [
        {
            rel: 'icon',
            href: '/neobigben/favicon.svg',
            type: 'image/svg+xml',
        },
        {
            rel: 'apple-touch-icon',
            sizes: '180x180',
            href: '/neobigben/apple-touch-icon.png',
        },
        {
            rel: 'manifest',
            href: '/neobigben/manifest.webmanifest',
        },
    ],
});