Govuk Vue

Overview

GOV.UK Vue (GV) is a Vue 3 component library for GOV.UK Frontend. It allows users to build Vue applications based on the GOV.UK Design System. It aims to provide all of the GOV.UK Frontend components as Vue components with all the options available in the original Nunjucks templates. However, it should be noted that the library is still in early development and is incomplete.

Features

• Accordion: Built
• Back link: Built
• Breadcrumbs: Built
• Button: Built
• Character count: Built
• Checkboxes: Not built
• Cookie banner: Not built
• Date input: Built
• Details: Built
• Error message: Built
• Error summary: Not built
• Fieldset: Built
• File upload: Not built
• Footer: Built
• Header: Built
• Inset text: Built
• Notification banner: Built
• Pagination: Built (todo: Accessibility test)
• Panel: Built
• Phase banner: Built
• Radios: Built (todo: Add way to pass items as a prop)
• Select: Built
• Skip link: Not built

Installation

To install the GV, you can follow these steps:

1. Install the package via npm: npm install @govuk-frontend/vue
2. Import the components in your Vue app:

import { Accordion, BackLink, Breadcrumbs } from '@govuk-frontend/vue';

3. Use the components in your templates.

Summary

GOV.UK Vue (GV) is a Vue 3 component library for building Vue applications based on the GOV.UK Design System. It aims to provide all the GOV.UK Frontend components as Vue components with the same options as the original Nunjucks templates. However, it’s important to note that the library is still in early development and may not be suitable for important projects. It currently has minimal documentation, but examples of the components can be found in the source file.