@daver987/naive-ui-nuxt
v1.0.2
Published
Nuxt 3 Naive UI library module fork
Downloads
11
Maintainers
Readme
Naive UI Nuxt 3 Module
@huntersofbook/naive-ui-nuxt
This module huntersofbook team created.
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
(usenpm 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
License
MIT License © 2022-PRESENT productdevbook