OverlayPanel not displaying

[erlebach]

I am trying to get the OverlayPanel demo included on Primevue working on Chrome in the Composition API and am having serious difficulties.

First, the button, with code:

Code: Select all

       <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" />

I see the button. But when I click it, I get the following error:

Code: Select all

Uncaught (in promise) TypeError: Cannot read property 'config' of undefined
    at Proxy.containerClass (overlaypanel.esm.js:245)
    at ComputedRefImpl.reactiveEffect [as effect] (reactivity.esm-bundler.js:71)
    at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js:893)
    at Object.get [as containerClass] (runtime-core.esm-bundler.js:3200)
    at eval (overlaypanel.esm.js:274)
    at Proxy.renderFnWithContext (runtime-core.esm-bundler.js:1243)
    at Proxy.eval (runtime-core.esm-bundler.js:2314)
    at renderComponentRoot (runtime-core.esm-bundler.js:1286)
    at componentEffect (runtime-core.esm-bundler.js:5361)
    at reactiveEffect (reactivity.esm-bundler.js:71)

The demo can be found at https://primefaces.org/primevue/showcase/#/overlaypanel

Any help will be greatly appreciated. At this time, I consider myself an intermediate user of Vue with a pretty good understanding.

[erlebach]

I solved my own problem. I had not noticed that I had to also include the following two lines in main.js:

Code: Select all

 solved the problem. I had to add the following lines to main.js: 
import PrimeVue from "primevue/config"; // Why this line?
app.use(PrimeVue);

I do not believe that this was stated in the instructions on the PrimeVue site.

.