chat-web/src/components/common/NaiveProvider.vue

<script setup lang="ts">
import { defineComponent, h } from 'vue'
import {
    NDialogProvider,
    NLoadingBarProvider,
    NMessageProvider,
    NNotificationProvider,
    useDialog,
    useLoadingBar,
    useMessage,
    useNotification
} from 'naive-ui'

function registerNaiveTools() {
    window.$loadingBar = useLoadingBar()
    window.$dialog = useDialog()
    window.$message = useMessage()
    window.$notification = useNotification()
}

const NaiveProviderContent = defineComponent({
    name: 'NaiveProviderContent',
    setup() {
        registerNaiveTools()
    },
    render() {
        return h('div')
    }
})
</script>

<template>
    <NLoadingBarProvider>
        <NDialogProvider>
            <NNotificationProvider>
                <NMessageProvider>
                    <slot />
                    <NaiveProviderContent />
                </NMessageProvider>
            </NNotificationProvider>
        </NDialogProvider>
    </NLoadingBarProvider>
</template>