【Nuxt3】安装 Naive UI 按需自动引入组件

 

目录

 

1. 安装 Naive UI 模块

2. 安装自动按需引入模块

3. 项目根目录下新建一个plugins目录，在目录下新建naive-ui.ts，将以下代码复制到naive-ui.ts中

4. (如未报错则忽略此项) 如果以上代码中process报错，执行下方命令

5.将以下代码复制到项目根目录下的nuxt.config.ts中 （主要查看复制 vite 中配置）

6. 随便复制 NaiveUI 官网示例代码测试查看效果

---

1. 安装 Naive UI 模块

npm i naive-ui

2. 安装自动按需引入模块

npm i unplugin-vue-components

3. 项目根目录下新建一个plugins目录，在目录下新建naive-ui.ts，将以下代码复制到naive-ui.ts中
 

import { setup } from '@css-render/vue3-ssr';
import { defineNuxtPlugin } from '#app';export default defineNuxtPlugin((nuxtApp) => {if (process.server && nuxtApp.ssrContext) {const { collect } = setup(nuxtApp.vueApp || {});// @ts-ignoreconst originalRender = nuxtApp.ssrContext.renderMeta?.bind(nuxtApp.ssrContext) || (() => ({}));nuxtApp.ssrContext.renderMeta = () => {// @ts-ignoreconst result = originalRender();// @ts-ignoreconst headTags = result?.headTags || "";return {headTags: headTags + collect()};};}
});

4. (如未报错则忽略此项) 如果以上代码中process报错，执行下方命令

npm add @types/node

5.将以下代码复制到项目根目录下的nuxt.config.ts中 （主要查看复制 vite 中配置）

// https://nuxt.com/docs/api/configuration/nuxt-config
import Components from 'unplugin-vue-components/vite';
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';export default defineNuxtConfig({compatibilityDate: '2025-05-15',devtools: { enabled: false },build: {// 配置构建选项},components: true,modules: [// 配置使用的 Nuxt.js 模块],plugins: [// 配置使用的插件],router: {// 配置路由选项},vite: {plugins: [Components({resolvers: [NaiveUiResolver()] // 自动注册 components 目录下的组件})],ssr: {noExternal: ['moment','naive-ui','@juggle/resize-observer','@css-render/vue3-ssr']},envDir: '~/env', // 指定环境变量目录optimizeDeps: {include: ['@vicons/ionicons5']}}
});

6. 随便复制 NaiveUI 官网示例代码测试查看效果