Ant Design Vue Nuxt
Ant Design Vue モジュール for Nuxt
機能
- ✨ コンポーネントのオンデマンド自動インポート。
- ✨ @ant-design/icons-vueからのアイコンの自動インポート。
- ✨ メッセージ、通知、モーダルメソッドの自動インポート。
クイックセットアップ
@ant-design-vue/nuxtをプロジェクトに追加
npx nuxi@latest module add ant-design-vue
nuxt.config.tsのmodulesセクションに@ant-design-vue/nuxtを追加
export default defineNuxtConfig({
modules: [
'@ant-design-vue/nuxt'
],
antd:{
// Options
}
})
これで完了です！ Nuxtアプリでant-design-vueを使用できます ✨
使用方法
<script lang="ts" setup>
const handleMessage = () => {
message.info("This is a normal message");
}
</script>
<template>
<a-button @click="handleMessage">
button
</a-button>
</template>
Nuxt ドキュメントとプレイグラウンドの使用を参照してください。
オプション
components
- 型:
array| 'false'
Ant Design Vueから自動的にインポートされないコンポーネントがある場合は、ここにコンポーネント名を追加する必要があります。
例: ['Button']
imports
- 型:
array
Ant Design Vueからコンテンツを自動的にインポートする場合は、ここに追加できます。
icons
- 型:
array| 'false'
@ant-design/icons-vueから自動的にインポートされないコンポーネントがある場合は、ここにコンポーネント名を追加する必要があります。
extractStyle (1.4.1)
- 型:
boolean
ページのCSSちらつき問題を解決
CSSをオンデマンドで抽出して挿入します。デフォルトはfalseです。
<!-- If the extractStyle option is enabled, we can use a-extract-style on the outermost level of the template in app.vue -->
<template>
<a-extract-style>
<!-- Your page or component -->
</a-extract-style>
</template>
開発
# 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
# Build for production
npm run build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch
# Release new version
npm run release