NaivePlus

A component library based on Vue3 and NaiveUI

Get Started

Rapid Development

A configuration-driven approach that lets every UI element be defined through options.

Minimal Code

Embrace the principle of minimal abstraction and the least code, completing tedious CRUD in seconds.

Best Practices

Best practice code is provided so every developer can use it the right way.

Quick Start

1. Install naive-ui

naive-plus is built on top of naiveUIopen in new window

npm i naive-ui -D

2. Install naive-plus

npm i naive-plus -D

3. Install unplugin

Use unplugin-vue-components and unplugin-auto-import to enable on-demand import and auto-import.

npm install -D unplugin-vue-components unplugin-auto-import

4. On-demand Import

import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';

import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'

import { NaivePlusResolver } from 'naive-plus/resolver'

export default {
  plugins: [
    // ...
    AutoImport({
       imports: ['vue'],
    }),
    Components({
      resolvers: [
        NaiveUiResolver(),
        // On-demand import
        NaivePlusResolver(),
      ],
    }),
  ],
};

5. Usage

<np-button>Button</np-button>