Same domain links outside Vuepress application

Question

Our main product is hosted on https://ourproduct.com/ and our Vuepress based docs app is hosted on https://ourproduct.com/docs.

Now from one of our MD files we want to point to a child page of our product application i.e. https://ourproduct.com/features

we can't provide absolute URLs here as this link is environment specific.

When I use [Explore Features] (/features), Vuepress adds basepath of docs app to this link and I am not able to navigate to our features page.

Any cleaner solution? Or I am missing something straight forward here??

Answer 1

Here is how I achieved it:

• Enabled custom Vue Components in config.js using plugin
• Created custom Vue component in .vuepress/components directory
• This component accepts href & target as prop & use those for creating a plain anchor with absolute URL by apending location.origin.
• Used it in my md files

<domain-relative-url href="/features">Features<domain-relative-url>