Naive UI Integration & UnoCSS Atomic CSS in Nuxt 4

9天前

3.52K

A practical guide to integrating Naive UI with UnoCSS in Nuxt 4, covering automatic imports, SSR style collection, Vite build optimization, and code-splitting strategies to achieve zero manual imports and on-demand loading for an exceptional developer experience.

A practical guide to integrating Naive UI with UnoCSS in a large-scale Nuxt 4 production project

1. Why Naive UI + UnoCSS?

Dimension	Naive UI	UnoCSS
Role	Enterprise Vue 3 component library	On-demand atomic CSS engine
Bundle Size	Tree-shaking	Zero runtime
TypeScript	Native TS	Type-safe presets
Theming	Light/dark themes	Shares Naive UI variables
SSR	@css-render/vue3-ssr	Inline CSS, zero overhead

2. Naive UI Auto-Import

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'] }

Global Discrete API Injection

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

3. UnoCSS Architecture

unocss: { nuxtLayers: true }

CSS division of labor:

Naive UI theme variables → custom.scss
Global layout/reset → main.scss
Component styling → UnoCSS atomic classes

4. Vite Optimization

vite: {
    optimizeDeps: { include: ['naive-ui', 'vueuc', 'dayjs', 'dompurify', ...] },
    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'
                    }
                }
            }
        }
    }
}