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

目录

[1. 安装 Naive UI 模块](#1. 安装 Naive UI 模块)

[2. 安装自动按需引入模块](#2. 安装自动按需引入模块)

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

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

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

[6. 随便复制 NaiveUI 官网示例代码测试查看效果](#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-ignore
        const originalRender = nuxtApp.ssrContext.renderMeta?.bind(nuxtApp.ssrContext) || (() => ({}));
        
        nuxtApp.ssrContext.renderMeta = () => {
            // @ts-ignore
            const result = originalRender();
            // @ts-ignore
            const 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 官网示例代码测试查看效果