Nuxt 4 中 Naive UI 整合與 UnoCSS 原子化樣式實戰

plugins: [
    AutoImport({
        imports: [{
            'naive-ui': ['createDiscreteApi', 'useOsTheme', 'useMessage', 'useDialog',
                'lightTheme', 'darkTheme', 'zhCN', 'zhTW', 'dateZhCN', 'dateZhTW']
        }]
    }),
    Components({ resolvers: [NaiveUiResolver()] })
]

{ "dependencies": { "@css-render/vue3-ssr": "^0.15.14" } }

build: { transpile: ['naive-ui', 'vueuc', 'radash'] }

const { message, dialog } = createDiscreteApi(['message', 'dialog'])
;(globalThis as any).__salongMessage = message

unocss: { nuxtLayers: true }

vite: {
    optimizeDeps: { include: ['naive-ui', 'vueuc', 'dayjs', ...] },
    build: {
        minify: 'esbuild', cssMinify: true, assetsInlineLimit: 4096,
        rollupOptions: {
            output: {
                manualChunks(id) {
                    if (id.includes('node_modules/@vue-office')) {
                        const pkg = id.match(/@vue-office\\/([^/]+)/)?.[1]
                        return pkg ? `vue-office-${pkg}` : 'vue-office'
                    }
                }
            }
        }
    }
}