This is a minimal example of how to start using GOV.UK Vue.
A live demo is available at govuk-vue.github.io/govuk-vue-minimal-example.
Clone this repo then install dependencies:
npm installStart the dev server:
npm run devThis server will hot reload, so any changes you make will be shown instantly.
npm run buildYour app will be compiled to static files in the dist directory.
This project was set up using the following steps.
npm create vue@3For this example all optional add-ons, including TypeScript support, were disabled. You can enable these if you need them.
cd your-project-name
npm installcreate-vue creates some files we don't need. Delete src/assets/base.css, src/assets/logo.svg and the components directory.
npm install govuk-vue
Import GovUkVue in main.js:
import { GovUkVue } from 'govuk-vue'Add the GovUkVue plugin to the app. Change the last line of main.js from:
createApp(App).mount('#app')to:
createApp(App).use(GovUkVue).mount('#app')In index.html, replace <head> with the following:
<head>
<meta charset="utf-8">
<title>GOV.UK Vue Minimal Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#0b0c0c">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="shortcut icon" sizes="16x16 32x32 48x48" href="/assets/images/favicon.ico" type="image/x-icon">
<link rel="mask-icon" href="/assets/images/govuk-mask-icon.svg" color="#0b0c0c">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/images/govuk-apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/assets/images/govuk-apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/assets/images/govuk-apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" href="/assets/images/govuk-apple-touch-icon.png">
</head>Add the govuk-template class to <html> and govuk-template__body js-enabled govuk-frontend-supported to <body>.
Install GOV.UK Frontend:
npm install govuk-frontend --save-devSass is required to compile the GOV.UK Frontend styles:
npm install sass --save-devRename src/assets/main.css to main.scss and update the import at the top of main.js.
Update content of main.scss to:
@import "node_modules/govuk-frontend/dist/govuk/all";Delete everything else in main.scss
GOV.UK Frontend includes the GDS Transport font and some images (like the favicon and the crest in the footer). By default it looks
for these in the /assets/ path under the server root. We need to make these assets available under this
path, so we use the vite-plugin-static-copy plugin to
automatically copy these files.
Install the plugin:
npm install vite-plugin-static-copy --save-devIn vite.config.js, import the plugin:
import { viteStaticCopy } from 'vite-plugin-static-copy'and add the following to the plugins option:
viteStaticCopy({
targets: [
{
src: 'node_modules/govuk-frontend/dist/govuk/assets/*',
dest: 'assets'
}
]
})You'll now be able to use GOV.UK Vue components anywhere in your app. The plugin makes all the components available globally, so you don't need to import components individually.
App.vue is the entry point of our app. See src/App.vue for an example of how to set up a standard GOV.UK page using
GvHeader, GvFooter and GOV.UK layout classes.
Run the app with npm run dev.