Nuxt USWDS

Easy U.S. Web Design System (USWDS) integration for Nuxt.js.

Introduction

Nuxt USWDS integrates the Vue USWDS library into Nuxt.js.

Features

Auto import all Vue USWDS components.
Automatically uses NuxtLink for Vue USWDS component linking.
Supports all Vue USWDS options.

Quick Setup

Add nuxt-uswds dependency to your project. You will also need to install vue-uswds as it is a peer dependency.

# Using npm
npm install nuxt-uswds vue-uswds

# Using pnpm
pnpm add nuxt-uswds vue-uswds

# Using yarn
yarn add nuxt-uswds vue-uswds

Add nuxt-uswds to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: ['nuxt-uswds'],
});

That's it! You can now use all Vue USWDS components in your Nuxt app ✨

Options

The module supports the following options. They can be added to your nuxt.config.ts module configuration:

{
  modules: [
    [
      'nuxt-uswds',
      {
        // Modules options...
      },
    ],
  ];
}

Name	Type	Default	Description
`autoImportBaseComponents`	`boolean`	`true`	Enabled Nuxt's auto-import of all Vue USWDS base components. You should only need to turn disable this option if you have a name conflict with Vue USWDS's `BaseLink` or `BaseHeading` internal components.
`autoImportComponents`	`boolean`	`true`	Enabled Nuxt's auto-import of all regular Vue USWDS components.
`baseComponentPrefix`	`string`	`''`	If you have a name conflict with Nuxt.js's auto importing of Vue USWDS's `BaseLink` or `BaseHeading` internal components, you can set an additional prefix with this option.
`componentPrefix`	`string`	`''`	All Vue USWDS components are prefixed with `Usa`. This should prevent any name conflicts with Nuxt.js's auto importing of components. If you encounter an issues however, you can add an additional prefix with this option.
`vueUswds`	`object`	`{}`	Any Vue USWDS options to want to use. The `routerComponentName` option is automatically set to 'NuxtLink'

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Type check
npm run types

# Run Vitest
npm run test
npm run test:watch