Router Base Attribute does break hash links

Version

@nuxt/content: 1.5.3 nuxt: 2.14.0

Reproduction Link

https://codesandbox.io/s/autumn-https-x3oxj?file=/nuxt.config.js

You need do change the demo browser window to the subfolder https://x3oxj.sse.codesandbox.io/test/

Steps to reproduce

Set base attribute inside nuxt.config.js

  router: {
    base: "/test"
  },

Go to the about page and click on the footnote. You will the URL changing to the hash but removing the current page about. This does also happening with the other types of hash routes on the same page, eg. headings or content links.

What is Expected?

Hash should be added to current page url.

What is actually happening?

Hash will remove the current Url and will be added to the base.

PS: On discord I made a video and gif of the problem, because I’m trying to deploy my nuxt-content page inside a subfolder.

Cheers Hannes

[dumptyd]

This https://github.com/nuxt/content/issues/376#issuecomment-702193217 almost worked for me, except for the images as @b1rdhous3 pointed out.

This is how I solved that part:

yarn add rehype-urls

In nuxt.config.js

const path = require('path');
const baseURL = '/blog/';

export default {
  content: {
    markdown: {
      rehypePlugins: [
        ['rehype-urls', function addBaseToImages(url) {
          if (!baseURL) return;
          // replace '/images/' with whatever directory you're keeping them in
          if (url.href && url.href.startsWith('/images/')) return path.join(baseURL, url.href);
        }]
      ]
    }
  }
};

Nuxt masks this issue by adding a redirect rule from / from base in dev env, so unless you build and test the generated bundle you won’t find this issue until it’s deployed to prod. Might be a good idea to not add those redirects, but that’s for upstream.

[Atinux]

Hi there,

When using router.base, Nuxt adds a <base href="/test/">.

Sadly it looks like a known issue from the browser: https://rogerkeays.com/blog/using-base-href-with-anchors

You can use a Nuxt hook to remove the <base> tag, actually it fixes your issue but may introduces somes issues (you will have to check to make sure your websites works perfectly without it):

// nuxt.config.js
export default {
  hooks: {
    "vue-renderer:ssr:templateParams": function (params) {
      params.HEAD = params.HEAD.replace('<base href="/test/">', "");
    }
  }
}

Working sandbox: https://codesandbox.io/s/green-meadow-tquyq?file=/nuxt.config.js:838-1027