Components

Pinx utilizes and integrates the comprehensive set of components provided by naive-ui. This component library offers a diverse range of UI elements that cater to a wide spectrum of use cases and application scenarios. By leveraging this robust component set, Pinx can effectively address various interface requirements and user interaction needs. The selection of components available in naive-ui is designed to encompass the majority of use cases, ensuring flexibility, consistency, and efficiency in developing user interfaces within the Pinx template.

It is possible to import the components in three different ways:

Import on Demand (Tree Shaking)

<template>
    <n-button>naive-ui</n-button>
</template>
<script setup>
    import { NButton } from "naive-ui"
</script>

Install Globally (Not Recommended)

import { createApp } from "vue"
import naive from "naive-ui"
const app = createApp(App)
app.use(naive)

Auto Import (unplugin-vue-components)

// vite.config.ts
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import AutoImport from "unplugin-auto-import/vite"
import Components from "unplugin-vue-components/vite"
import { NaiveUiResolver } from "unplugin-vue-components/resolvers"
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        AutoImport({
            imports: [
                "vue",
                {
                    "naive-ui": ["useDialog", "useMessage", "useNotification", "useLoadingBar"]
                }
            ]
        }),
        Components({
            resolvers: [NaiveUiResolver()]
        })
    ]
})

To the Naive-ui components, some exclusive components from Pinx have been added, which you can find in these directories:

• components/common : Components commonly used throughout the entire application.
• app-layouts/common : Support components for the layout.