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-vueThen add it as a Nuxt plugin by creating /plugins/govuk-vue.js with this content:
import { GovUkVue } from 'govuk-vue'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(GovUkVue)
})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: [
viteStaticCopy({
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-devAdd 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 generateUpdate 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.