Primevue dialog modal cant show in vue 3?

Question

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.

Fery1320 · Accepted Answer · 2023-04-25 04:21:52Z

2

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

answered Apr 25, 2023 at 4:21

Fery1320

1713 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tolbxela · Accepted Answer · 2023-04-24 16:28:28Z

0

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';

answered Apr 24, 2023 at 16:28

Tolbxela

5,2193 gold badges23 silver badges52 bronze badges

2 Comments

Fery1320 Over a year ago

Im newbie use Vue and and router needed to move pages, is there another way to setup it?

Tolbxela Over a year ago

vue-router is mainly for SPA. For your code you don't need it.

Collectives™ on Stack Overflow

Primevue dialog modal cant show in vue 3?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related