# 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 uswds-vue uswds
# With npm
npm i uswds-vue uswds
2
3
4
5
Then you can import globally (for example in your main.js
file);
// 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);
2
3
4
5
6
7
8
9
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.