Nuxt USWDS

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

简介

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

特性

自动导入所有 Vue USWDS 组件。
自动使用 NuxtLink 进行 Vue USWDS 组件链接。
支持所有 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`	`boolean`	`true`	启用 Nuxt 的自动导入所有 Vue USWDS 基础组件。如果您与 Vue USWDS 的 `BaseLink` 或 `BaseHeading` 内部组件存在名称冲突，您才需要禁用此选项。
`autoImportComponents`	`boolean`	`true`	启用 Nuxt 的自动导入所有常规 Vue USWDS 组件。
`baseComponentPrefix`	`string`	`''`	如果您与 Nuxt.js 自动导入 Vue USWDS 的 `BaseLink` 或 `BaseHeading` 内部组件存在名称冲突，您可以使用此选项设置其他前缀。
`componentPrefix`	`string`	`''`	所有 Vue USWDS 组件都以 `Usa` 为前缀。这应该可以防止与 Nuxt.js 自动导入组件发生任何名称冲突。但是，如果您遇到问题，您可以使用此选项添加其他前缀。
`vueUswds`	`object`	`{}`	您想使用的任何 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