nhsuk-frontend-vue

This is an unofficial port of nhsuk-frontend library in to a vue.js component library.

For previews and docs: Preview Page

NPM page: nhsuk-frontend-vue

Changelog: Changelog

Install

npm install nhsuk-frontend-vue

or

yarn add nhsuk-frontend-vue

Use

import { createApp } from 'vue';
import App from './App.vue';
import NhsukFrontendVue from 'nhsuk-frontend-vue';
import 'nhsuk-frontend-vue/nhsuk-frontend-vue.css';

const app = createApp(App);
app.use(NhsukFrontendVue);

If require router support, import router and add as option

import { createApp } from 'vue';
import App from './App.vue';
import NhsukFrontendVue from 'nhsuk-frontend-vue';
import 'nhsuk-frontend-vue/nhsuk-frontend-vue.css';
import router from './router';

const app = createApp(App);
app.use(NhsukFrontendVue, {router});

Then in vue components:

<template>
  <nhs-row>
    <nhs-col>
      <nhs-button>test button</nhs-button>
      ...
    </nhs-col>
  </nhs-row>
</template>

OR

Import each component individually

<template>
  <nhs-main>
    ...
  </nhs-main>
</template>

<script>
  import { defineComponent } from 'vue';
  import { NhsMain } from 'nhsuk-frontend-vue';

  export default defineComponent({
    components: {
      NhsMain
    }
  });
</script>

To build locally

git clone https://github.com/xLasercut/nhsuk-frontend-vue.git
cd nhsuk-frontend-vue
npm run build

The output files will be located in the dist folder

Running tests

This project uses backstop for screenshot tests

Backstop tests:

npm run backstop:test

License

NHS.UK frontend library MIT © NHS.UK frontend.