Welsh Revenue Authority Component Library

Vue component library created by Welsh Revenue Authority

Installation

Dependencies:

• Vue 3
• maska

Install,

npm install @wra-gov/vue-components

Usage

Default import

main.js,

import { createApp } from "vue";
import App from "./App.vue";
import Wra from "@wra-gov/vue-components";

const app = createApp(App);

// Global registration of all components
app.use(Wra);

app.mount("#app");

Named imports

Options API:

*.vue,

<script>
  import WraButton from "@wra-gov/vue-components";

  export default {
    components: {
      WraButton
    }
  };
</script>

Composition API:

*.vue,

<script setup>
  import { WraButton } from "@wra-gov/vue-components";
</script>

...

Nuxt usage

Create a plugin in /plugins/component-library.js,

import WraComponents from "@wra-gov/vue-components";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(WraComponents);
});

Tailwind Usage

By default registering the component library imports the CSS variables.

However, to use the colours the component library provides in Tailwind helper classes like this,

<div class="bg-wra-blue"></div>

The component library's Tailwind stylesheet must be imported. The instructions are created for Tailwind 4+. The CSS file must be the file imported by index.html

tailwind.css / index.css/ style.css

@import "tailwindcss";
@import "@wra-gov/vue-components/tailwind.css";

Documentation

Storybook documentation

Licence and Copyright

WRA component library is available under Open Government 3.0 licence