https://github.com/vuecomponent/ant-design-vue-nuxt
https://github.com/vuecomponent/ant-design-vue-nuxt
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/vuecomponent/ant-design-vue-nuxt
- Owner: vueComponent
- License: mit
- Created: 2023-05-30T02:39:12.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-11T09:47:26.000Z (about 1 year ago)
- Last Synced: 2025-06-01T16:38:45.921Z (6 months ago)
- Language: TypeScript
- Size: 354 KB
- Stars: 80
- Watchers: 2
- Forks: 8
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Ant Design Vue Nuxt
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]
[Ant Design Vue](https://www.antdv.com) module for [Nuxt](https://nuxt.com/)
- [✨ Release Notes](/CHANGELOG.md)
## Features
- ✨ Automatically import components on demand.
- ✨ Automatically import icons from [@ant-design/icons-vue](https://github.com/ant-design/ant-design-icons/tree/master/packages/icons-vue).
- ✨ Automatically import of message, notification and Modal methods.
## Quick Setup
1. Add `@ant-design-vue/nuxt` dependency to your project
```bash
npx nuxi@latest module add ant-design-vue
```
2. Add `@ant-design-vue/nuxt` to the `modules` section of `nuxt.config.ts`
```js
export default defineNuxtConfig({
modules: [
'@ant-design-vue/nuxt'
],
antd:{
// Options
}
})
```
That's it! You can now use ant-design-vue in your Nuxt app ✨
## Usage
[Online Playground](https://stackblitz.com/~/github.com/antdv-pro/antdv-nuxt-starter)
```vue
const handleMessage = () => {
message.info("This is a normal message");
}
button
```
Reference [Nuxt documentation](https://nuxt.com/docs/guide/directory-structure/components) and [playground](./playground/app.vue) use.
## Options
### components
* Type: `array` | 'false'
If there are components that are not imported automatically from Ant Design Vue, you need to add the component name here.
e.g.`['Button']`
### imports
* Type: `array`
If you wish to add automatically import content from Ant Design Vue, you can add it here.
### icons
* Type: `array` | 'false'
If there are components that are not imported automatically from @ant-design/icons-vue, you need to add the component name here.
### extractStyle (1.4.1)
* Type: `boolean`
> Solve page css flicker problem
Extracts and injects css on demand, defaults to false
```vue
```
## Development
```bash
# 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
```
[npm-version-src]: https://img.shields.io/npm/v/@ant-design-vue/nuxt/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/@ant-design-vue/nuxt
[npm-downloads-src]: https://img.shields.io/npm/dm/@ant-design-vue/nuxt.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/@ant-design-vue/nuxt
[license-src]: https://img.shields.io/npm/l/@ant-design-vue/nuxt.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/@ant-design-vue/nuxt
[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
[nuxt-href]: https://nuxt.com