Vue USWDS integration for Nuxt.js
MIT License
Easy U.S. Web Design System (USWDS) integration for Nuxt.js.
Nuxt USWDS integrates the Vue USWDS library into Nuxt.js.
NuxtLink
for Vue USWDS component linking.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
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 ✨
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' |
# 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