Sometimes snackbar is not showing in browser windows, no errors

[chapus]

Describe the bug When I start the application in development mode or in production mode, when I enter it for the first time, the snackbar does not appear on the screen. If I refresh the page, it works correctly.

when I run pnpm run dev, i see a VUE WARN about nuxtsnackbar module.

ℹ Vite server warmed up in 4304ms                                                                                                                       11:17:59 AM

 WARN  [Vue warn]: Extraneous non-props attributes (data-v-inspector) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.
  at <Vue3Snackbar top=false bottom=true left=false  ... >
  at <NuxtSnackbar >
  at <VMain class="bg-main" >
  at <VThemeProvider >
  at <VApp class="rounded-md" data-v-inspector="node_modules/.pnpm/nuxt@3.13.2_@parcel+watcher@2.4.1_@types+node@22.5.5_ioredis@5.4.1_magicast@0.3.5_rollup@4.21_5nbgqfgcz7etuucnud57r6soki/node_modules/nuxt/dist/app/components/nuxt-root.vue:16:5" >
  at <Default data-v-inspector="node_modules/.pnpm/nuxt@3.13.2_@parcel+watcher@2.4.1_@types+node@22.5.5_ioredis@5.4.1_magicast@0.3.5_rollup@4.21_5nbgqfgcz7etuucnud57r6soki/node_modules/nuxt/dist/app/components/nuxt-root.vue:16:5" ref=Ref< undefined > >
  at <LayoutLoader key="default" layoutProps= { 'data-v-inspector':
   'node_modules/.pnpm/nuxt@3.13.2_@parcel+watcher@2.4.1_@types+node@22.5.5_ioredis@5.4.1_magicast@0.3.5_rollup@4.21_5nbgqfgcz7etuucnud57r6soki/node_modules/nuxt/dist/app/components/nuxt-root.vue:16:5',
  ref:
   RefImpl {
     dep:
      Dep {
        computed: undefined,
        version: 0,
        activeLink: undefined,
        subs: undefined,
        subsHead: undefined },
     __v_isRef: true,
     __v_isShallow: false,
     _rawValue: undefined,
     _value: undefined } } name="default" >
  at <NuxtLayoutProvider layoutProps= { 'data-v-inspector':
   'node_modules/.pnpm/nuxt@3.13.2_@parcel+watcher@2.4.1_@types+node@22.5.5_ioredis@5.4.1_magicast@0.3.5_rollup@4.21_5nbgqfgcz7etuucnud57r6soki/node_modules/nuxt/dist/app/components/nuxt-root.vue:16:5',
  ref:
   RefImpl {
     dep:
      Dep {
        computed: undefined,
        version: 0,
        activeLink: undefined,
        subs: undefined,
        subsHead: undefined },
     __v_isRef: true,
     __v_isShallow: false,
     _rawValue: undefined,
     _value: undefined } } key="default" name="default"  ... >
  at <NuxtLayout data-v-inspector="node_modules/.pnpm/nuxt@3.13.2_@parcel+watcher@2.4.1_@types+node@22.5.5_ioredis@5.4.1_magicast@0.3.5_rollup@4.21_5nbgqfgcz7etuucnud57r6soki/node_modules/nuxt/dist/app/components/nuxt-root.vue:16:5" >
  at <App data-v-inspector="node_modules/.pnpm/nuxt@3.13.2_@parcel+watcher@2.4.1_@types+node@22.5.5_ioredis@5.4.1_magicast@0.3.5_rollup@4.21_5nbgqfgcz7etuucnud57r6soki/node_modules/nuxt/dist/app/components/nuxt-root.vue:16:5" >
  at <NuxtRoot>

Maybe the warning is something about this: https://vuejs.org/guide/components/attrs#disabling-attribute-inheritance

Desktop (please complete the following information):

• OS: WSL2
• Browser Chrome
• Version 128.0.6613.138 (Official Build) (64-bit)

Additional context SSR logs

[modbender]

Ok, let me check.

[chapus]

I was able to replicate this case. I have three different layouts in my application, in the app.vue file if I leave NuxtSnackbar inside NuxtLayout when the layout is changed they stop appearing. But if I leave NuxtSnackbar outside of NuxtLayout they always appear.

app.vue with strange behaviour

  <div>
    <NuxtLayout>
      <NuxtLoadingIndicator color="#79A0D0" />
      <NuxtPage />
      <NuxtSnackbar />
    </NuxtLayout>
  </div>
</template>

app.vue working

  <div>
    <NuxtLayout>
      <NuxtLoadingIndicator color="#79A0D0" />
      <NuxtPage />
    </NuxtLayout>
    <NuxtSnackbar />
  </div>
</template>

[chapus]

And looking the DOM inside dev tools, i see when render new DOM with NuxtSnackbar inside NuxtLayout it renders again and thats the moment where the messages do not appear on browser window. But outside NuxtLayout do not rerender the element and it works.