`\n\nit doesn't work that way\n\nI really ask for help!",[2893,2896],{"name":2894,"color":2895},"question","d876e3",{"name":2871,"color":2872},3098,"Table filtered, sorting fetch","2025-01-14T11:05:37Z","https://github.com/nuxt/ui/issues/3098",0.6498882,{"description":2903,"labels":2904,"number":2912,"owner":2874,"repository":2875,"state":2876,"title":2913,"updated_at":2914,"url":2915,"score":2916},"### Environment\n\n------------------------------\n- Operating System: Linux\n- Node Version: v22.14.0\n- Nuxt Version: 3.16.1\n- CLI Version: 3.23.1\n- Nitro Version: 2.11.8\n- Package Manager: npm@11.2.0\n- Builder: -\n- User Config: compatibilityDate, devtools, nitro, css, modules, vite\n- Runtime Modules: @nuxt/fonts@0.11.0, @nuxt/content@3.4.0, @nuxt/icon@1.11.0, @nuxt/image@1.10.0, @nuxt/scripts@0.11.5, @nuxt/eslint@1.3.0, @nuxt/ui@3.0.2\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.2\n\n### Reproduction\n\n```\n\u003Ctemplate>\n \u003Cdiv class=\"flex flex-col items-center justify-center gap-4 h-screen\">\n\n {{ state }}\n\n \u003Cdiv class=\"flex items-center gap-2\">\n \u003CUTree\n :items=\"gates\"\n label-key=\"label\"\n value-key=\"id\"\n v-model=\"state.gate\" \n >\n \u003C/UTree>\n \u003C/div>\n \u003C/div>\n\u003C/template>\n\n\n\n\u003Cscript\n lang=\"ts\"\n setup\n>\n\nimport type { FormSubmitEvent } from '@nuxt/ui'\n\ninterface Gate {\n id: number,\n label: string,\n uname: string\n}\n\ntype Schema = {\n gate: Gate\n}\n\nconst state = reactive\u003CPartial\u003CSchema>>({\n gate: undefined,\n})\n\nconst gates = [{id:0, uname: null, label: \"unknown\"}, {id:1, uname: \"first-gate\", label: \"First\"}]\n\n\u003C/script>\n```\n\n### Description\n\nvalue-key points to id or missed.\n\nv-model type check points to id:number but there is full object.\n\n\n\n### Additional context\n\nHow to get full object here when bug fixed?\n\n### Logs\n\n```shell-script\n\n```",[2905,2908,2909],{"name":2906,"color":2907},"bug","d73a4a",{"name":2871,"color":2872},{"name":2910,"color":2911},"triage","ffffff",3762,"UTree value-key not working","2025-04-01T09:12:02Z","https://github.com/nuxt/ui/issues/3762",0.6545954,{"description":2918,"labels":2919,"number":2922,"owner":2874,"repository":2875,"state":2876,"title":2923,"updated_at":2924,"url":2925,"score":2926},"### Description\n\nHi there,\n\nI'm really curious about how Nuxt UI is handling trailing slashes. In the Nuxt Content repo I can see they are using `ufo` to remove the trailing slashes, but in the Nuxt UI repo I can't find how you get rid of it. Even tho I know you can do these things on Vercel and Netlify, I'm curious how you handle it in Nuxt UI.\n\nIn my case, route.path is returning a path with a trailing slash and breaks my `queryCollection`...\n\n```vue\nconst { data: page } = await useAsyncData(\n `${route.path}/.navigation`,\n async () => {\n return await queryCollection('content').path(route.path).first();\n }\n);\n```",[2920,2921],{"name":2894,"color":2895},{"name":2871,"color":2872},3285,"Trailing slashes","2025-02-10T13:25:12Z","https://github.com/nuxt/ui/issues/3285",0.6723408,{"description":2928,"labels":2929,"number":2932,"owner":2874,"repository":2875,"state":2876,"title":2933,"updated_at":2934,"url":2935,"score":2936},"### Description\n\nHi, I'm having a hard time applying transition to dark / light background.\n\nMy `main.css` file is as follows.\n\nChanging the background color from `slate` to `stone`, for example, works fine.\n\nThe problem is just for the light / dark theme transition.\n\n```\n:root {\n --ui-bg: var(--ui-color-neutral-100);\n}\n\n.dark {\n --ui-bg: var(--ui-color-neutral-900);\n}\n\n@layer base {\n body {\n @apply transition-colors duration-1000;\n }\n}\n```\n\nHere is the function that changes the theme:\n\n```\nconst isDark = computed({\n get() {\n return colorMode.value === 'dark';\n },\n set() {\n colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark';\n },\n});\n```\n\nAny help would be appreciated, thanks!\n",[2930,2931],{"name":2894,"color":2895},{"name":2871,"color":2872},3645,"Applying transition-colors to light / dark theme","2025-03-21T16:20:57Z","https://github.com/nuxt/ui/issues/3645",0.6768168,{"description":2938,"labels":2939,"number":2942,"owner":2874,"repository":2875,"state":2943,"title":2944,"updated_at":2945,"url":2946,"score":2947},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.14.0\n- Nuxt Version: 3.16.0\n- CLI Version: 3.22.5\n- Nitro Version: 2.11.6\n- Package Manager: pnpm@10.6.1\n- Builder: -\n- User Config: compatibilityDate, devtools, typescript, ssr, app, modules, ui, colorMode, i18n, gtag, icon, robots, pwa, runtimeConfig\n- Runtime Modules: @nuxt/ui@2.21.1, @nuxtjs/i18n@9.3.1, nuxt-gtag@3.0.2, @pinia/nuxt@0.10.1, pinia-plugin-persistedstate/nuxt@4.2.0, @nuxt/icon@1.10.3, @nuxtjs/robots@5.2.6, @vite-pwa/nuxt@0.10.6, @formkit/auto-animate/nuxt@0.8.2\n- Build Modules:\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n2.21.1\n\n### Reproduction\n\nhttps://codesandbox.io/p/sandbox/optimistic-http-yz8djj\n\n### Description\n\nThe hover effect doest work when you pass the color as variable. Doesn't work with some colors like indigo, pink, sky...\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2940,2941],{"name":2894,"color":2895},{"name":2871,"color":2872},3524,"closed","Button hover effect","2025-03-14T11:52:31Z","https://github.com/nuxt/ui/issues/3524",0.5829059,{"description":2949,"labels":2950,"number":2958,"owner":2874,"repository":2875,"state":2943,"title":2959,"updated_at":2960,"url":2961,"score":2962},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v20.17.0\r\n- Nuxt Version: 3.12.4\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.7\r\n- Package Manager: pnpm@9.10.0\r\n- Builder: -\r\n- User Config: extends, modules, ui, colorMode, routeRules, devtools, typescript, future, eslint, runtimeConfig, compatibilityDate\r\n- Runtime Modules: @nuxt/eslint@0.5.1, @nuxt/fonts@0.7.2, @nuxt/ui@2.18.4, @vueuse/nuxt@10.11.1\r\n- Build Modules: -\n\n### Version\n\n2.18.4\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-9zrfga?file=app.vue\r\n\n\n### Description\n\nHi everyone.\r\nI truly appreciate your work. Many many thanks!!\r\nI'm starting a new project, my first project with \"nuxt\" and \"nuxt ui+pro\" (I liked the dashboard theme).\r\nMaybe I'm doing something wrong, in this case please help me.\r\nOtherwise I think I found an error in the theme of the UDashboardModal component.\r\n\r\nThe background of UDashboardModal does not follow the length of its content in \"mobile view\" (small devide, in this example 400x616).\r\n\r\n\r\n\r\nIn desktop viewport work as expected.\r\n\r\n\r\n\r\nWhat's do you think?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2951,2952,2955],{"name":2906,"color":2907},{"name":2953,"color":2954},"duplicate","cfd3d7",{"name":2956,"color":2957},"pro","5BD3CB",2220,"Issue Nuxt UI Pro UDashboardModal background ","2024-10-06T18:00:50Z","https://github.com/nuxt/ui/issues/2220",0.62831634,{"description":2964,"labels":2965,"number":2967,"owner":2874,"repository":2875,"state":2943,"title":2968,"updated_at":2969,"url":2970,"score":2971},"### Description\n\nI want to use a UVerticalNavigation component however I want to manage my self who should be active since:\n\n- I don't have any to params\n- I want to stay on the same page but triggering my function on click\n\n\nEg:\n\n```\n \u003CUVerticalNavigation :links=\"links\" >\n \u003C/UVerticalNavigation>\n\n\n const links = [\n {\n label: 'Inbox',\n icon: 'i-heroicons-home',\n click: () => selectFolder('inbox'),\n active: activeFolder.value == 'inbox',\n }, {\n label: 'Drafts',\n icon: 'i-heroicons-pencil',\n click: () => selectFolder('drafts'),\n active: activeFolder.value == 'drafts'\n }, {\n label: 'Outbox',\n icon: 'i-heroicons-envelope',\n click: () => selectFolder('outbox'),\n active: activeFolder.value == 'outbox'\n }, {\n label: 'Sent',\n icon: 'i-heroicons-paper-airplane',\n click: () => selectFolder('sent'),\n active: activeFolder.value == 'sent'\n }, {\n label: 'Spam',\n icon: 'i-heroicons-exclamation-triangle',\n click: () => selectFolder('spam'),\n active: activeFolder.value == 'spam'\n }, {\n label: 'All mails',\n icon: 'i-heroicons-inbox-stack',\n click: () => selectFolder('all'),\n active: activeFolder.value == 'all'\n }\n ]\n\n```\n\nI tried using the activeFOlder.value but it's not updating upon the value change\n\nThank you!\n",[2966],{"name":2894,"color":2895},3351,"UVerticalNavigation Active","2025-02-19T05:51:40Z","https://github.com/nuxt/ui/issues/3351",0.6362052,{"description":2973,"labels":2974,"number":2975,"owner":2874,"repository":2885,"state":2943,"title":2976,"updated_at":2977,"url":2978,"score":2979},"After using `pnpm update` to upgrade vue to 3.4.3, the console throws a lot of `Hydration mismatch`. If I am using vue 3.3.13, no `Hydration mismatch` warnings will be thrown.\r\n\r\n\u003Cimg width=\"1402\" alt=\"SCR-20240103-qagg\" src=\"https://github.com/nuxt/nuxt.com/assets/133459587/188ac1c4-e19a-4570-a5d0-4863c92a7bda\">\r\n",[],1467,"About vue@3.4.3 causing hydration mismatch","2024-05-03T00:34:36Z","https://github.com/nuxt/nuxt.com/issues/1467",0.6414618,["Reactive",2981],{},["Set"],["ShallowReactive",2984],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fKEudVJi2wJLY2PIJKZ6rwCO5JVJipm7o-_HLaC_Mkyg":-1},"/nuxt/ui/2302"]