Skip to content
This repository has been archived by the owner on Oct 7, 2023. It is now read-only.

huntersofbook/naive-ui-nuxt

Repository files navigation

This package has been deprecated







alt text

Naive UI Nuxt 3 Module


Version Downloads License Github Stars Discord

@huntersofbook/naive-ui-nuxt npm


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

Thanks

Thanks to @07akioni, this project is heavily inspired by naive-ui-nuxt-demo.

Thanks to @tobiasdiez, this project is inspired by some code structure. z

Sponsors

sponsors

License

MIT License © 2022-PRESENT productdevbook