Nuxt USWDS

用于 Nuxt.js 的简单美国网页设计系统 (USWDS) 集成。

简介

Nuxt USWDS 将 Vue USWDS 库集成到 Nuxt.js 中。

功能

自动导入所有 Vue USWDS 组件。
自动为 Vue USWDS 组件链接使用 NuxtLink。
支持所有 Vue USWDS 选项。

快速设置

将 nuxt-uswds 依赖项添加到您的项目中。您还需要安装 vue-uswds，因为它是一个对等依赖项。

# 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 添加到 nuxt.config.ts 的 modules 部分

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

就是这样！您现在可以在 Nuxt 应用中使用所有 Vue USWDS 组件 ✨

选项

该模块支持以下选项。它们可以添加到您的 nuxt.config.ts 模块配置中

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

名称	类型	默认值	描述
`autoImportBaseComponents`	`布尔值`	`true`	启用 Nuxt 自动导入所有 Vue USWDS 基础组件。仅当您与 Vue USWDS 的 `BaseLink` 或 `BaseHeading` 内部组件发生名称冲突时，才需要禁用此选项。
`autoImportComponents`	`布尔值`	`true`	启用 Nuxt 自动导入所有常规 Vue USWDS 组件。
`baseComponentPrefix`	`字符串`	`''`	如果您与 Nuxt.js 自动导入 Vue USWDS 的 `BaseLink` 或 `BaseHeading` 内部组件发生名称冲突，则可以使用此选项设置附加前缀。
`componentPrefix`	`字符串`	`''`	所有 Vue USWDS 组件都以 `Usa` 为前缀。这应该可以防止与 Nuxt.js 自动导入组件发生任何名称冲突。但是，如果您遇到问题，则可以使用此选项添加附加前缀。
`vueUswds`	`对象`	`{}`	您想要使用的任何 Vue USWDS 选项。`routerComponentName` 选项自动设置为 '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