# Introduction

Vue USWDS component library

This is a front end component library whose aim is to develop Vue.js (opens new window) implementations of the design patterns defined by the United States Web Design System (USWDS) (opens new window).

The primary goal of this library is to document and provide common UI components that can be included in other projects that adhere to or are based off of the USWDS, removing a significant amount of overhead UI development from such projects.

This library attempts to follow the conventions laid down by Bootstrap (opens new window), as these seem entirely sensible!

# Install

To install, you need to add uswds-vue itself and addiationally you'll need the uswds styles (but not the uswds javascript).


# With yarn
yarn add bootstrap
yarn add uswds-vue 

# With npm
npm i bootstrap
npm i uswds-vue

1
2
3
4
5
6
7
8

Then you can import globally (for example in your main.js file);


// Import bootstrap, or import in your head for SSR builds
import 'bootstrap'

// Import the vue component library
import { UswdsVue } from 'uswds-vue';
Vue.use(UswdsVue);

// Or import individual components, e.g.;
import { UsCard } from 'uswds-vue';
Vue.use(UsCard);

1
2
3
4
5
6
7
8
9
10
11
12

To impoprt the uswds styles, you can add this to you index.html file;

<link rel="stylesheet" href="~uswds/dist/css/uswds-vue.min.css">

Or in your sass files;

@import "~uswds-vue/dist/uswds-vue.css";

# Customize with SASS

Support for SASS is baked in. To use, import the scss style sheets from USWDS and uswds-vue;

@import "~uswds-vue/src/styles/uswds-vue.scss";

# Fontawesome

uswds-vue makes use of, and includes, the free version of fontawesome (opens new window), future versions will include the ability to decouple to decrease the build size.

Responsive Breakpoints →