Forked Naive UI Nuxt 3 Module

@daver987/naive-ui-nuxt

I forked 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 @daver987/naive-ui-nuxt

yarn add @daver987/naive-ui-nuxt

npm add @daver987/naive-ui-nuxt

Nuxt Config

export default defineNuxtConfig({
  modules: [
    '@daver987/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

License

MIT License © 2022-PRESENT productdevbook