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`	`布林值`	`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