robsontenorio/vue-api-query

Documentation navigation: URLs for "On this page" go to the starting page instead of the respective section

Closed this issue ยท 9 comments

To reproduce: Visit for example Relationship Operations.

Expected behaviour: Opening links for "On this page" in a new window (on the right in widescreen layout) should link to their respective sections in the documentation.
Linking to specific headlines in the documentation is especially useful so we can send people to a specific section of a documentation page.

What actually happens: The navigation only works when left clicking. Opening the resulting URL in a new browser window leads back to the documentation's starting page. The underlying links are not working correctly.
Additionally, hovering over a headline and clicking the # also links back to the documentation's starting page.

Hi @Peter-Krebs! Yes, I'm aware of this issue. That is happening because the website domain is a subdirectory (/vue-api-query), because of Github Pages. I think a good idea would be reporting this issue in nuxt/content repo, which is the package I used for docs. Would you mind to open this issue there? It's related to theme-docs. Thanks in advance! :)

If Nuxt is the problem here, I'll browse their issues first.
Weird that linking to paragraphs was of nobody's concern there, maybe there is a basepath setting we need to set somewhere I'm guessing.

I'll report back as soon as I have time to do so. Thanks for the reply.

I had a quick look. You can set a base property. See this answer on StackOverflow:

Configure nuxt.js application to work in a subdirectory on a webserver

@Peter-Krebs Yes, the base property is already set in nuxt.config.js :)

When base property is set, the menu links work as intended, but anchors don't. That's why I think it's an issue in nuxt docs.

Check out the Nuxt documentation - it works there:
https://nuxtjs.org/docs/2.x/directory-structure/nuxt-config#env
You're directly sent to the #env headline instead of having to scroll down.

You probably also have to set baseURL as well, I'm guessing.

Yeah, it's working there, but I think it's because they are not making the documentation separated from the website. Their nuxt app home page is not a subdir like ours.

I currently don't have time to investigate more, but it must be a configuration issue, not a general issue with Nuxt.

I have found NuxtJS configuration docs, which are apparently hosted in a subdirectory /docs/2.x/:
https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-router#base

The above link even scrolls you to the "Base" headline. Can't we look at their configuration and apply it to ours?

@Peter-Krebs I found out that it's a known issue. See nuxt/content#376 (comment)

They have shown a temporary workaround, which seems to fix this issue, but may cause side effects.

hooks: {
    'vue-renderer:ssr:templateParams': function(params) {
      params.HEAD = params.HEAD.replace('<base href="/vue-api-query/">', '')
    }
  }

๐ŸŽ‰ This issue has been resolved in version 1.9.0 ๐ŸŽ‰

The release is available on:

Your semantic-release bot ๐Ÿ“ฆ๐Ÿš€