@huntersofbook/naive-ui-nuxt NPM

alt text

Naive UI Nuxt 3 Module

@huntersofbook/naive-ui-nuxt

This module huntersofbook team created.

Naive UI integration for Nuxt

Features

Zero-config required
Auto-import component and imports
Tailwind CSS support

Setup

pnpm add @huntersofbook/naive-ui-nuxt

yarn add @huntersofbook/naive-ui-nuxt

npm add @huntersofbook/naive-ui-nuxt

Nuxt Config

export default defineNuxtConfig({
  modules: [
    '@huntersofbook/naive-ui-nuxt'
  ],

  // Optionally, specify global naive-ui config
  // Supports options that are normally set via 'n-config-provider'
  // https://www.naiveui.com/en-US/os-theme/docs/customize-theme
  naiveUI: {
    themeOverrides: {
      common: {
        primaryColor: '#ff0000',
        primaryColorHover: '#8b0000'
      }
    }
  }
})

Composables

<script setup lang="ts">
import { darkTheme } from 'naive-ui'
</script>

<template>
  <NConfigProvider :theme="darkTheme">
    <NGlobalStyle />
    <div>
      Nuxt module playground!
      <NButton>Default</NButton>
    </div>
  </NConfigProvider>
</template>

How to fix naive-ui nuxt conflict with tailwindcss Preflight style ?

The real reason is that tailwind has a preset default style of Preflight, which is friendly to new projects, but when we integrate tailwindcss into existing projects, it will cause style conflicts, we only need to disable this tailwindcss Preflight The style settings in your tailwind.config.js or tailwind.config.cjs

module.exports = {
  corePlugins: {
    preflight: false,
  }
}

Refer to tailwind css official website for explanation： https://tailwindcss.com/docs/preflight#disabling-preflight

💻 Development

Clone this repository
Enable Corepack using corepack enable (use npm i -g corepack for Node.js < 16.10)
Install dependencies using pnpm install
Stub module with pnpm dev:prepare
Run pnpm dev to start playground in development mode