### Build and Run Naive UI Project
Source: https://github.com/tusen-ai/naive-ui/blob/main/playground/ssr/readme.md
Executes the build scripts and starts the project server. Assumes global webpack installation. The server will be accessible at localhost:8086.
```bash
./pre-build.sh
./build.sh
node dist/server.js
# browse localhost:8086
```
--------------------------------
### Basic Naive UI UMD Integration
Source: https://github.com/tusen-ai/naive-ui/blob/main/demo/pages/docs/umd/enUS/index.md
This example demonstrates how to load Vue and Naive UI from unpkg and mount a simple application. It shows the correct setup for using the global 'naive' object provided by the UMD build.
```html
```
### Response
N/A (Client-side Integration)
### Error Handling
N/A
```
--------------------------------
### Globally Install Naive UI Components for On-Demand Usage
Source: https://github.com/tusen-ai/naive-ui/blob/main/demo/pages/docs/import-on-demand/enUS/index.md
Illustrates how to globally install Naive UI and register specific components (e.g., NButton) using `create` and `app.use()`. This approach makes the specified components available throughout the application without explicit imports in every file, while still benefiting from tree shaking if only a subset of components is registered.
```javascript
import {
// create naive ui
create,
// component
NButton
} from 'naive-ui'
import { createApp } from 'vue'
const naive = create({
components: [NButton]
})
const app = createApp()
app.use(naive)
```
```html
naive-ui
```
--------------------------------
### Install Naive UI with npm
Source: https://github.com/tusen-ai/naive-ui/blob/main/build/loaders/test/test.md
Installs the Naive UI library as a development dependency in your project using npm. This is the first step before importing and using the library's components.
```bash
npm install --save-dev naive-ui
```
--------------------------------
### Install Naive UI and Dependencies
Source: https://github.com/tusen-ai/naive-ui/blob/main/demo/pages/docs/installation/enUS/index.md
Commands to install the Naive UI library and the recommended font package using npm. These are required dependencies for setting up the UI framework in a Vue 3 project.
```bash
npm i -D naive-ui
npm i -D vfonts
```
--------------------------------
### Install Naive UI and SSR Dependencies
Source: https://github.com/tusen-ai/naive-ui/blob/main/demo/pages/docs/vite-ssge/enUS/index.md
Installs the Naive UI library and the necessary `@css-render/vue3-ssr` package for server-side rendering support. This is a prerequisite for using Naive UI in SSG/SSE environments.
```bash
# pnpm
pnpm i naive-ui @css-render/vue3-ssr
# npm
npm i naive-ui @css-render/vue3-ssr
```
--------------------------------
### Basic Grid Setup
Source: https://github.com/tusen-ai/naive-ui/blob/main/src/grid/demos/zhCN/index.demo-entry.md
Demonstrates the fundamental usage of the n-grid component. Ensure n-grid-item is used as a direct child.
```vue
```
--------------------------------
### Basic Upload Example
Source: https://github.com/tusen-ai/naive-ui/blob/main/src/upload/demos/enUS/index.demo-entry.md
Demonstrates the fundamental usage of the Upload component for file uploads.
```vue
Click or drag file to this area to upload
```
--------------------------------
### Dialog Setup and Usage
Source: https://github.com/tusen-ai/naive-ui/blob/main/src/dialog/demos/enUS/index.demo-entry.md
Explains the prerequisite of wrapping the application with NDialogProvider and how to use the useDialog hook to create dialogs.
```APIDOC
## Dialog Setup
### Description
To use the dialog functionality, you must wrap the component where dialog methods are called within an `n-dialog-provider`. Then, use the `useDialog` hook to access the dialog API.
### Setup Example
```html
```
### Usage Example
```js
import { useDialog } from 'naive-ui'
import { defineComponent } from 'vue'
// content component
export default defineComponent({
setup() {
const dialog = useDialog()
return {
warning() {
dialog.warning(options)
}
}
}
})
```
```
--------------------------------
### English Changelog Example
Source: https://github.com/tusen-ai/naive-ui/blob/main/CONTRIBUTING.md
Example of an English changelog entry, requiring a period at the end of the description.
```markdown
- Some changes, period needed.
```
--------------------------------
### Using useMessage Outside Setup
Source: https://github.com/tusen-ai/naive-ui/blob/main/src/message/demos/enUS/index.demo-entry.md
Instructions on how to access the message API globally by mounting it to the window object.
```APIDOC
## Using useMessage Outside Setup
### Description
To use the message API outside of a Vue setup function, you must mount the instance returned by `useMessage` to the global window object within your top-level setup.
### Implementation Steps
1. Wrap your application with `n-message-provider`.
2. In your top-level component setup, assign `useMessage()` to `window.$message`.
3. Ensure the provider is mounted before calling the global message methods.
### Example
```javascript
// In your top-level component setup
window.$message = useMessage();
// In any other file
window.$message.success('Message content');
```
```
--------------------------------
### Globally Install All Naive UI Components in Vue App
Source: https://github.com/tusen-ai/naive-ui/blob/main/demo/pages/docs/usage-sfc/enUS/index.md
Illustrates how to globally install all Naive UI components for a Vue application. This method is not recommended as it bypasses tree-shaking and can lead to larger bundle sizes.
```javascript
import naive from 'naive-ui'
import { createApp } from 'vue'
const app = createApp(App)
app.use(naive)
```
--------------------------------
### Chinese Changelog Example
Source: https://github.com/tusen-ai/naive-ui/blob/main/CONTRIBUTING.md
Example of a Chinese changelog entry, demonstrating that periods should be omitted.
```markdown
- 一些变更，不要加句号
```
--------------------------------
### Install SSR dependencies
Source: https://github.com/tusen-ai/naive-ui/blob/main/demo/pages/docs/vitepress/enUS/index.md
Install the required @css-render/vue3-ssr package to handle style collection during server-side rendering.
```bash
# npm
npm install --save-dev @css-render/vue3-ssr
# pnpm
pnpm install --save-dev @css-render/vue3-ssr
```
--------------------------------
### Changelog Structure Example
Source: https://github.com/tusen-ai/naive-ui/blob/main/CONTRIBUTING.md
Shows the expected structure for changelogs, including versioning and sections like 'Feats' and 'Fixes'.
```markdown
# CHANGELOG
## NEXT_VERSION
### Feats
your changelog
### Fixes
```
--------------------------------
### Setup Loading Bar Provider and Injection
Source: https://github.com/tusen-ai/naive-ui/blob/main/src/loading-bar/demos/enUS/index.demo-entry.md
Demonstrates how to wrap the application content with the n-loading-bar-provider and how to use the useLoadingBar composable within a Vue component to trigger the loading bar.
```html
```
```javascript
import { useLoadingBar } from 'naive-ui'
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
const loadingBar = useLoadingBar()
return {
loading() {
loadingBar.start()
}
}
}
})
```
--------------------------------
### Install Webpack Globally
Source: https://github.com/tusen-ai/naive-ui/blob/main/playground/ssr/readme.md
Installs webpack and webpack-cli globally on your system. These are essential build tools for managing project dependencies and bundling code.
```bash
npm install --global webpack webpack-cli
```
--------------------------------
### Import Icon Component
Source: https://github.com/tusen-ai/naive-ui/blob/main/demo/pages/docs/installation/enUS/index.md
Example of how to import an icon component from the @vicons/fluent library for use within a Naive UI application.
```javascript
import ArrowDownload16Regular from '@vicons/fluent/ArrowDownload16Regular'
```
--------------------------------
### Basic Tag Usage
Source: https://github.com/tusen-ai/naive-ui/blob/main/src/tag/demos/enUS/index.demo-entry.md
Demonstrates the basic usage of the Tag component. No specific setup is required beyond importing the component.
```vue
DefaultPrimarySuccessWarningError
```
--------------------------------
### Using useModal Hook in Vue Component Setup
Source: https://github.com/tusen-ai/naive-ui/blob/main/src/modal/demos/enUS/index.demo-entry.md
Shows how to import and use the `useModal` hook within a Vue component's `setup` function to create and manage modal instances. It illustrates calling `modal.create` with title and content options.
```javascript
import { useModal } from 'naive-ui'
import { defineComponent } from 'vue'
// content
export default defineComponent({
setup() {
const modal = useModal()
return {
showModal() {
modal.create({
title: 'Title',
content: 'Content'
})
}
}
}
})
```
--------------------------------
### Import Naive UI Button in Vue SFC (Composition API with Setup Script)
Source: https://github.com/tusen-ai/naive-ui/blob/main/demo/pages/docs/usage-sfc/enUS/index.md
Shows how to import and use the NButton component from Naive UI within a Vue Single File Component using the Composition API with a setup script. This is a concise way to import components.
```html
naive-ui
```
--------------------------------
### Download Functionality Example
Source: https://github.com/tusen-ai/naive-ui/blob/main/src/upload/demos/enUS/index.demo-entry.md
Shows how to enable and handle file downloads directly from the upload component's file list. This is useful for providing access to previously uploaded or associated files.
```vue
```
--------------------------------
### Use Naive UI Message Outside Setup
Source: https://github.com/tusen-ai/naive-ui/blob/main/src/message/demos/enUS/index.demo-entry.md
Demonstrates how to access and use the Naive UI message API globally by mounting it to the window object. This approach requires the message provider to be set up at the top level and ensures the message instance is available before use. It's an alternative to using `createDiscreteApi`.
```html
```
```javascript
import { useMessage } from 'naive-ui'
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
window.$message = useMessage()
}
})
```
```javascript
export function handler() {
window.$message.success(
'Cause you walked hand in hand With another man in my place'
)
}
```
--------------------------------
### Setup Dialog Provider and API
Source: https://github.com/tusen-ai/naive-ui/blob/main/src/dialog/demos/enUS/index.demo-entry.md
Demonstrates how to wrap the application with n-dialog-provider and utilize the useDialog hook within a Vue component to trigger dialogs.
```html
```
```javascript
import { useDialog } from 'naive-ui'
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
const dialog = useDialog()
return {
warning() {
dialog.warning(options)
}
}
}
})
```
--------------------------------
### Install Naive UI Nuxt Module
Source: https://github.com/tusen-ai/naive-ui/blob/main/demo/pages/docs/nuxtjs/enUS/index.md
Commands to add the Naive UI module to a Nuxt project using npm or pnpm package managers.
```bash
# npm
npx nuxi module add nuxtjs-naive-ui
# pnpm
pnpm dlx nuxi module add nuxtjs-naive-ui
```
--------------------------------
### Notification Setup and Usage
Source: https://github.com/tusen-ai/naive-ui/blob/main/src/notification/demos/enUS/index.demo-entry.md
To use the notification component, you must wrap your application or relevant section with `n-notification-provider`. Then, use the `useNotification` hook to access the notification API for creating and managing notifications.
```APIDOC
## Notification Setup and Usage
### Description
To use the notification component, you must wrap your application or relevant section with `n-notification-provider`. Then, use the `useNotification` hook to access the notification API for creating and managing notifications.
### Example Usage
```html
```
```javascript
import { useNotification } from 'naive-ui'
import { defineComponent } from 'vue'
// content
export default defineComponent({
setup() {
const notification = useNotification()
return {
warning() {
notification.warning({
content: 'This is a warning message.'
})
}
}
}
})
```
```
--------------------------------
### Create Naive UI Modal
Source: https://github.com/tusen-ai/naive-ui/blob/main/src/modal/demos/enUS/index.demo-entry.md
This JavaScript function demonstrates how to create a modal using the globally accessible `$modal` instance. It requires that `window.$modal` has been initialized in the setup function of a parent component. The function takes configuration options for the modal's title and content.
```javascript
export function handler() {
// You need to ensure that window.$modal = modal has been executed in setup
window.$modal.create({
title: 'Title',
content: 'Content'
})
}
```
--------------------------------
### Full Library Build
Source: https://github.com/tusen-ai/naive-ui/blob/main/AGENTS.md
Performs a full build of the Naive UI library for distribution.
```bash
pnpm run build:package
```
--------------------------------
### Chinese API Table Example
Source: https://github.com/tusen-ai/naive-ui/blob/main/CONTRIBUTING.md
Example of a Chinese API table entry, showing that descriptions should not include periods.
```markdown
| 名称 | 类型 | 默认值 | 说明 | 版本 |
| --- | --- | --- | --- | --- |
| example | `any` | `undefined` | 描述不要加句号 | NEXT_VERSION |
```
--------------------------------
### Build Site
Source: https://github.com/tusen-ai/naive-ui/blob/main/CONTRIBUTING.md
Builds the project's documentation site. If the build fails, consider running `git clean -fdx` first.
```bash
pnpm run build:site
```
--------------------------------
### Highlight Component Demos
Source: https://github.com/tusen-ai/naive-ui/blob/main/src/highlight/demos/enUS/index.demo-entry.md
Available demonstration files for the Highlight component.
```text
basic.vue
style.vue
case-sensitive.vue
component.vue
```
--------------------------------
### English API Table Example
Source: https://github.com/tusen-ai/naive-ui/blob/main/CONTRIBUTING.md
Example of an English API table entry, including the required period in the description.
```markdown
| Name | Type | Default | Description | Version |
| --- | --- | --- | --- | --- |
| example | `any` | `undefined` | Need period. | NEXT_VERSION |
```
--------------------------------
### Dynamic Input Demos
Source: https://github.com/tusen-ai/naive-ui/blob/main/src/dynamic-input/demos/zhCN/index.demo-entry.md
A collection of demonstration files showcasing various configurations and use cases for the DynamicInput component.
```vue
basic.vue
pair.vue
custom.vue
form.vue
move.vue
custom-action.vue
rtl-debug.vue
create-debug.vue
```
--------------------------------
### Using useMessage Hook in Vue Setup
Source: https://github.com/tusen-ai/naive-ui/blob/main/src/message/demos/enUS/index.demo-entry.md
The `useMessage` hook from 'naive-ui' allows you to access the message API within your Vue component's setup function. You can then call methods like `message.warning()` to display messages. Ensure `n-message-provider` is an ancestor component.
```javascript
import { useMessage } from 'naive-ui'
import { defineComponent } from 'vue'
// content
export default defineComponent({
setup() {
const message = useMessage()
return {
warning() {
message.warning('...')
}
}
}
})
```
--------------------------------
### Tabs with Animation Debug
Source: https://github.com/tusen-ai/naive-ui/blob/main/src/tabs/demos/zhCN/index.demo-entry.md
A debug example for tab animation effects.
```vue
Tab Content 1
Tab Content 2
```
--------------------------------
### Spacing Example
Source: https://github.com/tusen-ai/naive-ui/blob/main/CONTRIBUTING.md
Illustrates the requirement for a space between Chinese and Latin characters.
```text
星之 star 卡比 kirby
```
--------------------------------
### Tabs in Modal Debug
Source: https://github.com/tusen-ai/naive-ui/blob/main/src/tabs/demos/zhCN/index.demo-entry.md
A debug example showing tabs used within a modal dialog.
```vue
Tab Content 1
Tab Content 2
```
--------------------------------
### Use TuSimple Theme with Naive UI
Source: https://github.com/tusen-ai/naive-ui/blob/main/demo/pages/docs/experimental-features/enUS/index.md
Demonstrates how to integrate the TuSimple theme into a Naive UI application. It shows the usage of TsConfigProvider for theme configuration and the danger-typed APIs for dialogs and messages.
```html
```
--------------------------------
### Customizing DatePicker Slots
Source: https://github.com/tusen-ai/naive-ui/blob/main/src/date-picker/demos/enUS/index.demo-entry.md
Example of how to use slots to customize the footer or action buttons in a DatePicker component.
```vue
{{ text }}
```
--------------------------------
### Imperative Modal Creation
Source: https://github.com/tusen-ai/naive-ui/blob/main/src/modal/demos/enUS/index.demo-entry.md
How to set up the Modal provider and trigger modals from non-component files using the global window object.
```APIDOC
## POST /modal/create
### Description
Creates a new modal instance imperatively. Requires the NModalProvider to be mounted at the top level of the application.
### Method
POST
### Parameters
#### Request Body
- **title** (string) - Required - The title of the modal.
- **content** (string) - Required - The body content of the modal.
### Request Example
{
"title": "Title",
"content": "Content"
}
### Response
#### Success Response (200)
- **id** (string) - The unique identifier of the created modal instance.
#### Response Example
{
"id": "modal-123"
}
```
--------------------------------
### Using Naive UI with JSX
Source: https://github.com/tusen-ai/naive-ui/blob/main/demo/pages/docs/jsx/enUS/index.md
Demonstrates the recommended approach for importing and rendering Naive UI components inside a Vue defineComponent render function.
```APIDOC
## JSX Component Usage
### Description
This pattern shows how to import Naive UI components directly and use them within the render function of a Vue component.
### Usage Example
```javascript
import { NButton } from 'naive-ui'
import { defineComponent } from 'vue'
export default defineComponent({
render() {
return {{ default: () => 'Star Kirby' }}
}
})
```
```
--------------------------------
### Defining DatePicker Update Callbacks
Source: https://github.com/tusen-ai/naive-ui/blob/main/src/date-picker/demos/enUS/index.demo-entry.md
Example of how to implement the update callbacks for a DatePicker component to handle value changes.
```typescript
const handleUpdateValue = (value: number | null, formattedValue: string | null) => {
console.log('Value updated:', value);
console.log('Formatted value:', formattedValue);
};
const handleUpdateFormattedValue = (value: string | null, timestampValue: number | null) => {
console.log('Formatted value updated:', value);
};
```
--------------------------------
### Transfer Component Demos
Source: https://github.com/tusen-ai/naive-ui/blob/main/src/legacy-transfer/demos/enUS/index.demo-entry.md
List of available demonstration files for the legacy Transfer component.
```text
basic.vue
large-data.vue
size.vue
filterable.vue
```
--------------------------------
### Open Dev Server
Source: https://github.com/tusen-ai/naive-ui/blob/main/CONTRIBUTING.md
Opens the development server. Hot module reload may not work well; refresh the page if needed. Requires pnpm version 11.10.0 or above.
```bash
pnpm run dev
```
--------------------------------
### Get Current Page Data
Source: https://github.com/tusen-ai/naive-ui/blob/main/src/data-table/demos/enUS/index.demo-entry.md
Retrieves the data for the currently displayed page after all filters, sorters, and pagination have been applied.
```typescript
getCurrentPageData: () => RowData[]
```
--------------------------------
### Breadcrumb Component Demos
Source: https://github.com/tusen-ai/naive-ui/blob/main/src/breadcrumb/demos/enUS/index.demo-entry.md
Lists the available demo files for the Breadcrumb component. No specific setup is required to view these demos.
```vue
basic.vue
```
```vue
custom.vue
```
```vue
separator.vue
```
```vue
separator-per-item.vue
```
--------------------------------
### Run Tests
Source: https://github.com/tusen-ai/naive-ui/blob/main/CONTRIBUTING.md
Executes the test suite for the project.
```bash
pnpm run test
```
--------------------------------
### Commit Message Format Example
Source: https://github.com/tusen-ai/naive-ui/blob/main/AGENTS.md
Illustrates the Angular style commit message format used in the project, including type, scope, and subject.
```bash
feat(button): add ghost prop
fix(input): handle empty value correctly
docs: update contributing guide
```
--------------------------------
### Register Custom Highlight.js Language
Source: https://github.com/tusen-ai/naive-ui/blob/main/src/log/demos/enUS/index.demo-entry.md
To enable custom highlighting for logs, register a language with highlight.js. This example registers 'naive-log' to highlight numbers.
```html
```
--------------------------------
### Apply Dark Theme with NConfigProvider
Source: https://github.com/tusen-ai/naive-ui/blob/main/demo/pages/docs/customize-theme/enUS/index.md
Demonstrates how to wrap an application with NConfigProvider and apply the darkTheme object to enable dark mode.
```html
```
--------------------------------
### Table Component Demo Files
Source: https://github.com/tusen-ai/naive-ui/blob/main/src/table/demos/enUS/index.demo-entry.md
List of available demo files for the Table component.
```text
basic.vue
bordered.vue
size.vue
single-column.vue
single-line.vue
striped.vue
```
--------------------------------
### Carousel with Custom Dots
Source: https://github.com/tusen-ai/naive-ui/blob/main/src/carousel/demos/enUS/index.demo-entry.md
Customize the appearance of the navigation dots using the `dots` slot. This example shows how to render custom dot elements.
```vue
```
--------------------------------
### Configure Highlight.js for Naive UI Code Component
Source: https://github.com/tusen-ai/naive-ui/blob/main/src/code/demos/enUS/index.demo-entry.md
This snippet demonstrates how to configure the highlight.js library for the Naive UI Code component. It shows how to import highlight.js and register a language, then pass the configured hljs object to the n-config-provider. This is essential for enabling syntax highlighting in code blocks.
```html
```
--------------------------------
### Implement Naive UI Theme Editor
Source: https://github.com/tusen-ai/naive-ui/blob/main/demo/pages/docs/customize-theme/enUS/index.md
Shows how to import and integrate the NThemeEditor component to provide a visual interface for editing and exporting theme configurations.
```javascript
```
--------------------------------
### Configure Katex for Equation Component
Source: https://github.com/tusen-ai/naive-ui/blob/main/src/equation/demos/enUS/index.demo-entry.md
This snippet demonstrates how to integrate Katex with the Naive UI NConfigProvider. It imports the Katex library and its CSS, then passes the library instance to the provider to enable equation rendering.
```html
```
