` component has not been used.`\r\n\r\nthis is also in the same stackblitz. Layout works fine.\r\nExplain me please is this way to do layouts is worng and i have to use App.vue ?\n\n### Logs\n\n_No response_",[2074,2075],{"name":2003,"color":2004},{"name":1987,"color":1988},25005,"Href use svg symbol","2024-01-02T14:01:38Z","https://github.com/nuxt/nuxt/issues/25005",0.72846687,{"description":2082,"labels":2083,"number":2086,"owner":1993,"repository":1993,"state":1994,"title":2087,"updated_at":2088,"url":2089,"score":2090},"### Environment\n\n- Operating System: `Linux`\r\n- Node Version: `v16.14.2`\r\n- Nuxt Version: `3.0.0`\r\n- Nitro Version: `1.0.0`\r\n- Package Manager: `npm@8.5.5`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\n\n### Reproduction\n\nRepro link: https://github.com/Kasheftin/nuxt-ssr-reactivity-issue\r\nRepro steps:\r\n - go to http://localhost:3000/users/5604\r\n - console shows `[Vue warn]: Hydration text content mismatch in \u003Cdiv> (- Client: Navbar: users > #5604 - Server: Navbar: )`\n\n### Describe the bug\n\nAny application might consist on general/common components (side menu, navbar) and pages. Usually navbar have to match the page. In my [minimal repro](https://github.com/Kasheftin/nuxt-ssr-reactivity-issue) navbar shows breadcrumbs. There's a global variable (e.g. pinia/vuex or just a global ref) used for communication between the page and the navbar. \r\n\r\n[User details page](https://github.com/Kasheftin/nuxt-ssr-reactivity-issue/blob/master/pages/users/%5Bid%5D.vue) is responsible for loading the data using `useAsyncData` helper accordingly to `route.params.id` parameter. When the data is loaded, it updates the breadcrumbs variable:\r\n\r\n````typescript\r\nimport { breadcrumbs } from '@/stores/breadcrumbs'\r\nconst route = useRoute()\r\nconst id = computed(() => route.params.id)\r\nconst { data, refresh } = useAsyncData\u003C{id: number; title: string}>('user', async () => {\r\n const result = await fetch(`https://gorest.co.in/public/v2/users/${id.value}`)\r\n return await result.json()\r\n})\r\nwatch(id, refresh)\r\nwatch(() => [id.value, data.value?.id], () => {\r\n breadcrumbs.value = ['users', data.value?.title || '#' + id.value]\r\n}, { immediate: true })\r\n````\r\n\r\nThis works just fine on the client. \r\n\r\nHowever, there's an issue with SSR. It looks like anything that was rendered before the page (layout components or parent pages) stops being reactive at the point when user details is being received. Logging shows that `breadcrumbs` was updated correctly, every child component is being rendered correctly as well, but everything from the parent context does not respond to changes.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell\n[Vue warn]: Hydration text content mismatch in \u003Cdiv>:\r\n- Client: Navbar: users > #5604\r\n- Server: Navbar: \r\n at \u003CUsers onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \r\n at \u003CAnonymous key=\"/users\" routeProps= {Component: {…}, route: {…}} pageKey=\"/users\" ... > \r\n at \u003CAnonymous > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CApp key=1 > \r\n at \u003CNuxtRoot>\n```\n",[2084,2085],{"name":2003,"color":2004},{"name":1987,"color":1988},15605,"Rectivity lost / hydration mismatch in ssr for parent component","2023-01-19T18:24:53Z","https://github.com/nuxt/nuxt/issues/15605",0.72857124,{"description":2092,"labels":2093,"number":2098,"owner":1993,"repository":1993,"state":1994,"title":2099,"updated_at":2100,"url":2101,"score":2102},"I've followed the instructions in the documentation, and I run into the same issue as #380. I've done some testing, but can't nail down what the issue is (the error is exactly the same as the closed issue). \r\n\r\nHere is the steps I've taken:\r\n\r\n1. vue init nuxt/starter test\r\n2. cd test\r\n3. npm install\r\n4. npm install --save bulma font-awesome node-sass sass-loader vue-bulma-breadcrumb (verified pre-processor instructions from https://nuxtjs.org/faq/pre-processors)\r\n5. Added `{ src: 'bulma', lang: 'sass' }` as shown in https://nuxtjs.org/api/configuration-css\r\n6. `npm run dev` Everything works fine. \r\n7. Modify default layout to `import Breadcrumb from 'vue-bulma-breadcrumb'` and added `Breadcrumb` under components. \r\n\r\nAt this point, I get the same error as in #380.\r\n\r\n> Unexpected character '@' (1:0)\r\n> You may need an appropriate loader to handle this file type.\r\n> | @import '~bulma/sass/utilities/functions';\r\n> | @import '~bulma/sass/utilities/variables';\r\n\r\nHowever, if I go and copy the vue file from the [module](https://github.com/vue-bulma/breadcrumb/blob/master/src/Breadcrumb.vue) into a component, and load that instead of `vue-bulma-breadcrumb` it works just fine. Modifying the template to actually reference the Breadcrumb component, it works just fine. \r\n\r\nMy conclusion is there is something wrong with the configuration that is preventing it from loading from node_modules properly. I'm digging around and exploring for a resolution. In the mean time, I figure someone else may find the fix quicker. This happens with vue-bulma-tooltip as well, but I didn't explore any other packages. \r\n\r\nIs there a step that is being missed or is this a webpack configuration issue? \n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This feature request is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c382\">#c382\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2094,2097],{"name":2095,"color":2096},"enhancement","8DEF37",{"name":1990,"color":1991},438,"\"SyntaxError: Unexpected token \u003C\" on external Vue component","2023-01-18T22:17:23Z","https://github.com/nuxt/nuxt/issues/438",0.7290941,["Reactive",2104],{},["Set"],["ShallowReactive",2107],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"Uta5q4uhgXQ5fAOqJnmorJZP7mLyOh_9o4ENAoPCQWY":-1},"/nuxt/ui/3007"]