Get started

Using router-link or nuxt-link

Many components in GOV.UK Vue let you pass in a link destination with the href prop. Internally, these components use a normal <a> tag and add your href to it.

<gv-back-link href="/" />

If you're writing a single-page application (SPA) using Vue Router or Nuxt, you probably want to use router-link or nuxt-link instead, to avoid a page reload when navigating to a new route.

Every link-based component in GOV.UK Vue lets you change which component is used to render the link. Just import the component and pass it into the :component prop. The to prop, and any others you include, will be passed through to the component you've specified.

<script setup lang="ts">
import { NuxtLink } from '#components';
</script>

<template>
  <gv-back-link :component="NuxtLink" to="/example-page" />
</template>