Property "$primevue" was accessed during render but is not defined on instance. in nuxt 3 RC

[shahriar350]

In nuxt 3 i've made a dropdown. but the dropdown menu does not work.
My Settings:

nuxt.config.ts
css: [
        'primevue/resources/themes/saga-blue/theme.css',
        'primevue/resources/primevue.css',
        'primeicons/primeicons.css'
    ]

<template>
  <div>
    hello world
    <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" />
  </div>
</template>

<script>
import Dropdown from 'primevue/dropdown';
export default {
  components: {
    Dropdown
  },
  data() {
    return {
      selectedCity: null,
      cities: [
        {name: 'New York', code: 'NY'},
        {name: 'Rome', code: 'RM'},
        {name: 'London', code: 'LDN'},
        {name: 'Istanbul', code: 'IST'},
        {name: 'Paris', code: 'PRS'}
      ]
    }
  }

}
</script>

but all CSS is working well like button but vue code is not working.
In nuxt 2 I need to make plugins but in the documentation, i did not see any plugins to add in nuxt 3.
But if I make a plugins like Vue plugins which is in your doc like this

import {createApp} from 'vue';
import App from './App.vue';
import PrimeVue from 'primevue/config';
const app = createApp(App);

app.use(PrimeVue);

, but there is no import App from './App.vue'; in nuxt. and it shows error.

In dropdown, when i click the dropdown menu, dropdown does not work (maybe js is not working or load properly) and show a error in console like this
[Vue warn]: Property "$primevue" was accessed during render but is not defined on instance.

[smorcuend]

@shahriar350 Take a view here: #1660

[shahriar350]

It works. Thank you so much.

Here is recommended settings:

plugins/primevue.js

import { defineNuxtPlugin } from '#app'
import PrimeVue from 'primevue/config'
import Button from 'primevue/button'

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(PrimeVue, { ripple: true })
    nuxtApp.vueApp.component('Button', Button)
    //other components that you need
})

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    css: [
        'primevue/resources/themes/saga-blue/theme.css',
        'primevue/resources/primevue.css',
        'primeicons/primeicons.css'
    ],
    build: {
        transpile: ['primevue']
    }
})

[mertsincan]

Duplicate of #2454 (comment)