skip to Main Content

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


  1. Chosen as BEST ANSWER

    I found the problem!

    app.use(router, PrimeVue)
    

    it should be

    app.use(router).use(PrimeVue)
    

    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


  2. 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

    import './assets/main.css'
    import '/node_modules/primeflex/primeflex.css';
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search