I use [email protected] and [email protected]
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>
When i click the button to show dialog, got error message "Uncaught (in promise) TypeError: can’t access property "config", this.$primevue is undefined"
I’ve been looking for it, it says it comes from the node module, but I’ve re-installed it many times, the results are still the same. Is there a way for this?
if the node module has a problem but the button still renders.
2
Answers
I found the problem!
it should be
app.use() expects the plugin as the first argument, and optional plugin options as the second argument.
https://vuejs.org/api/application.html#app-use
The code is ok and works. Check your builder and node setup.
Here is the working playground with your code.
I have only deleted the vue router, since it is not used and a couple of css files