modbender
Sometimes snackbar is not showing in browser windows, no errors
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/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]_5nbgqfgcz7etuucnud57r6soki/node_modules/nuxt/dist/app/components/nuxt-root.vue:16:5" >
at <Default data-v-inspector="node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]_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/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]_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/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]_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/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]_5nbgqfgcz7etuucnud57r6soki/node_modules/nuxt/dist/app/components/nuxt-root.vue:16:5" >
at <App data-v-inspector="node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected][email protected]_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
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>
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.