Naive UI

Language: JavaScript

UI Framework

Naive UI was created to provide developers with a component library that is fully typed with TypeScript, highly customizable, and optimized for Vue 3. It emphasizes modularity and allows importing only the components you need, reducing bundle size while maintaining a consistent design.

Naive UI is a Vue 3 component library that offers a complete, customizable, and TypeScript-friendly set of components for building modern web applications.

Installation

npm: npm install naive-ui

yarn: yarn add naive-ui

cdn: Not officially available via CDN; recommended to use npm or yarn.

manual: Install via npm/yarn and import the desired components in your Vue 3 project.

Usage

Naive UI provides a wide range of components including buttons, forms, tables, modals, notifications, inputs, and layout components. Components are highly customizable with props, slots, and themes.

Button usage

<template>
  <n-button type="primary">Click Me</n-button>
</template>

<script setup>
import { NButton } from 'naive-ui'
</script>

Displays a primary-styled button using Naive UI's `n-button` component.

Input component

<template>
  <n-input v-model:value="text" placeholder="Enter text"></n-input>
</template>

<script setup>
import { ref } from 'vue'
import { NInput } from 'naive-ui'
const text = ref('')
</script>

Creates an input field with reactive binding using Vue 3 `ref`.

Modal dialog

<template>
  <n-button @click="showDialog = true">Open Dialog</n-button>
  <n-modal v-model:show="showDialog" title="Dialog Title">
    This is a modal content.
  </n-modal>
</template>

<script setup>
import { ref } from 'vue'
import { NButton, NModal } from 'naive-ui'
const showDialog = ref(false)
</script>

Demonstrates opening and closing a modal dialog using Naive UI's `n-modal` component.

Table component

<template>
  <n-data-table :columns="columns" :data="tableData"></n-data-table>
</template>

<script setup>
import { NDataTable } from 'naive-ui'
const columns = [
  { title: 'Name', key: 'name' },
  { title: 'Age', key: 'age' }
]
const tableData = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 }
]
</script>

Displays tabular data using Naive UI's `n-data-table` component.

Notification

<script setup>
import { useNotification } from 'naive-ui'
const notification = useNotification()
function showNotification() {
  notification.success({
    title: 'Success',
    content: 'This is a success message.'
  })
}
</script>
<template>
  <n-button @click="showNotification">Notify</n-button>
</template>

Shows a notification using Naive UI's `useNotification` composable.

Error Handling

Component not rendered: Ensure the component is imported and registered properly in your Vue 3 project.

Reactivity not working: Use Vue 3 `ref` or `reactive` objects for two-way binding with v-model.

Styles not applied: Ensure your project has the Naive UI CSS imported (usually via component import).

Best Practices

Import only the components you need to reduce bundle size.

Leverage props and slots for customizing component content.

Use Vue 3 `ref` and `reactive` for binding component values.

Use Naive UI's built-in themes to maintain consistent styling.

Organize components in a modular way for maintainability.

Official Docs Github