Nuxt USWDS

Nuxt.js 用の簡単な米国 Web デザインシステム (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.config.ts の modules セクションに nuxt-uswds を追加します。

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`	すべての通常の Vue USWDS コンポーネントの Nuxt による自動インポートを有効にします。
`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