PrimeVue ToastService not loading correctly as a plugin in Nuxt3 RC3

[smorcuend]

I'm submitting a ... (check one with "x")

[X] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primevue/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=110

CodeSandbox Case (Bug Reports)
https://codesandbox.io/s/sharp-bush-nch4u5

Current behavior

Not working with Nuxt3 and Vue3 setup syntax:

app.vue

...
<ClientOnly>
  <Toast />
</ClientOnly>
...

plugins/primevue.js

import { defineNuxtPlugin } from "#app";
import PrimeVue from "primevue/config";
import ToastService from "primevue/toastservice";
import Toast from "primevue/toast";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(PrimeVue);
  nuxtApp.vueApp.use(ToastService);
  nuxtApp.vueApp.component("Toast", Toast);
});

If i try to use Composition API => $toast is not published

my component:

<script lang="ts" setup>
const { $toast } = useNuxtApp()
console.log($toast) // undefined
<script>

If i try to use Service provider => No PrimeVue Toast provided!

my component:

<script lang="ts" setup>
import { useToast } from "primevue/usetoast";
const toast = useToast()
console.log(toast) // throw Error
<script>

usetoast.esm.js:8 Uncaught (in promise) Error: No PrimeVue Toast provided!
    at useToast (usetoast.esm.js:8:15)

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Vue version: 3 RC3

• PrimeVue version: 3.12.6

• Browser: [all ]

[smorcuend]

Workaround:

plugins/primevue.js

import { defineNuxtPlugin } from "#app";
import PrimeVue from "primevue/config";
import ToastService from "primevue/toastservice";
import Toast from "primevue/toast";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(PrimeVue);
  nuxtApp.vueApp.use(ToastService);
  nuxtApp.vueApp.component("Toast", Toast);

  return {
    provide: {
      toast: nuxtApp.vueApp.config.globalProperties.$toast
    }
  }
});

[mertsincan]

Hi,

I researched this issue and found a PR related to it in Vue core. It looks like it broke access to globalProperties variables and vnode's instances within those custom directives.
vuejs/core@f44087e

For now, you can try defineExpose method in <script> tag. Exp;

<script setup>
import { usePrimeVue } from "primevue/config";

const $primevue = usePrimeVue();
defineExpose({
     $primevue
})
</script>

Similar issues;
#2468
#2454
...
Best Regards,