naive-ui/demo/pages/docs/import-on-demand/enUS/index.md

Import on Demand (Tree Shaking)

Naive UI supports tree shaking for components, locales and themes.

By default the component theme is light, locale is enUS, and no extra imports are needed.

For more info about theming, see Customizing Theme.

Import Directly

<script>
  import { defineComponent } from 'vue'
  import { NConfigProvider, NInput, NDatePicker, NSpace } from 'naive-ui'
  // theme
  import { createTheme, inputDark, datePickerDark } from 'naive-ui'
  // locale & dateLocale
  import { zhCN, dateZhCN } from 'naive-ui'

  export default defineComponent({
    components: {
      NConfigProvider,
      NInput,
      NDatePicker,
      NSpace
    },
    setup() {
      return {
        darkTheme: createTheme([inputDark, datePickerDark]),
        zhCN,
        dateZhCN
      }
    }
  })
</script>

<template>
  <n-config-provider :theme="darkTheme" :locale="zhCN" :date-locale="dateZhCN">
    <n-space vertical>
      <n-input />
      <n-date-picker />
    </n-space>
  </n-config-provider>
</template>

<style>
  body {
    background: black;
  }
</style>

Auto Import

If you develop using SFC, you can use the unplugin-vue-components plugin to automatically import components on demand.

The plugin will automatically parse the components used in the template and import the components.

// vite.config.ts
import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [NaiveUiResolver()]
    })
  ]
})

Note: This method does not work with composables such as useMessage, and you still need to import the corresponding composable manually. For example import { useMessage } from 'naive-ui'.

Install on Demand Globally

import { createApp } from 'vue'
import {
  // create naive ui
  create,
  // component
  NButton
} from 'naive-ui'

const naive = create({
  components: [NButton]
})

const app = createApp()
app.use(naive)

After the installation, you can use the components you installed in SFC like this.

<template>
  <n-button>naive-ui</n-button>
</template>