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

<g-link> uses Intersection Observer 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

To link to ~/src/pages/About.vue use <g-link to="/about" />.

To link to external links you need to use the normal <a href="https://url"> tag.

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>
Property Default Description
to required Guide →
exact Guide →
active-class active Guide →
exact-active-class active--exact Guide →

Edit this page on GitHub