@neatui/nuxt

A comprehensive UI component library for Nuxt 3, providing elegant and feature-rich components for modern web applications.

✨ Features

• 🚀 Nuxt 3 Ready: Native support for Nuxt 3 with SSR/SSG
• 📦 Auto Import: Components and composables auto-imported
• 🎨 Rich Components: 40+ carefully crafted components
• 📱 Mobile First: Responsive design for all screen sizes
• 🔧 TypeScript: Full TypeScript support
• 🎯 Tree Shaking: Import only what you need
• 🌙 Theme Support: Customizable themes and styling

📦 Installation

npm install @neatui/nuxt

🚀 Quick Start

Add @neatui/nuxt to your Nuxt configuration:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@neatui/nuxt'
  ],
  neatui: {
    // Module options
    theme: 'default',
    prefix: 'Neat'
  }
})

📖 Usage

Components are auto-imported, just use them in your templates:

<template>
  <div>
    <NeatInput v-model="value" placeholder="Enter text..." />
    <NeatButton @click="handleClick">Click me</NeatButton>
    <NeatSelect v-model="selected" :options="options" />
  </div>
</template>

<script setup>
const value = ref('')
const selected = ref('')
const options = [
  { label: 'Option 1', value: '1' },
  { label: 'Option 2', value: '2' }
]

const handleClick = () => {
  console.log('Button clicked!')
}
</script>

🔧 Configuration

// nuxt.config.ts
export default defineNuxtConfig({
  neatui: {
    // Theme configuration
    theme: 'default', // 'default' | 'dark' | 'custom'

    // Component prefix
    prefix: 'Neat', // Components will be <NeatButton>, <NeatInput>, etc.

    // CSS variables
    css: {
      // Custom theme variables
    },

    // Components to exclude from auto-import
    exclude: ['SomeComponent']
  }
})

📚 Documentation

For detailed documentation, examples, and API reference, visit: http://neatui.fekit.cn

🤝 Contributing

Contributions are welcome! Please read our contributing guidelines before submitting PRs.

📄 License

MIT License © xiaojunbo