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