CODEWITHSUNDEEP
vue.jsvuejs3primevue
StevenSiebert
StevenSiebert

Reputation: 1426

[Vue warn]: Property "$primevue" was accessed during render but is not defined on instance

Case and problem

I´m working on a private project with Vue.js and have the following error, which occurs when I´m trying to use the FileUpload component of PrimeVue:

[Vue warn]: Property "$primevue" was accessed during render but is not defined on instance.

Trying to use FileUpload in my component:

<template>
  <FileUpload name="demo[]" url="" @upload="onUpload" :multiple="true" :maxFileSize="1000000">
    <template #empty>
      <p>Drag and drop files to here to upload.</p>
    </template>
  </FileUpload>
</template>

The error only occurs, when I try to use FileUpload, if I remove it, the component works. FileUpload and PrimeVue are imported like they should, in the main.js:

import {createApp} from 'vue'
import router from "./router";
import store from "./store";
import PrimeVue from "primevue/config";
import PrimeIcons from "primevue/config";
import App from "./App";

const app = createApp(App);

app.use(
    router,
    PrimeVue,
    PrimeIcons,
    store
)

import 'primevue/resources/primevue.min.css'
import 'primeflex/primeflex.css'
import 'primeicons/primeicons.css'
import 'primevue/resources/themes/bootstrap4-dark-purple/theme.css'

import Card from "primevue/card";
import Menubar from "primevue/menubar";
import FileUpload from "primevue/fileupload";

app.component('Card', Card)
app.component('Menubar', Menubar)
app.component('FileUpload', FileUpload)

app.mount('#app')

What I tried so far

I searched this issue, but the only exact match for this error is an old closed issue on GitHub regarding the Calendar component: Issue #808. The error in this issue was caused because of the breaking change with the new PrimeVue API. This should not be my case, because it was introduced with V3.1 and I´m using V3.7.

In case the version is the problem I tested different versions of PrimeVue, like 3.1, 3.2, 3.3 but the error still shows. Thats why the actual dependencie is still the latest:

"primevue": "^3.7.0"

Maybe there is an already existing solution on SO or Google, but either my english is to bad to understand or I´m still to fresh at Vue.js to comprehend the problem.

Thanks in advance!

Upvotes: 2

Views: 4465

Answers (1)

tony19
tony19

Reputation: 138196

Your usage of app.use() is incorrect:

app.use(
    router,
    PrimeVue,
    PrimeIcons,
    store
)

app.use() takes only two arguments:

  • first argument: the Vue plugin
  • second argument: the plugin options

Also, PrimeIcons is not a plugin, so that should not be passed to app.use().

Solution

Pass each plugin individually to app.use():

app.use(router)
   .use(PrimeVue)
   //.use(PrimeIcons)   // not a plugin
   .use(store)

Upvotes: 6

Related Questions