一、安装

以下针对nuxt版本 v3.12.3 文档地址

使用 Nuxt Module

npm i -D naive-ui
npm install unplugin-auto-import --save-dev
npm install unplugin-vue-components -D
// 根据naive ui 官网步骤
// https://www.naiveui.com/zh-CN/os-theme/docs/nuxtjs
pnpm dlx nuxi module add nuxtjs-naive-ui

在 Nuxt 中使用自动引入

同样可以使用 unplugin-auto-import 插件来自动导入 API，使用 unplugin-vue-components 插件来按需自动加载组件。在这种情况下，nuxt.config.ts 会比上面的例子多几行配置。

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: ['nuxtjs-naive-ui'],
  vite: {
    plugins: [
      AutoImport({
        imports: [
          {
            'naive-ui': [
              'useDialog',
              'useMessage',
              'useNotification',
              'useLoadingBar'
            ]
          }
        ]
      }),
      Components({
        resolvers: [NaiveUiResolver()]
      })
    ]
  }
})

二、使用

页面组件中复制按钮代码，粘贴至nuxt页面中 pages/index.vue

<n-button type="success">
    Success
</n-button>

此时，页面中已经显示naive ui的按钮样式，这样子就成功了