Nuxt3: Toast component causes duplicate content

[cmgriffing]

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

Vercel Case (Bug Reports)
Example: https://nuxt3-primevue-toast-issue.vercel.app
Source: https://github.com/cmgriffing/nuxt3-primevue-toast-issue

Current behavior
Depending on placement of the Toast component, content directly after it is duplicated when Nuxt3 hydrates the DOM. If Toast is the last element, it works as expected.

If the element is wrapped in a div, it also works. However, in a more complicated codebase it is not working this way. This "working" case may not be trustworthy.

Expected behavior
The content would not be duplicated

Minimal reproduction of the problem with instructions
The Example and Source listed above in Vercel Case show the exact issue and reproductions.

What is the motivation / use case for changing the behavior?
Duplicating content on hydration is not ideal.

Please tell us about your environment:
MacOS

• Nuxt version: 3.0.0-27491748.3186841
  The latest nuxt version (3.0.0-rc.0-27508091.78fcbcf) does not even build properly from the start.

• PrimeVue version: 3.12.5

• Browser: all

[cmgriffing]

The console shows this as a log:

runtime-core.esm-bundler.js:38 [Vue warn]: Hydration node mismatch:
- Client vnode: div 
- Server rendered DOM: <!--teleport end-->  
  at <Broken onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key="/broken" > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="page" mode="out-in" > 
  at <RouterView > 
  at <NuxtPage> 
  at <App key=1 > 
  at <NuxtRoot>

[cmgriffing]

I also created an issue over on the Nuxt3 github repo.
nuxt/nuxt#13793

It could be useful to share any cross-communication between the 2 projects, if needed.

[lacorde]

@cmgriffing I'd be glad to know how you managed to include ToastService in your nuxt3 project ?
I'm having issues with this.

Ended up doing it the following way, wrapping the Toast component in ClientOnly to avoid hydration errors :

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);
});

And then whenever/wherever I just use this.$toast, or useToast() for Composition API

mounted() {
  this.$toast.add({
    severity: "info",
    summary: "Info Message",
    detail: "Message Content",
    life: 10000,
  });
},

[cmgriffing]

We seem to have the same code except for the ClientOnly.
https://github.com/cmgriffing/nuxt3-primevue-toast-issue/blob/main/plugins/primevue.ts

I used the composition api, though.

I will double check my demo with ClientOnly. If that ends up being it, then maybe the only thing that needs to change is the Primevue documentation to show the ClientOnly wrapper.

[cmgriffing]

As a confirmation, ClientOnly fixes the issue.

I think a note about it in the Primevue docs would really help.

[smorcuend]

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)

[cmgriffing]

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)

@smorcuend

This seems unrelated to the bug that this Issue is referencing.
You should probably create a separate issue for the problem you are experiencing.

[smorcuend]

@cmgriffing you're right! ;)
Follow here: #2533

[mertsincan]

Fixed in #2602

[lipecss]

im still getting this same problem in current nuxt version only in prod