What it is
Naive UI is a Vue 3 component library that offers a complete, customizable, and TypeScript-friendly set of components for building modern web applications.
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.
Installation
npm install naive-uiGetting started
The smallest useful thing you can do with it, and what each part means.
<template>
<n-button type="primary">Click Me</n-button>
</template>
<script setup>
import { NButton } from 'naive-ui'
</script><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>Advanced usage
Where the library earns its place over a simpler alternative.
<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><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><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>Errors and fixes
The failures you are most likely to hit, and what actually resolves them.
- 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.
Background
Why it exists, and what it was reacting to.
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.