The <g-link> component is available globally in all your Pages, Templates & Components. It's a wrapper for router-link from Vue Router.

How it works

<g-link> uses IntersectionObserver to prefetch linked pages when link is in view. This makes browsing around in a Gridsome site very fast because the clicked page is already downloaded.

How to use

The following example links to the src/pages/About.vue page:

<g-link to="/about/">About us</g-link>

Always add a trailing slash when linking to other internal pages. Because the HTML file for the page is a index.html file in a directory. Paths generated for nodes already include a trailing slash.

You do not need to include the pathPrefix option in the <g-link> path.

To link to external links you need to use the normal tag:

<a href=""></a>

To link to #anchor links you need to use the normal <a href="#anchor"> tag.


<!-- Link with string path -->
<g-link to="/about/">About us</g-link>

<!-- Link with variable path -->
<g-link :to="node.path">Read more</g-link>
torequiredGuide →
exactGuide →
active-classactiveGuide →
exact-active-classactive--exactGuide →

Edit this page on GitHub