",[1984,1987,1990],{"name":1985,"color":1986},"enhancement","a2eeef",{"name":1988,"color":1989},"v3","49DCB8",{"name":1991,"color":1992},"triage","ffffff",3270,"nuxt","ui","open","[Feature request] Toast hide progress in app.config","2025-02-09T17:11:11Z","https://github.com/nuxt/ui/issues/3270",0.741514,{"description":2002,"labels":2003,"number":2011,"owner":1994,"repository":1995,"state":1996,"title":2012,"updated_at":2013,"url":2014,"score":2015},"### Environment\r\n\r\n- Operating System: Darwin\r\n- Node Version: v22.1.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: npm@10.7.0\r\n- Builder: -\r\n- User Config: extends, modules, tiptap, future, compatibilityDate, devtools, runtimeConfig\r\n- Runtime Modules: @pinia/nuxt@0.5.3, @nuxt/ui@2.18.4, nuxt-tiptap-editor@1.2.1\r\n- Build Modules: -\r\n\r\n### Version\r\n\r\nv2.18.4\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/~/github.com/nerdnum/projectx-frontend-v3 \r\n\r\n@moshetanzer , I tagged you as you requested on Discord. Please let me know if you can access the link. It is my first time creating something on stackblitz, and I am not sure how access is managed.\r\n\r\nThe panel behaves the same on Stackblitz as on my development machine. The panel does not close.\r\n\r\n### Description\r\n\r\nI am using Nuxt-UI Pro. I provide a NavigationTree (using \"label\" and \"to\" in the links tree) to the panel slot of the Header component. When the screen with is less than 1024px, as expected, the NavigationTree is displayed when one clicks on the hamburger icon. When one clicks on one of the links in the tree, the application navigates to the new URL, but it does not close the panel as expected. One has to click on the 'x' to close the panel.\r\n\r\nThis differs from the behaviour of the Nuxt-ui documentation site (https://ui.nuxt.com/pro/components/header), which closes the panel and does the navigation. I cannot find anything about closing the panel with code in the documentation. \r\n\r\nIt behaves the same in chrome, edge and firefox.\r\n\r\nDisabling SSR does not make a difference.\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2004,2007,2010],{"name":2005,"color":2006},"bug","d73a4a",{"name":2008,"color":2009},"pro","5BD3CB",{"name":1991,"color":1992},2098,"Panel with NavigationTree does not close on Navigation","2024-09-10T10:49:56Z","https://github.com/nuxt/ui/issues/2098",0.74339783,{"description":2017,"labels":2018,"number":2022,"owner":1994,"repository":2023,"state":1996,"title":2024,"updated_at":2025,"url":2026,"score":2027},"### Environment\n\nThis is one of the environments i came across the problem:\r\n[11:15:23 AM] Working directory: /Users/lorenzorottigni/Documents/gitlab_private/portfolio.rottigni.tech\r\n[11:15:23 AM] Nuxt project info: (copied to clipboard)\r\n\r\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v18.13.0\r\n- Nuxt Version: 3.9.3\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: yarn@1.22.21\r\n- Builder: vite\r\n- User Config: ssr, debug, srcDir, serverDir, test, app, modules, css, postcss, unocss, tailwindcss, googleFonts, i18n, nitro, pwa, image, delayHydration, extensions, typescript, builder, vite, vue, runtimeConfig, devServer, sourcemap, experimental\r\n- Runtime Modules: @vueuse/nuxt@10.7.2, @nuxtjs/tailwindcss@6.10.4, @pinia/nuxt@0.5.1, @unocss/nuxt@0.58.3, @nuxtjs/i18n@8.0.0, @nuxt/image@1.3.0, nuxt-jsonld@2.0.8, @kevinmarrec/nuxt-pwa@0.17.0, @nuxtjs/google-fonts@3.1.3, nuxt-calendly@0.1.18, nuxt-delay-hydration@1.3.3, @nuxt/test-utils/module@3.10.0\r\n- Build Modules: -\r\n------------------------------\r\n\r\n[11:15:23 AM] 👉 Report an issue: https://github.com/nuxt/nuxt/issues/new\r\n\r\n👉 Suggest an improvement: https://github.com/nuxt/nuxt/discussions/new\r\n\r\n👉 Read documentation: https://nuxt.com\n\n### Reproduction\n\nThe crucial file is MyComponent.spec.ts:\r\nhttps://stackblitz.com/~/github.com/LorenzoRottigni/nuxt-test-utils-vitest-spy\n\n### Describe the bug\n\nI'm currently facing challenges in testing a component method within a Nuxt environment. Specifically, I'm attempting to spy on a component method to test its interactions within template events. Despite researching similar cases online, I've yet to find a clear solution to this issue.\r\n\r\nOne suggestion I encountered was to define the spy before the component mounts. However, I'm unable to access `wrapper.vm` before mount time, complicating this approach. Additionally, I experimented with spying on the global injected `$fetch` method from the 'ofetch' library. Unfortunately, this led to another error regarding the inability to redefine the variable `$fetch` when attempting variations like:\r\n\r\n```javascript\r\nimport OFetch from 'ofetch'\r\nconst spy = vi.spyOn(OFetch, '$fetch')\r\n// or\r\nconst spy = vi.spyOn(global, '$fetch')\r\n// or\r\nconst spy = vi.spyOn({ $fetch }, '$fetch')\r\n```\r\n\r\nIt appears that this issue may not be directly tied to the nuxt-test-utils package. Nevertheless, I wanted to bring it to your attention in the hopes that someone might offer guidance or assistance. I'm eager to find a resolution and would appreciate any insights or suggestions you might have.\r\n\r\nI'm also considering reporting a similar issue to the vue-test-utils package, as I suspect that this problem might be reproducible outside of the Nuxt environment.\r\n\r\nThank you for your time and assistance.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2019],{"name":2020,"color":2021},"pending triage","5D08F5",763,"test-utils","Unable to use vitest spy within nuxt 3 component methods.","2024-05-28T15:28:23Z","https://github.com/nuxt/test-utils/issues/763",0.7446736,{"description":2029,"labels":2030,"number":2033,"owner":1994,"repository":1995,"state":1996,"title":2034,"updated_at":2035,"url":2036,"score":2037},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.15.1\n- Nuxt Version: 3.14.159\n- CLI Version: 3.17.2\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.14.3\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n\n### Version\n\nv2.18.6\n\n### Reproduction\n\nGo here:\n\nhttps://ui.nuxt.com/components/tabs#default-index\n\nReload the page\n\n### Description\n\nWhen tabs have an initial index other than `0` they visually transition from the left tab to the index / v-model # tab.\n\nHappy to PR this.\n\n### Additional context\n\n\n\n### Logs\n\n```shell-script\n\n```",[2031,2032],{"name":2005,"color":2006},{"name":1991,"color":1992},3084,"[Tabs] non-0 `index` / `v-model` always transitions from 0","2025-01-13T13:45:29Z","https://github.com/nuxt/ui/issues/3084",0.75334316,{"description":2039,"labels":2040,"number":2041,"owner":1994,"repository":2042,"state":1996,"title":2043,"updated_at":2044,"url":2045,"score":2046},"This bug is so random and it's only happen on our production site. Sometimes it happen, sometimes not. I tried create a reproduction but it's only happen on our production site.\nBut you can see from the screenshot below that the request to times icon is returning 2 other icons. It return the error message: `[Icon] failed to load icon m-icon:times`\n\n**Versions:**\n\"@nuxt/icon\": \"1.9.1\",\n\"@nuxt/ui\": \"2.18.4\",\n\"nuxt\": \"3.13.0\"\n\n\n\n\n",[],320,"icon","Requested custom icon is returning randomly in production site","2024-12-11T06:12:25Z","https://github.com/nuxt/icon/issues/320",0.75489235,{"description":2048,"labels":2049,"number":2058,"owner":1994,"repository":1994,"state":1996,"title":2059,"updated_at":2060,"url":2061,"score":2062},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v20.11.1\r\n- Nuxt Version: 3.11.2\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.6\r\n- Package Manager: npm@10.8.1\r\n- Builder: -\r\n- User Config: devtools, ssr\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-yfqdht?file=pages%2Findex.vue\r\n\r\n### Describe the bug\r\n\r\nThere is something strange. It happens when I move from one page to another page that contains a specific component. Within this component, I give a data-Attribute element, and when I return to the first page and then return, I find that the Attribute has not been deleted.\r\n\r\nUnlike usual, when you visit a page and, for example, give certain properties to HTML elements, after exiting the page I think they are deleted.\r\n\r\nex :\r\nYou Have 2 Pages : \r\n- `index.vue`\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nconst router = useRouter();\r\n\r\nfunction go() {\r\n router.push('/about');\r\n}\r\n\r\nfunction setItem() {\r\n localStorage.setItem('set', 'set');\r\n}\r\n\r\nfunction removeItem() {\r\n localStorage.removeItem('set');\r\n}\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Ch1>Index Page\u003C/h1>\r\n \u003Cbutton @click=\"go\">To About\u003C/button>\r\n \u003Cp>For Test :\u003C/p>\r\n \u003Cbutton @click=\"setItem\">Local Storage Set\u003C/button>\r\n \u003Cbutton @click=\"removeItem\">Local Storage remove Set\u003C/button>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n```\r\n- `about.vue`\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nfunction getAttr() {\r\n if (document.querySelector('.notRemoveAttr').getAttribute('data-setData')) {\r\n alert('Attribute exists');\r\n } else {\r\n alert('Attribute Not exists!!');\r\n }\r\n}\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Ch1>About Page\u003C/h1>\r\n \u003CTestComp>\u003C/TestComp>\r\n \u003CNuxtLink to=\"/\">To Index\u003C/NuxtLink>\r\n \u003Cbutton @click=\"getAttr\">getAttribute (data-setData)\u003C/button>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n```\r\nin `about page` have `testComp.vue` :\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\n\r\nonMounted(() => {\r\n if (!localStorage.getItem(\"set\")) {\r\n document.querySelector(\".notRemoveAttr\")?.setAttribute('data-setData', 'hi');\r\n }\r\n});\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n\u003C!-- I am surprised that when the html code is arranged in this way, the problem occurs. I do not know if the problem exists in other forms, but this is what happened. -->\r\n \u003Cdiv>\r\n \u003Cdiv class=\"anyClass\">\r\n \u003Cdiv class=\"anyClass2\">\r\n \u003Cdiv class=\"anyClass3\">\u003C/div>\r\n \u003Cdiv class=\"notRemoveAttr\">\r\n \u003Cdiv class=\"anyClass4\">\u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n```\r\n\r\nNow when I go to the about page directly, everything is excellent, but when I go to the index page, then go to the about page, then return to the index page and put `set` in localStorage, then return to about, I find that the Attribute `setData` has not been deleted!\r\n\r\ntry it yourself, https://stackblitz.com/edit/github-yfqdht?file=pages%2Findex.vue\r\n1 - open index page\r\n2 - Go to the about page (click Button) (the element `.notRemoveAttr` will be given `Attribute`, which is `data-setData`)\r\n3 - Go back to index (click Button)\r\n4 - Click on (Local Storage Set) - so that `.setAttribute('data-setData', 'hi')` does not work when we return to the about page\r\n5 - Go back to the about page (click on `getAttribute (data-setData)`) and you will find that it brings it to you!! \r\n\r\nMake sure when you want to try again, click on `Local Storage remove Set`\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2050,2053,2055],{"name":2051,"color":2052},"workaround available","11376d",{"name":2020,"color":2054},"E99695",{"name":2056,"color":2057},"upstream","E8A36D",27471,"data-Attribute is not deleted when you go to another page","2024-06-30T11:03:49Z","https://github.com/nuxt/nuxt/issues/27471",0.7570718,{"description":2064,"labels":2065,"number":2067,"owner":1994,"repository":1994,"state":1996,"title":2068,"updated_at":2069,"url":2070,"score":2071},"### Environment\n\n````\r\n------------------------------\r\n- Operating System: Ubuntu 20.04.4 LTS\r\n- Node Version: v20.11.0\r\n- Nuxt Version: 3.12.3\r\n- CLI Version: 3.12.0\r\n- Nitro Version: -\r\n- Package Manager: pnpm@8.1.0\r\n- Builder: -\r\n- User Config: compatibilityDate, devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n````\n\n### Reproduction\n\nhttps://stackblitz.com/~/github.com/martinszeltins/nuxt-ducks\n\n### Describe the bug\n\nI wanted to refresh / reload my page but not the hard way - I did not want to call `location.reload`. I want to do the same thing that would be done if I navigated AWAY from the current page and then came back to it. The page would be reset, all data would be cleared.\r\n\r\nSo I change the `key` for my page which should cause it to reload but it's not happening. When the key is changed, it does not reload/refresh the page. For example, the `name` ref is not cleared.\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CShipment />\r\n\r\n \u003Cdiv>\u003CNuxtLink to=\"/\">HOME\u003C/NuxtLink>\u003C/div>\r\n \u003Cdiv>\u003CNuxtLink to=\"/?name=roro\">/?name=roro\u003C/NuxtLink>\u003C/div>\r\n \u003Cdiv>\u003CNuxtLink to=\"/about\">About\u003C/NuxtLink>\u003C/div>\r\n\r\n \u003Cul>\r\n \u003Cli>Enter a name in the input field above\u003C/li>\r\n \u003Cli>Click on the ?name=roro link\u003C/li>\r\n \u003Cli>Click on the HOME link\u003C/li>\r\n \u003Cli>The page should be re-rendered and reset but it's not happening. The input should be cleared.\u003C/li>\r\n \u003C/ul>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\n const route = useRoute()\r\n\r\n onBeforeRouteUpdate(to => {\r\n // Refresh the page (not hard refresh)!\r\n if (to.fullPath === '/') {\r\n route.meta.pageKey = 'test'\r\n\r\n document.querySelector('#logs')!.textContent = document.querySelector('#logs')!.textContent + 'Changing page key, it should re-render the page and clear all data...'\r\n }\r\n })\r\n\r\n definePageMeta({ key: (route) => route.meta.pageKey })\r\n\u003C/script>\r\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2066],{"name":2020,"color":2054},28086,"Changing `key` on page does not re-render it","2024-08-28T20:39:13Z","https://github.com/nuxt/nuxt/issues/28086",0.75740737,{"description":2073,"labels":2074,"number":2076,"owner":1994,"repository":1994,"state":1996,"title":2077,"updated_at":2078,"url":2079,"score":2080},"### Environment\n\n- Operating System: Linux\n- Node Version: v18.20.3\n- Nuxt Version: 3.16.1\n- CLI Version: 3.23.1\n- Nitro Version: 2.11.7\n- Package Manager: npm@10.2.3\n- Builder: -\n- User Config: compatibilityDate, devtools\n- Runtime Modules: -\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-t7nddash?file=app.vue\n\n### Describe the bug\n\nthe server component's `$el` is referencing a fragment comment instead of the rendered content element\n```vue\n\u003Ctemplate>\n \u003Cdiv>\n \u003CMyServerComponent ref=\"componentRef\" />\n \u003Cdiv>{{ componentRef?.$el }}\u003C/div>\n \u003C/div>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nconst componentRef = ref\u003CInstanceType\u003Ctypeof MyServerComponent>>();\n\u003C/script>\n```\n\n### Additional context\n\nmy workaround was to wrap the server component and lookup `data-island-uid`, but I don't know if that's the recommended solution\n```vue\n\u003Ctemplate>\n \u003Cdiv>\n \u003Cdiv :style=\"{ display: 'contents' }\" ref=\"containerRef\">\n \u003CMyServerComponent />\n \u003C/div>\n \u003Cdiv>{{ containerRef?.querySelector('[data-island-uid]') }}\u003C/div>\n \u003C/div>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nconst containerRef = ref\u003CHTMLDivElement>();\n\u003C/script>\n```\n\n### Logs\n\n```shell-script\n\n```",[2075],{"name":2020,"color":2054},31512,"unable to reference element of server component","2025-03-23T21:01:09Z","https://github.com/nuxt/nuxt/issues/31512",0.758251,{"description":2082,"labels":2083,"number":2087,"owner":1994,"repository":1995,"state":2088,"title":2089,"updated_at":2090,"url":2091,"score":2092},"### Environment\n\nOperating System: Darwin\nNode Version: v20.18.0\nNuxt Version: 3.14.1592\nPackage Manager: pnpm@9.14.4\nBuilder: -\nUser Config: default\nRuntime Modules: @nuxt/ui@3.0.0-alpha.10\nBuild Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.10\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/nifty-ride-lx6qlg\n\n### Description\n\nThe same problem occurs in official documents. https://ui3.nuxt.dev/components/toast\n1. Open the Toast component of the document.\n2. Click the \"Show toast\" button to show toast.\n3. Click X to close the toast when it appears.\n4. Click the \"Show toast\" button again, and the toast that appears does not have a progress bar and does not automatically close.\n\nMy production environment project also has this problem, I hope it can be solved as soon as possible.\nAlso, the progress bar sometimes flashes, so i can expect new configurations to setting the progress bar showing is true or false.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2084,2085,2086],{"name":2005,"color":2006},{"name":1988,"color":1989},{"name":1991,"color":1992},3003,"closed","The Toast component loses the progress bar and does not automatically close","2025-03-24T13:48:53Z","https://github.com/nuxt/ui/issues/3003",0.72708243,{"description":2094,"labels":2095,"number":2097,"owner":1994,"repository":1995,"state":2088,"title":2098,"updated_at":2099,"url":2100,"score":2101},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.10.0\n- Nuxt Version: 3.12.1\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: yarn@1.22.22\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@2.19.2, @vueuse/nuxt@10.11.1, @nuxtjs/eslint-module@4.1.0, @nuxtjs/stylelint-module@5.2.0, @nuxt/icon@1.7.5, @formkit/nuxt@1.6.9, @pinia/nuxt@0.4.11, @trandaison/nuxt-3-auth@0.1.4, @nuxtjs/i18n@8.5.6, notivue/nuxt, @nuxtjs/google-fonts@3.2.0, vue3-perfect-scrollbar/nuxt\n- Build Modules: -\n\n### Version\n\nv2.19.2\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-dj7gbt?file=app.vue\n\n\n\n### Description\n\nSlots for [selected columns](https://ui.nuxt.com/components/table#select-data), so #select-data, don't work at all.\n\nWhile it is not really clear in documentation if we should do anything more, whatever I did and tried, overriding the columns for selection simply doesn't work.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2096],{"name":2005,"color":2006},2758,"Table select slots not working","2025-01-13T16:32:33Z","https://github.com/nuxt/ui/issues/2758",0.7284742,["Reactive",2103],{},["Set"],["ShallowReactive",2106],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"IHdWweDnW-eRaYY7vb1E3xmhiFb2EDDoCHNrmC3DA8g":-1},"/nuxt/ui/3574"]