Vue3中PrimeVue Dialog无法显示，报错this.$primevue未定义

问题场景 #

使用 Vue@3.2.47 和 primevue@3.27.0，按钮能正常渲染，但点击按钮显示Dialog时出现错误：

Uncaught (in promise) TypeError: can't access property "config", this.$primevue is undefined

相关代码如下：

main.js #

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import PrimeVue from 'primevue/config';
import './assets/main.css'

// primevue-css
import "primevue/resources/themes/lara-light-indigo/theme.css";
import "primevue/resources/primevue.min.css";
import 'primeicons/primeicons.css';
import '/node_modules/primeflex/primeflex.css';

const app = createApp(App)
app.use(router, PrimeVue)
app.mount('#app')

Home.vue #

<script setup>
    import { ref } from "vue";

    // components
    import Button from 'primevue/button';
    import Dialog from 'primevue/dialog';

    // function
    const visible = ref(false);
</script>

<template>
    <section class="about">
        <div class="wrapper">
            <h1>This is an home page</h1>
            <br/>
            <div class="btn-wrapper">
                <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
            </div>
        </div>
    </section>
    <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </Dialog>
</template>

错误原因 #

app.use() 每次只能注册一个插件，你把 router 和 PrimeVue 放在同一个 app.use() 调用中时，第二个参数会被当成第一个插件（router）的配置项，而非第二个插件。这导致PrimeVue没有被正确挂载到Vue实例上，组件无法获取到 $primevue 对象。

解决步骤 #

修改 main.js 中的插件注册代码，将两个插件分开注册：

const app = createApp(App)
// 分开注册router和PrimeVue
app.use(router)
app.use(PrimeVue)
app.mount('#app')

这样PrimeVue就能被正确初始化，组件可以正常访问 $primevue，Dialog就能正常显示了。

内容的提问来源于stack exchange，提问作者Fery1320