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