官网 ｜
安装指南 ｜
安装指南2 ｜
naive-ui-nuxt ｜

yarn add naive-ui   //^2.43.1 

1. nuxt.config.ts
build: { transpile: ['naive-ui', "vueuc"] },

2. app -> plugins -> naiveui.ts
//把以下代码写入naiveui.ts
import { setup } from '@css-render/vue3-ssr';
 
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()
            };
        };
    }
});

3. 按需引入
<template>
  <n-button>naive-ui</n-button>
</template>

<script setup>
  import { NButton } from 'naive-ui'
</script>