Get started

Using GOV.UK Vue with Nuxt

GOV.UK Vue works with Nuxt - in fact, the documentation you're reading now is generated with Nuxt.

Install GOV.UK Vue

To add GOV.UK Vue to your Nuxt project, install it from npm:

npm install govuk-vue

Then add it as a Nuxt plugin by creating /plugins/govuk-vue.js with this content:

import { GovUkVue } from 'govuk-vue'

export default defineNuxtPlugin((nuxtApp) => {

Install GOV.UK Frontend

Follow the instructions in the main installation guide to install GOV.UK Frontend.

If you need to copy static assets like fonts and images from GOV.UK Frontend, you can use vite-plugin-static-copy as shown in the main instructions. Configure the plugin in nuxt.config.ts:

import { viteStaticCopy } from 'vite-plugin-static-copy'

export default defineNuxtConfig({
  vite: {
    plugins: [
        targets: [
            src: 'node_modules/govuk-frontend/govuk/assets/*',
            dest: 'assets'

Using static assets with Nuxt's prerenderer

If you're using Nuxt's prerenderer to generate a static site with nuxt generate, the prerenderer will not pick up these assets, so you will need to copy them into the output directory afterwards. You can use the copyfiles package for this:

npm install copyfiles --save-dev

Add a script to your package.json which runs copyfiles after nuxt generate - for example:

"generate": "nuxt generate && npx copyfiles -V -u 3 \".nuxt/dist/server/assets/**\" \".output/public\""

You can then generate your static site with

npm run generate

Update your HTML template

The main installation guide describes changes you should make to your HTML template.

In Nuxt, the quickest way to make these changes is to use the app.head option in nuxt.config.ts:

export default defineNuxtConfig({
  app: {
    head: {
      htmlAttrs: {
        class: 'govuk-template'
      bodyAttrs: {
        class: 'govuk-template__body js-enabled'
      meta: [
        { name: 'viewport', content: 'width=device-width, initial-scale=1, viewport-fit=cover'},
        { name: 'theme-colour', content: '#0b0c0c'}
      link: [
        { rel: 'shortcut icon', sizes: '16x16 32x32 48x48', href: '/assets/images/favicon.ico', type: 'image/x-icon' },
        { rel: 'mask-icon', href: '/assets/images/govuk-mask-icon.svg', color: '#0b0c0c' },
        { rel: 'apple-touch-icon', sizes: '180x180', href: '/assets/images/govuk-apple-touch-icon-180x180.png' },
        { rel: 'apple-touch-icon', sizes: '180x180', href: '/assets/images/govuk-apple-touch-icon-180x180.png' },
        { rel: 'apple-touch-icon', sizes: '167x167', href: '/assets/images/govuk-apple-touch-icon-167x167.png' },
        { rel: 'apple-touch-icon', href: '/assets/images/govuk-apple-touch-icon.png' }

For more information on configuring <head>, including setting the <title>, see the Nuxt guidance on SEO and meta.

Using the components

GOV.UK Vue components should now be available in your Nuxt app. Follow the steps in the main installation guide to check everything's working.

Using components in Nuxt Content Markdown files

If you're using Nuxt Content, you can use MDC syntax to include GOV.UK Vue components in Markdown files. However, you should be careful passing content in slots, because the Content module will render the slot content as Markdown before passing it to the GOV.UK Vue component. This can result in unexpected tags being added - for example <p> tags wrapping the slot content. To avoid this, use props instead of slots:

:gv-warning-text{icon-fallback-text="Rhybudd" text="Gallwch gael dirwy o hyd at £5,000 os na fyddwch yn cofrestru."}

You can also use normal HTML-style tags in Markdown content, as you would in Vue templates.

Known issues with SSR

There are a few known issues with server-side rendering (SSR). These are being tracked in the 'Improve SSR support' GitHub issue. If you find any other issues with SSR, please comment on the issue.