\n\n\u003Cimg width=\"1315\" height=\"541\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/e12e8c0c-9e43-45ee-8e81-5ee9ff1e8c50\" />",[3137,3140],{"name":3138,"color":3139},"question","d876e3",{"name":3141,"color":3142},"v3","49DCB8",4721,"nuxt","ui","open","Multi-column pinning behavior differs from TanStack Table - only first pinned column remains sticky","2025-08-12T14:56:56Z","https://github.com/nuxt/ui/issues/4721",0.77121204,{"description":3152,"labels":3153,"number":3156,"owner":3144,"repository":3145,"state":3146,"title":3157,"updated_at":3158,"url":3159,"score":3160},"### Description\n\nWe've been using tanstack/vue-table for a while now with our own meta declaration. Now we started using nuxt ui, which is great but the meta declaration in Table.d.ts is messing up the ts types. \n\nHow would we get rid of it?",[3154,3155],{"name":3138,"color":3139},{"name":3141,"color":3142},4828,"How to get rid of the meta declaration in Table.d.ts","2025-08-26T14:31:46Z","https://github.com/nuxt/ui/issues/4828",0.78688544,{"description":3162,"labels":3163,"number":3176,"owner":3144,"repository":3144,"state":3177,"title":3178,"updated_at":3179,"url":3180,"score":3181},"### Environment\r\n\r\n- Operating System: Windows_NT\r\n- Node Version: v18.17.1\r\n- Nuxt Version: 3.10.3\r\n- CLI Version: 3.10.1\r\n- Nitro Version: -\r\n- Package Manager: pnpm@8.15.3\r\n- Builder: -\r\n- User Config: devtools, modules\r\n- Runtime Modules: @nuxtjs/tailwindcss@6.11.4\r\n- Build Modules: -\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/~/github.com/tberk/nuxt-layout-bug\r\n\r\n### Describe the bug\r\n\r\nWhen using the useHead composable in Nuxt 3 to set bodyAttrs classes in different layouts, the classes set in one layout persist and are incorrectly applied to other layouts after navigation. This behavior leads to unintended styling issues across different parts of the application.\r\n\r\nAdmin Layout:\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nuseHead({\r\n htmlAttrs: { class: 'h-full admin-layout-html-class' },\r\n bodyAttrs: { class: 'h-full overflow-hidden admin-layout-body-class bg-gray-900 text-white' },\r\n})\r\n\u003C/script>\r\n```\r\n\r\nDefault Layout\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nuseHead({\r\n htmlAttrs: { class: 'h-full default-layout-html-class' },\r\n bodyAttrs: { class: 'h-full default-layout-body-class bg-gray-900 text-white' },\r\n})\r\n\u003C/script>\r\n```\r\n\r\n- Navigate from a page using the default layout to a page using the admin layout.\r\n- Then, navigate back to the page using the default layout.\r\n- The body and html retains the classes set by the admin layout's useHead, in addition to the classes defined in the default layout. This results in a mix of styles from both layouts being applied incorrectly.\r\n\r\nHTML: h-full default-layout-html-class admin-layout-html-class\r\nBODY: h-full default-layout-body-class bg-gray-900 text-white overflow-hidden admin-layout-body-class",[3164,3167,3170,3173],{"name":3165,"color":3166},"workaround available","11376d",{"name":3168,"color":3169},"bug","d73a4a",{"name":3171,"color":3172},"🔨 p3-minor","FBCA04",{"name":3174,"color":3175},"upstream-bug","B60205",25938,"closed","useHead: Persistent Body & Html Classes Across Layouts After Navigation","2024-09-07T16:00:59Z","https://github.com/nuxt/nuxt/issues/25938",0.77346957,{"description":3183,"labels":3184,"number":3192,"owner":3144,"repository":3145,"state":3177,"title":3193,"updated_at":3194,"url":3195,"score":3196},"### Description\n\nI would like to request the ability to apply Tailwind classes (like `text-center`) directly to column headers and cells in the `UTable` component.\n\n```\ncolumns: [\n {\n header: 'name',\n accessorKey: 'Name',\n headerClass: 'text-center', \n cellClass: 'text-center' \n }\n]\n```\n\n### Additional context\n\n_No response_",[3185,3188,3189],{"name":3186,"color":3187},"enhancement","a2eeef",{"name":3141,"color":3142},{"name":3190,"color":3191},"triage","ffffff",4764,"Add Tailwind class support for column header/cell in `UTable`","2025-08-25T09:57:10Z","https://github.com/nuxt/ui/issues/4764",0.77407455,{"description":3198,"labels":3199,"number":3203,"owner":3144,"repository":3144,"state":3177,"title":3204,"updated_at":3205,"url":3206,"score":3207},"my layout \r\ndefault.vue\r\n```\r\n\u003Ctemplate lang=\"pug\">\r\n div\r\n topbar\r\n headbar\r\n channel-nav\r\n .container.nuxt-page-wrapper\r\n nuxt\r\n footbar\r\n\u003C/template>\r\n```\r\nand \r\n```\r\nlayout.styl\r\n.nuxt-page-wrapper\r\n min-height 100vh\r\n```\r\nI use scrollToTop in page it's not work\r\n```\r\nexport default {\r\n scrollToTop: true,\r\n mounted () {\r\n window.scrollTo(0, 0)\r\n }\r\n }\r\n\r\n```\r\nand my nuxt.config.js also not work\r\n```\r\nmodule.exports = {\r\n ...\r\n router: {\r\n scrollBehavior: function (to, from, savedPosition) {\r\n return false\r\n }\r\n },\r\n ...\r\n}\r\n```\r\nwhat's going on?\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1134\">#c1134\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3200],{"name":3201,"color":3202},"2.x","d4c5f9",1286,"scrollToTop or saveBehavior not work when use 100vh height=100% in layout ","2023-01-18T15:41:01Z","https://github.com/nuxt/nuxt/issues/1286",0.78002137,{"description":3209,"labels":3210,"number":3212,"owner":3144,"repository":3144,"state":3177,"title":3213,"updated_at":3214,"url":3215,"score":3216},"Hello. After I upgrade Nuxt my code broke.\r\n\r\nI have this in template\r\n\r\n```\r\n\u003C header @scroll=\"handleScroll\" :class=\"[{'headroom--unpinned': scrolled 'default-header': zeroscrolled} header]\">\u003C/header>\r\n```\r\nscript\r\n```\r\nmethods: {\r\n handleScroll: function () {\r\n if (!this.activeOverlay && this.lastPosition \u003C window.scrollY && this.limitPosition \u003C window.scrollY) {\r\n this.scrolled = true\r\n // move up!\r\n }\r\n if (this.lastPosition > window.scrollY) {\r\n this.scrolled = false\r\n this.zeroscrolled = false\r\n // move down\r\n }\r\n if (this.$route.path === '/' && this.zeroScroll \u003C window.scrollY) {\r\n this.zeroscrolled = true\r\n }\r\n this.lastPosition = window.scrollY\r\n }\r\n },\r\n created () {\r\n if (process.BROWSER_BUILD) {\r\n // window.onNuxtReady(() => {\r\n window.addEventListener('scroll', this.handleScroll)\r\n // })\r\n }\r\n },\r\n destroyed () {\r\n if (process.BROWSER_BUILD) {\r\n // window.onNuxtReady(() => {\r\n window.removeEventListener('scroll', this.handleScroll)\r\n // })\r\n }\r\n }\r\n```\r\n\r\nWhat changes was made? What can cause the issue? All was working perfectly hour ago!\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1334\">#c1334\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3211],{"name":3201,"color":3202},1498,"After updating to `latest` scroll binding stopped working","2023-01-18T15:41:51Z","https://github.com/nuxt/nuxt/issues/1498",0.78195596,{"description":3218,"labels":3219,"number":3222,"owner":3144,"repository":3145,"state":3177,"title":3223,"updated_at":3224,"url":3225,"score":3226},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v20.18.0\n- Nuxt Version: -\n- CLI Version: 3.14.0\n- Nitro Version: -\n- Package Manager: unknown\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Version\n\nv3.0.0-alpha.6\n\n### Reproduction\n\nCannot use v3 on stackblitz so no repo.\n\n### Description\n\nWhen value is empty string placeholder doesn't show.\n\n```\nconst items = ref([\"Backlog\", \"Todo\", \"In Progress\", \"Done\"]);\nconst value = ref(\"\");\n```\n```\n\u003CUSelectMenu\n v-model=\"value\"\n placeholder=\"DummyItem\"\n :items=\"items\"\n class=\"w-full\"\n />\n```\n\n\n\nThis doesn't happen with input-menu. Gonna use that for now.\nIt only show when there is nothing(undefined):\n`const value = ref();` which doesn't work well with types and is not really realistic.\nAlso it with 'null' it breaks:\n`TypeError: Cannot read properties of null (reading 'label')`\n\nIt should use placeholder when:\n- null\n- empty string\n- empty\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3220,3221],{"name":3168,"color":3169},{"name":3141,"color":3142},2353,"[Select-Menu] Empty value placeholder logic is broken","2024-10-10T14:16:08Z","https://github.com/nuxt/ui/issues/2353",0.7826733,{"labels":3228,"number":3233,"owner":3144,"repository":3144,"state":3177,"title":3234,"updated_at":3235,"url":3236,"score":3237},[3229,3232],{"name":3230,"color":3231},"pending triage","E99695",{"name":3201,"color":3202},9162,"when set height: 100% or 100hv 'scrollToTop' not working","2023-01-22T15:44:51Z","https://github.com/nuxt/nuxt/issues/9162",0.7826857,{"description":3239,"labels":3240,"number":3245,"owner":3144,"repository":3144,"state":3177,"title":3246,"updated_at":3247,"url":3248,"score":3249},"### Version\n\n[v2.3.4](https://github.com/nuxt.js/releases/tag/v2.3.4)\n\n### Reproduction link\n\n[https://codesandbox.io/s/github/nuxt/nuxt.js/tree/dev/examples/custom-loading?from-embed](https://codesandbox.io/s/github/nuxt/nuxt.js/tree/dev/examples/custom-loading?from-embed)\n\n### Steps to reproduce\n\nI configured my custom loading component as described in documentation:\n```json\n /*\n ** Customize the progress-bar color\n */\n loading: '@/components/Loading.vue',\n```\nand created my new component\n```\n\u003Ctemplate>\n \u003Cdiv v-if=\"loading\" class=\"loading-page\">\n Loading..\n \u003C/div>\n\u003C/template>\n\n\u003Cscript>\nexport default {\n data: () => ({\n loading: false\n }),\n methods: {\n start() {\n this.loading = true\n },\n finish() {\n this.loading = false\n }\n }\n}\n\u003C/script>\n\n\u003Cstyle scoped>\n.loading-page {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n z-index: 9999;\n background-color: red;\n}\n\u003C/style>\n```\n\n### What is expected ?\n\nMy custom loading component showed during page load.\n\n### What is actually happening?\n\nNothing, my custom component and even the default one are never showed up.\n\n### Additional comments?\n\nRelated issued closed but not solved:\n#1454\n#1463\n\nI notice that even the example provided in the documentation is not working, I just notice a little flicker caused by browser load.\n\nI try to modify the template like this:\n```\n\u003Ctemplate>\n \u003Cdiv v-if=\"true\" class=\"loading-page\">\n Loading..\n \u003C/div>\n\u003C/template>\n```\nand I correctly see the component, so the component have the correct dimension/position/z-index.\n\nI try to add some console log output:\n```\nexport default {\n data: () => ({\n loading: false\n }),\n methods: {\n start() {\n console.log('loading..')\n this.loading = true\n },\n finish() {\n console.log('loaded!')\n this.loading = false\n }\n }\n}\n```\nand I never see that output inside the console, so those methods are never called.\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c8458\">#c8458\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3241,3243,3244],{"name":3242,"color":3191},"stale",{"name":3230,"color":3231},{"name":3201,"color":3202},4751,"Why the Custom Loading Component may not work?","2023-01-22T15:30:09Z","https://github.com/nuxt/nuxt/issues/4751",0.78301895,{"description":3251,"labels":3252,"number":3260,"owner":3144,"repository":3145,"state":3177,"title":3261,"updated_at":3262,"url":3263,"score":3264},"### Environment\n\n- Vue 3.5.12\n- Node 20.19.0\n- MacOS\n- Vite 6.3.2\n- Nuxt UI 3.0.2/3.1.0\n\n\n### Is this bug related to Nuxt or Vue?\n\nVue\n\n### Version\n\nv3.0.2/3.0.1\n\n### Reproduction\n\n\nreproduction:\nhttps://codesandbox.io/p/devbox/jolly-minsky-c2hdtr\n\n\n\n### Description\n\nWhen using Nuxt UI v 3.0.2 and 3.1.0, both appear to experience an issue with the Table component and the width of the table due to columns that have enough data in them for the character count to exceed to size of the screen. I believe the `whitespace-nowrap` class being applied globally to the `td` slot is the main source of the issue. Furthermore, when the `whitespace-nowrap` class is applied, then any width class you try to apply to the column definition will apply in the html, but doesn't actually appear to limit the overall width of the column. \n\nThe only way I have found that will actually make the column the desired width is replace the `whitespace-nowrap` class with `whitespace-normal` class via:\n1. Global change to the `td` slot via vite.config to something like this: `table: { slots: { td: 'p-4 text-sm text-muted whitespace-normal [&:has([role=checkbox])]:pe-0' } }`\n2. The `ui` prop on the table with something like this: `:ui=\"{ td: 'whitespace-normal p-4 text-sm text-muted [&:has([role=checkbox])]:pe-0' }\"`\n3. Add `whitespace-normal` in the column def via the meta class `{ meta: { class: { td: 'w-20 whitespace-normal' } } }`\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3253,3254,3255,3256,3259],{"name":3168,"color":3169},{"name":3141,"color":3142},{"name":3190,"color":3191},{"name":3257,"color":3258},"closed-by-bot","ededed",{"name":3242,"color":3258},3988,"Table component width overflows screen when column data is large","2025-08-20T02:08:53Z","https://github.com/nuxt/ui/issues/3988",0.78354317,["Reactive",3266],{},["Set"],["ShallowReactive",3269],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fhThbqHsVRr9OfMWy7kbNHetKpbvmzUXLxKGS_U0Q5w4":-1},"/nuxt/ui/4578"]