\r\n \u003C/NuxtLayout>\r\n\u003C/template>\r\n```\r\n### /pages/index.vue\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nconst route = useRoute();\r\nconsole.log(route.fullPath);\r\n\u003C/script>\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Ch1>Home page\u003C/h1>\r\n \u003CNuxtLink to=\"/about\">About Page\u003C/NuxtLink>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n### /pages/about.vue\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Ch1>About page\u003C/h1>\r\n \u003CNuxtLink to=\"/\">Home Page\u003C/NuxtLink>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n### /layouts/default.vue\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nconst route = useRoute();\r\nconsole.log(route.fullPath);\r\n\u003C/script>\r\n\u003Ctemplate>\r\n \u003Cmain>\r\n \u003Cslot />\r\n \u003C/main>\r\n\u003C/template>\r\n```\r\n## Steps to reproduce\r\n1. Land on the home page\r\n2. View your console and note the logs produced by `/pages/index.vue` and `/layout/default.vue`\r\n3. Press the NuxtLink to go to the about page\r\n4. Press the NuxtLink on the about page to go back to the home page\r\n5. View your console and note the logs produced by `/pages/index.vue` and `/layout/default.vue`\r\n## Behavior\r\n**Current:**\r\n- When first landing on the home page, the logs of the page and the layout are consistent (both show '/' for the `fullPath`)\r\n- Upon navigating to the about page and return to the home page, the logs are different:\r\n - the page logs correctly: `/`\r\n - the layout logs incorrectly: `/about`\r\n\r\n**Expected:**\r\n- Both the layout and the page should have consistent logs (i.e. retrieve the same value from `useRoute()`)\r\n- The layout should display the correct `fullpath`, even when navigating away and returning using the NuxtLink (i.e. it should have logged '/' instead of '/about/' since we are on the home page)\r\n\r\n### Describe the bug\r\n\r\nWhen calling `useRoute()` inside of a layout, it will retrieve the correct value on the initial load or when refreshing the page. Once navigating away using a NuxtLink, it appears to retrieve an incorrect/old value (possibly due to client-side rendering). Please see the reproduction section for details.\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2852],{"name":2853,"color":2854},"pending triage","E99695",21340,"nuxt","open","useRoute providing incorrect data when used in a layout","2025-02-14T19:34:24Z","https://github.com/nuxt/nuxt/issues/21340",0.72040606,{"description":2863,"labels":2864,"number":2871,"owner":2856,"repository":2872,"state":2857,"title":2873,"updated_at":2874,"url":2875,"score":2876},"### Description\n\nI wanted to do something like the inline field label shown in the component examples in the docs, but couldn't find a suitable builtin. I think it's a nice halfway between MD's label-in-the-field strategy and while I could abuse the `leading` slot of the input, I think it makes more sense to be generic across input types. \n\n\n\nI did end up copy/pasting the source but it would be cool if the FormField (or something) had an `inline` variant that did this.\n\nFor reference:\nhttps://github.com/nuxt/ui/blob/50d68a636cc8b260dd3b8cf8afecb3b564b9d75d/docs/app/components/content/ComponentExample.vue#L162-L167\n\nThanks for your consideration 😄 \n\n### Additional context\n\n_No response_",[2865,2868],{"name":2866,"color":2867},"enhancement","a2eeef",{"name":2869,"color":2870},"v3","49DCB8",3543,"ui","Inline Form Field Label","2025-03-14T11:13:49Z","https://github.com/nuxt/ui/issues/3543",0.72880375,{"description":2878,"labels":2879,"number":2884,"owner":2856,"repository":2856,"state":2857,"title":2885,"updated_at":2886,"url":2887,"score":2888},"### Environment\n\n#### My machine:\n- Operating System: Windows_NT\n- Node Version: v20.16.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.8.3\n- Builder: -\n- User Config: default\n- Runtime Modules: -\n- Build Modules: -\n\n#### CodeSandbox reproduction:\n- Operating System: Linux\n- Node Version: v20.12.0\n- Nuxt Version: 3.10.1\n- CLI Version: 3.10.0\n- Nitro Version: 2.8.1\n- Package Manager: npm@10.5.0\n- Builder: -\n- User Config: devtools\n- Runtime Modules: -\n- Build Modules: -\n\n### Reproduction\n\nDemo: https://codesandbox.io/p/devbox/2n7n2z\n\n```vue\n\u003Ctemplate>\n \u003Cdiv>\n \u003Cmain />\n \u003CTeleport defer to=\"main\">\n \u003CNuxtLayout>\n \u003CNuxtPage />\n \u003C/NuxtLayout>\n \u003C/Teleport>\n \u003C/div>\n\u003C/template>\n```\n\n### Describe the bug\n\nUsing the \u003CNuxtLayout> component within a deferred Teleport consistently throws the following warning in the console:\n\n```\n WARN [nuxt] Your project has pages but the \u003CNuxtPage /> component has not been used. You might be using the \u003CRouterView /> component instead, which will not work correctly in Nuxt. You can set pages: false in nuxt.config if you do not wish to use the Nuxt vue-router integration.\n```\n\nThis does not occur if the Teleport is not deferred, but I need to defer it for my use case. It also does not occur if `ssr: false` is specified, so I assume the `app:rendered` and `app:suspense:resolve` hooks are probably [relevant](https://github.com/nuxt/nuxt/blob/edc299a04344897ac110aca3b3a2c2705b0cef35/packages/nuxt/src/pages/runtime/plugins/check-if-page-unused.ts#L22). \n\nVue lets me suppress the inevitable hydration mismatch warning with `\u003Cmain data-allow-mismatch=\"children\" />`, but Nuxt does not let me suppress the warning, so it clutters the console.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2880,2881],{"name":2853,"color":2854},{"name":2882,"color":2883},"dx","C39D69",30001,"\u003CNuxtLayout> within \u003CTeleport defer> throws warning: \"Your project has pages but the \u003CNuxtPage /> component is not being used\"","2024-11-27T15:13:13Z","https://github.com/nuxt/nuxt/issues/30001",0.73566025,{"description":2890,"labels":2891,"number":2899,"owner":2856,"repository":2872,"state":2900,"title":2901,"updated_at":2902,"url":2903,"score":2904},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v22.9.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.16.0\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.8.3\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.9, @nuxt/eslint@0.7.2, @nuxtjs/seo@2.0.2, @nuxtjs/plausible@1.2.0\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0-alpha.9\n\n### Reproduction\n\nOn a brand new project:\n\n```\nnpx nuxi@latest init my-app\ncd my-app\nnpm install @nuxt/ui@next\n```\n\nThen\n/app/app.vue\n```vue\n\u003Ctemplate>\n\t\u003CNuxtLayout>\n\t\t\u003CNuxtPage />\n\t\u003C/NuxtLayout>\n\u003C/template>\n```\n\nnuxt.config.ts\n```js\n// https://nuxt.com/docs/api/configuration/nuxt-config\nexport default defineNuxtConfig({\n\tcompatibilityDate: \"2024-11-01\",\n modules: ['@nuxt/ui', '@nuxt/eslint', '@nuxtjs/seo'],\n css: ['~/assets/css/main.css'],\n\n\tdevtools: { enabled: true },\n\tfuture: {\n\t\tcompatibilityVersion: 4,\n\t},\n\tui: {\n // error here\n\t\tcolorMode: false,\n\t},\n});\n\n```\n\n### Description\n\nWhen changing the ui.colorMode to false AND using the `pages` folder, it crashes the whole app (error below).\n\n\n```\n500\n[vite-node] [plugin:nuxt:imports-transform] [VITE_ERROR] /@fs/Users/jeannen/Dev/apps/node_modules/@nuxt/ui/dist/devtools/runtime/DevtoolsRenderer.vue?macro=true\n\n/* Injection by vite-plugin-vue-inspector Start */\nimport { createVNode as __createVNode } from 'vue'\nfunction _interopVNode(vnode) {\n if (vnode && vnode.props && 'data-v-inspector' in vnode.props) {\n const data = vnode.props['data-v-inspector']\n delete vnode.props['data-v-inspector']\n Object.defineProperty(vnode.props, '__v_inspector', { value: data, enumerable: false })\n }\n return vnode\n}\nfunction _createVNode(...args) { return _interopVNode(__createVNode(...args)) }\n/* Injection by vite-plugin-vue-inspector End */\nimport { defineComponent as _defineComponent } from \"vue\";\nimport { onUnmounted, onMounted, reactive } from \"vue\";\nimport { pascalCase } from \"scule\";\nimport { defineAsyncComponent, useColorMode, useRoute } from \"#imports\";\nconst _sfc_main = /* @__PURE__ */ _defineComponent({\n __name: \"DevtoolsRenderer\",\n setup(__props, { expose: __expose }) {\n __expose();\n const route = useRoute();\n const component = route.query?.example ? defineAsyncComponent(() => import(`./examples/${route.query.example}.vue`)) : route.params?.slug && defineAsyncComponent(() => import(`../../runtime/components/${pascalCase(route.params.slug)}.vue`));\n const state = reactive({});\n function onUpdateRenderer(event) {\n state.props = { ...event.data.props };\n state.slots = { ...event.data.slots };\n }\n const colorMode = useColorMode();\n function setColorMode(event) {\n colorMode.preference = event.isDark ? \"dark\" : \"light\";\n }\n onMounted(() => {\n (void 0).parent.addEventListener(\"nuxt-ui-devtools:update-renderer\", onUpdateRenderer);\n (void 0).parent.addEventListener(\"nuxt-ui-devtools:set-color-mode\", setColorMode);\n });\n onUnmounted(() => {\n (void 0).parent.removeEventListener(\"nuxt-ui-devtools:update-renderer\", onUpdateRenderer);\n (void 0).parent.removeEventListener(\"nuxt-ui-devtools:set-color-mode\", setColorMode);\n });\n onMounted(async () => {\n const event = new Event(\"nuxt-ui-devtools:component-loaded\");\n (void 0).parent.dispatchEvent(event);\n });\n onMounted(() => {\n if (!route.query?.example) return;\n });\n const __returned__ = { route, component, state, onUpdateRenderer, colorMode, setColorMode };\n Object.defineProperty(__returned__, \"__isScriptSetup\", { enumerable: false, value: true });\n return __returned__;\n }\n});\nimport { resolveComponent as _resolveComponent, resolveDynamicComponent as _resolveDynamicComponent, mergeProps as _mergeProps, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode } from \"vue\";\nimport { ssrRenderVNode as _ssrRenderVNode, ssrRenderComponent as _ssrRenderComponent, ssrRenderAttrs as _ssrRenderAttrs } from \"vue/server-renderer\";\nfunction _sfc_ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {\n const _component_UApp = _resolveComponent(\"UApp\");\n _push(`\u003Cdiv${_ssrRenderAttrs(_mergeProps({\n id: \"ui-devtools-renderer\",\n class: \"nuxt-ui-component-renderer\",\n \"data-v-inspector\": \"../node_modules/@nuxt/ui/dist/devtools/runtime/DevtoolsRenderer.vue:44:3\"\n }, _attrs))}>`);\n _push(_ssrRenderComponent(_component_UApp, { toaster: null }, {\n default: _withCtx((_, _push2, _parent2, _scopeId) => {\n if (_push2) {\n if ($setup.component) {\n _ssrRenderVNode(_push2, _createVNode(_resolveDynamicComponent($setup.component), _mergeProps($setup.state.props, {\n class: $setup.state?.slots?.base,\n ui: $setup.state.slots\n }), null), _parent2, _scopeId);\n } else {\n _push2(`\u003C!---->`);\n }\n } else {\n return [\n $setup.component ? (_openBlock(), _createBlock(_resolveDynamicComponent($setup.component), _mergeProps({ key: 0 }, $setup.state.props, {\n class: $setup.state?.slots?.base,\n ui: $setup.state.slots\n }), null, 16, [\"class\", \"ui\"])) : _createCommentVNode(\"v-if\", true)\n ];\n }\n }),\n _: 1\n /* STABLE */\n }, _parent));\n _push(`\u003C/div>`);\n}\nimport \"/Users/jeannen/Dev/apps/node_modules/@nuxt/ui/dist/devtools/runtime/DevtoolsRenderer.vue?vue&type=style&index=0&lang.css\";\nimport { useSSRContext as __vite_useSSRContext } from \"vue\";\nconst _sfc_setup = _sfc_main.setup;\n_sfc_main.setup = (props, ctx) => {\n const ssrContext = __vite_useSSRContext();\n (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add(\"../../node_modules/@nuxt/ui/dist/devtools/runtime/DevtoolsRenderer.vue\");\n return _sfc_setup ? _sfc_setup(props, ctx) : void 0;\n};\nimport _export_sfc from \"\\0plugin-vue:export-helper\";\nexport default /* @__PURE__ */ _export_sfc(_sfc_main, [[\"ssrRender\", _sfc_ssrRender], [\"__file\", \"/Users/jeannen/Dev/apps/node_modules/@nuxt/ui/dist/devtools/runtime/DevtoolsRenderer.vue\"]]);\n\nat /@fs/Users/jeannen/Dev/apps/node_modules/@nuxt/ui/dist/devtools/runtime/DevtoolsRenderer.vue?macro=true\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2892,2895,2898],{"name":2893,"color":2894},"bug","d73a4a",{"name":2896,"color":2897},"duplicate","cfd3d7",{"name":2869,"color":2870},2823,"closed","`colorMode: false` + /pages/ crash the app","2024-12-03T09:33:17Z","https://github.com/nuxt/ui/issues/2823",0.7055598,{"description":2906,"labels":2907,"number":2916,"owner":2856,"repository":2872,"state":2900,"title":2917,"updated_at":2918,"url":2919,"score":2920},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.13.1\n- Nuxt Version: 3.15.4\n- CLI Version: 3.22.2\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@10.6.1\n- Builder: -\n- User Config: ssr, dev, debug, app, modules, devtools, css, icon, future, nitro, vite, compatibilityDate, typescript, runtimeConfig, eslint\n- Runtime Modules: @nuxt/eslint@1.1.0, @nuxt/ui-pro@3.0.0-beta.2, @nuxt/image@1.9.0, @vueuse/nuxt@12.7.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-beta.2\n\n### Reproduction\n\nFor the PageList component, the first child is correctly converted to a li, the remaining ones are still divs and haven't been converted. Also, the data-orientation value of the first li is incorrectly forced to vertical.\n\n### Description\n\nFor the PageList component, the first child is correctly converted to a li, the remaining ones are still divs and haven't been converted. Also, the data-orientation value of the f\n\n\u003Cimg width=\"603\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/1db776b9-a16f-4788-8834-c68dfa931c7f\" />\n\nirst li is incorrectly forced to vertical.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2908,2909,2910,2913],{"name":2893,"color":2894},{"name":2869,"color":2870},{"name":2911,"color":2912},"pro","5BD3CB",{"name":2914,"color":2915},"triage","ffffff",3485,"For the PageList component, the first child is correctly converted to a li, the remaining ones are still divs and haven't been converted. Also, the data-orientation value of the first li is incorrectly forced to vertical.","2025-03-08T16:32:27Z","https://github.com/nuxt/ui/issues/3485",0.7081988,{"description":2922,"labels":2923,"number":2928,"owner":2856,"repository":2856,"state":2900,"title":2929,"updated_at":2930,"url":2931,"score":2932},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v16.17.0\r\n- Nuxt Version: 3.6.2\r\n- Nitro Version: 2.5.2\r\n- Package Manager: yarn@1.22.19\r\n- Builder: vite\r\n- User Config: modules, colorMode, runtimeConfig\r\n- Runtime Modules: @tailwindcss/typography@0.5.9, @nuxtjs/tailwindcss@6.8.0, @pinia/nuxt@0.4.11, @nuxtjs/color-mode@3.3.0, nuxt-icon@0.4.2\r\n- Build Modules: -\r\n------------------------------\r\n\r\n\r\n### Reproduction\r\n\r\nhttps://codesandbox.io/p/sandbox/keen-sea-66ccg7\r\n\r\n### Describe the bug\r\n\r\nWe have a useDimensions composable which returns the dimension of the window.\r\n\r\nWe also have a simple vue file:\r\n\r\n```\r\n \u003Cdiv>\r\n {{ dimensions.width }}\r\n \u003Cdiv v-if=\"dimensions.width > 1200\" class=\"red\">\r\n \u003Cspan>Who let the dogs out\u003C/span>\r\n \u003C/div>\r\n \u003Cdiv v-else class=\"green\">Wof Wof\u003C/div>\r\n \u003C/div>\r\n```\r\n\r\nwhich based on the useDimensions composable returns either DIV1 or DIV2.\r\n\r\n1. The webpage renders on server side using a default preset value (`390x900`) which will render DIV2 (in production this should only happen the first time you access the website).\r\n2. When the onmounted event happens we update the resolution using the actual resolution (let's say `1920x1080`).\r\n3. The content of the two divs update accordingly, however the classes on the div remain the same: https://ibb.co/ZWFxyHk\r\n\r\n\r\n\r\nThe update happens in the onmounted event, at first the website should have been rendered using the initial resolution 390x900 and then it should have been updated to the 1920x1080 dimensions.\r\n\r\n\r\n\r\n### Additional context\r\n\r\nAs a workaround we use CSS to render different elements on different dimensions, however sometimes it makes more sense to render some elements based on JS logic (like the number of elements of a carousel).\r\n\r\n`v-show` should fix this issue as both divs are printed and the updated, however in some cases you might not want to use it (you don't want to print 1000 elements).\r\n\r\n### Logs\r\n\r\n_No response_",[2924,2927],{"name":2925,"color":2926},"3.x","29bc7f",{"name":2853,"color":2854},22517,"Bad rendering when a variable value changes from server side rendering to client side rendering","2023-08-07T08:29:52Z","https://github.com/nuxt/nuxt/issues/22517",0.70923936,{"description":2934,"labels":2935,"number":2938,"owner":2856,"repository":2872,"state":2900,"title":2939,"updated_at":2940,"url":2941,"score":2942},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.14.0\n- Nuxt Version: 3.17.1\n- CLI Version: 3.25.0\n- Nitro Version: 2.11.11\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: app, build, colorMode, compatibilityDate, debug, devtools, fonts, future, hooks, i18n, icon, imports, modules, nitro, routeRules, runtimeConfig, security, ssr, sourcemap, css, telemetry, vite\n- Runtime Modules: @nuxt/eslint@1.3.0, @pinia/nuxt@0.11.0, @vueuse/nuxt@13.1.0, @nuxtjs/i18n@9.5.3, nuxt-security@2.2.0, @nuxt/ui@3.1.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/weathered-resonance-r7wcmc?file=%2Fapp%2Fpages%2Findex.vue\n\n### Description\n\nThe carousel item generic type does not seem to work anymore. Unfortunately I'm not sure, which is the last version of nuxt ui where it works :(\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n'item' is possibly 'null'. \nProperty 'title' does not exist on type 'string | number | Record\u003Cstring, any>'.\n Property 'title' does not exist on type 'string'.\n```",[2936,2937],{"name":2893,"color":2894},{"name":2869,"color":2870},4020,"Generic Type Issue with Carousel Component","2025-04-29T15:39:36Z","https://github.com/nuxt/ui/issues/4020",0.7106725,{"description":2944,"labels":2945,"number":2954,"owner":2856,"repository":2872,"state":2900,"title":2955,"updated_at":2956,"url":2957,"score":2958},"### Environment\n\n- Nuxt Vesrion: '3.15.1'\n- Nuxt/ui Version: '3.0.1'\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.15.1\n\n### Reproduction\n\nhttps://github.com/nuxt/ui/pull/2251\n\n### Description\n\nThis issue was previously addressed and fixed in [PR #2251](https://github.com/nuxt/ui/pull/2251). However, after upgrading to Nuxt UI v3.0.1, the dir prop no longer exists, making it impossible to switch the direction of the Carousel.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2946,2947,2950,2951],{"name":2893,"color":2894},{"name":2948,"color":2949},"needs reproduction","CB47CF",{"name":2869,"color":2870},{"name":2952,"color":2953},"closed-by-bot","ededed",3705,"Missing \"dir\" Prop in Carousel Component After Nuxt UI v3.0.1 Update","2025-05-31T02:09:01Z","https://github.com/nuxt/ui/issues/3705",0.7135047,{"labels":2960,"number":2967,"owner":2856,"repository":2856,"state":2900,"title":2968,"updated_at":2969,"url":2970,"score":2971},[2961,2963,2964],{"name":2962,"color":2915},"stale",{"name":2853,"color":2854},{"name":2965,"color":2966},"2.x","d4c5f9",7743,"when using $nuxt.error from client side, error page will not respect layout ","2023-01-22T15:36:04Z","https://github.com/nuxt/nuxt/issues/7743",0.7246551,{"description":2973,"labels":2974,"number":1661,"owner":2856,"repository":2979,"state":2900,"title":2980,"updated_at":2981,"url":2982,"score":2983},"",[2975,2976],{"name":2866,"color":2867},{"name":2977,"color":2978},"provider","1161A4","fonts","adobe fonts provider","2024-03-12T23:29:19Z","https://github.com/nuxt/fonts/issues/11",0.7282813,["Reactive",2985],{},["Set"],["ShallowReactive",2988],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$ft3AOU4c6WdJ2JDxpXjImBfjohSTZjZtZ4379CfU9n-Y":-1},"/nuxt/ui/1605"]