\n \u003C/template>\n \u003Cv-list v-model:selected=\"selected\" selectable density=\"default\" max-height=\"40vh\" select-strategy=\"leaf\">\n \u003Ctemplate v-for=\"item in items\" :key=\"item.title\">\n \u003Cv-list-item>\n {{ item.title }}\n \u003C/v-list-item>\n \u003C/template>\n \u003C/v-list>\n \u003C/v-menu>\n\u003C/template>\n\n\u003Cscript lang=\"ts\">\nimport { defineComponent, reactive, ref } from 'vue'\n\nexport default defineComponent({\n name: 'AppTestComponent',\n setup() {\n const selected = ref([])\n const menuShow = ref(false)\n return {\n menuShow,\n selected,\n }\n },\n computed: {\n items() {\n return [\n {\n title: 'My Title',\n },\n ]\n },\n },\n})\n\u003C/script>\n```\n\ntest\n\n```typescript\n\nimport { describe, expect, test } from 'vitest'\nimport { mountSuspended } from '@nuxt/test-utils/runtime'\nimport AppTestComponent from '~/components/AppTestComponent.vue'\nimport { mount } from '@vue/test-utils'\nimport { VList } from 'vuetify/components/VList'\n\ndescribe('AppTestComponent', () => {\n test('renders', async () => {\n const component = mount(AppTestComponent)\n\n await component.find('button').trigger('click')\n const listContent = component.findComponent(VList).html()\n expect(listContent).toContain('My Title')\n })\n test('will fail', async () => {\n const component = await mountSuspended(AppTestComponent)\n\n await component.find('button').trigger('click')\n const listContent = component.findComponent(VList).html()\n expect(listContent).toContain('My Title')\n })\n})\n\n```\n\n\n### Describe the bug\n\n\nWhen testing Vuetify components with `mountSuspended` from `@nuxt/test-utils/runtime`, I discovered that ref values are not properly unwrapped before being passed to components.\n\nSpecifically, when mounting Vuetify's `VMenu` or `VList` components, props like `modelValue` (for VMenu) or `selected` (for VList) receive the actual ref object instead of the ref's value. This behavior differs from Vue Test Utils' standard `mount` function, which correctly unwraps ref values.\n\n## Reproduction Steps\n\nThe issue occurs when:\n1. Using `mountSuspended` from `@nuxt/test-utils/runtime`\n2. Testing components created with `defineComponent()`\n3. Passing refs as props to Vuetify components from `setup()`\n\nInterestingly, components using `\u003Cscript setup>` syntax work correctly.\n\n## Error Details\n\nThe error occurs in Vuetify's internal code when it tries to iterate over what it expects to be an array value but receives a ref object instead:\n\n```\nTypeError: (v || []) is not iterable\n ❯ Object.in node_modules/vuetify/src/composables/nested/selectStrategies.ts:56:25\n ❯ transformIn node_modules/vuetify/src/composables/nested/nested.ts:184:33\n ❯ ComputedRefImpl.get [as fn] node_modules/vuetify/src/composables/proxiedModel.ts:53:14\n ❯ refreshComputed node_modules/@vue/reactivity/dist/reactivity.cjs.js:384:28\n ❯ ComputedRefImpl.value node_modules/@vue/reactivity/dist/reactivity.cjs.js:1625:5\n ❯ ComputedRefImpl.fn node_modules/vuetify/src/composables/nested/nested.ts:356:53\n ❯ refreshComputed node_modules/@vue/reactivity/dist/reactivity.cjs.js:384:28\n ❯ ComputedRefImpl.value node_modules/@vue/reactivity/dist/reactivity.cjs.js:1625:5\n ❯ ComputedRefImpl.fn node_modules/vuetify/src/components/VList/VListItem.tsx:141:105\n ❯ refreshComputed node_modules/@vue/reactivity/dist/reactivity.cjs.js:384:28\n```\n\n## Investigation Findings\n\nWhen debugging the Vuetify components by placing breakpoints in their setup functions, I observed that:\n- With `@vue/test-utils` mount: Props contain the actual values of refs\n- With `@nuxt/test-utils` mountSuspended: Props contain the ref objects themselves\n\nI suspect this is related to how `mountSuspended` handles the return value of `setup()` when using `defineComponent()`, failing to properly unwrap reactive references before passing them as props.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[1998],{"name":1999,"color":2000},"pending triage","5D08F5",1199,"test-utils","Component props are passed as ref instead of refs value when using defineComponent()","2025-03-20T22:07:30Z","https://github.com/nuxt/test-utils/issues/1199",0.7935245,{"description":2008,"labels":2009,"number":2010,"owner":1988,"repository":1989,"state":1990,"title":2011,"updated_at":2012,"url":2013,"score":2014},"Dear Nuxters,\r\n\r\nWhen I look at the documentation, I often feel overwhelmed by the many options, hints, links to different sections, and the overall interconnectivity. As a trained designer, my first thought was: How can I visually enhance the readability?\r\n\r\nI would like to share a brief analysis with you. It may open up a discussion or at least provide some stimuli for thought. I am well aware that the following is highly opinionated. I'm also aware that the Nuxt docs are derived from the Nuxt UI Pro docs template. However, since I primarily use Nuxt directly, I believe this is the appropriate place to address the following.\r\n\r\nThe focus of this analysis is on achieving clarity in design to make the layout, elements, and behaviors more understandable for users. While individual layout parts, elements, and behaviors may be clear on their own, there is room for improvement when they work together. Enhancing these interactions may improve the overall clarity of the documentation.\r\n\r\n## (1) Attention\r\n\r\nThe docs use a 10-column grid.\r\nHowever, the main section is slightly off to the right because the child element also uses a 10-column grid instead of 8.\r\n\r\n\r\n\r\n\r\n\r\nPaired with the narrow max-width, this layout leads to the blurring of boundaries between navigation, main text, and side content. While reading, your eyes often jump to the navigation, making it harder to read and maintain focus.\r\n\r\n\r\n\r\nOne solution would be to consistently use a 10-column grid and adjust the spacing accordingly. I also added a max-w-8xl (96rem) to the wrapper and a max-w-5xl to the navigation and aside sections.\r\n\r\n\r\n\r\n## (2) Emphasis\r\n\r\n### (2.1)\r\n\r\nWithin the documentation, we have various elements that demand attention: current main navigation, current navigation, current breadcrumb, title, description, current table of contents, text links, inline code, and info boxes.\r\n\r\nEmphasis can be very useful as it helps readers scan the text quickly or find specific information. However, every emphasis also interrupts the reader's flow. As a side note, Jan Tschichold, one of the most influential typographers for print, once said: \"The addiction to highlight almost half of the words [...] makes the reader feel like they're being considered as idiots.\"\r\n\r\nIt's generally agreed that when highlighting elements in a text, it's best to use a single type of emphasis—whether it be bold, italic, color, background-color, underline, or border—so that no one element stands out too much or overwhelms the others.\r\n\r\n\r\n\r\nWe can easily balance the emphasis by making the following adjustments:\r\n\r\n1. Breadcrumbs should not be green.\r\n2. Remove letter-spacing from the introduction.\r\n3. Use a distinguishable font size (font-xl) for the description text, keep it white, and avoid turning down the color.\r\n4. Avoid using bold for inline code.\r\n5. Avoid using bold for links.\r\n6. Soften the background color of the info boxes.\r\n7. Always place the imperative/verb at the beginning (e.g., \"try out…\", \"read more…\", \"find other…\") and make the entire info box a clickable link.\r\n8. Consider giving all linked boxes a dashed border for consistency.\r\n9. Use white and gray colors for the table of contents instead of adding color\r\n\r\nSo, we come from here\r\n(Original)\r\n\r\n\r\n\r\nTo here\r\n(Modified Emphasis)\r\n\r\n\r\n\r\nTo here\r\n(With Grid adjustments)\r\n\r\n\r\n\r\n1. Start by reading the navigation.\r\n2. Jump to the introduction block.\r\n3. Then proceed to the main content.\r\n4. Optionally, explore the aside section afterward.\r\n\r\n\r\n\r\n### (2.2)\r\n\r\nAnother issue with the current emphasis strategy is that the colored boxes vie for attention and compete with the most critical part: code examples.\r\nFor instance, on the Configuration page, there's a excessive amount of information presented one after the other, with each piece of information emphasized differently.\r\n\r\n\r\n\r\n\r\nI believe it would be beneficial to tone down these boxes. While adjusting the background of the boxes, we could also align the color of the inline code with the color of the code examples to enhance consistency. It's reasonable to maintain the strong border color, as it serves as the primary emphasis style.\r\n\r\n\r\n\r\n\r\n## (3) Separation\r\n\r\nConnected to the previously mentioned point about the difficulty of differentiating content due to numerous emphasis levels, it's also challenging to follow the content because there are no clear breaks for the reader to understand where one section ends and another begins.\r\n\r\n\r\n\r\nHeadlines could be enhanced by adding an underline and increasing the spacing, especially at the top.\r\nThis results in more completed sections.\r\n\r\n\r\n\r\n## (4) Grouping\r\n\r\nThere's often a lot to cover regarding various aspects of a particular feature, which is why info boxes are frequently used. However, similar to emphasis, the sheer volume of info boxes can be overwhelming, and it's not always clear how to follow up as a reader.\r\n\r\n\r\n\r\nGroup similar elements together: In this example, the reader can better understand that a series of \"read more\" blocks will follow. (Additionally, each \"read more\" should be a link itself; in this example, there are two inline links, and the middle info box is a link.)\r\n\r\n\r\n\r\n## (5) Unambiguity\r\n\r\nInline code and info boxes are sometimes links, and sometimes they're not. The visual difference lies in a dashed versus a solid border, which can be easily overlooked.\r\n\r\nGiven 3 seconds to scan the site, it's not immediately clear if \"nuxt.config.ts\" is clickable or if \"defineNuxtConfig\" is clickable, and if they are not clickable, why not?\r\n\r\n\r\n\r\nOne solution would be to make links appear more like buttons rather than tags. Another option would be to use an arrow, similar to what's done with external links.\r\n\r\n\r\n\r\n\r\n\r\n## The end\r\n\r\nI've only picked a few examples, but I'm aware that there are likely many more cases that need careful consideration before implementing any changes. However, I'm confident that the principles of attention, emphasis, separation, grouping, and unambiguity can be applied to those other cases as well. If any of the points resonate with you, I'm happy to help\r\n\r\n\r\n\r\n",[],1592,"Short analysis on visual clarity: Attention, Emphasis, Separation, Grouping and Unambiguity","2024-06-11T20:32:13Z","https://github.com/nuxt/nuxt.com/issues/1592",0.7992346,{"description":2016,"labels":2017,"number":2027,"owner":1988,"repository":2028,"state":2029,"title":2030,"updated_at":2031,"url":2032,"score":2033},"### Environment\r\n\r\n- Operating System: Darwin\r\n- Node Version: v20.9.0\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: pnpm@9.0.0\r\n- Builder: -\r\n- User Config: app, runtimeConfig, stripe, devtools, modules, gtag, supabase, imports, i18n, colorMode, vue, vite\r\n- Runtime Modules: @nuxtjs/i18n@8.3.1, @nuxtjs/supabase@1.2.1, @nuxt/ui@2.15.2, nuxt-svgo@4.0.0, nuxt-lodash@2.5.3, nuxt-gtag@2.0.5, @nuxtjs/google-fonts@3.2.0, @pinia/nuxt@0.5.1, @pinia-plugin-persistedstate/nuxt@1.2.0, @nuxt/image@1.6.0, @vueuse/nuxt@10.9.0, @unlok-co/nuxt-stripe@3.0.0\r\n- Build Modules: -\r\n\r\n### Version\r\n\r\n2.15.2\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-ui-pqemsg?file=app.vue\r\n\r\n### Description\r\n\r\nWeird behavior with modals on mobile devices(with tap event)\r\nWhen I have modal opened with `prevent-close` attr, I cannot click anything inside modal.\r\nIn element inspection I notice that `touch-action: auto;` adds to clicked elements.\r\n\r\nInitially I noticed this bug on my project.\r\nBy default I have modal opened on the page with prevent close attr, and when I opened another modal, on mobile devices the actions inside second modal were blocked.\r\nBut during creation of reproduction, I've noticed that button don't respond even in the first modal(on mobile device)\r\n\r\nI was able to fix it(in my project), by closing the first modal.\r\nBut it's weird because on desktops everything works fine\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2018,2021,2024],{"name":2019,"color":2020},"bug","d73a4a",{"name":2022,"color":2023},"wontfix-v2","ffffff",{"name":2025,"color":2026},"upstream","78bddb",1746,"ui","closed","On mobile device can't click inside items of modal if multiple are open","2025-03-28T17:57:30Z","https://github.com/nuxt/ui/issues/1746",0.7430747,{"description":2035,"labels":2036,"number":2038,"owner":1988,"repository":1989,"state":2029,"title":2039,"updated_at":2040,"url":2041,"score":2042},"See notes on Figma",[2037],{"name":1985,"color":1986},639,"[Docs] Framework V3 improvements","2023-02-15T12:30:52Z","https://github.com/nuxt/nuxt.com/issues/639",0.7651068,{"description":2044,"labels":2045,"number":2047,"owner":1988,"repository":2028,"state":2029,"title":2048,"updated_at":2049,"url":2050,"score":2051},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v20.16.0`\r\n- Nuxt Version: `3.13.0`\r\n- CLI Version: `3.13.1`\r\n- Nitro Version: `2.9.7`\r\n- Package Manager: `bun@1.1.2`\r\n- Builder: `-`\r\n- User Config: `srcDir`, `compatibilityDate`, `devtools`, `modules`\r\n- Runtime Modules: `@nuxt/ui@2.18.4`, `@nuxt/eslint@0.5.5`, `@pinia/nuxt@0.5.4`, `@nuxt/image@1.8.0`\r\n- Build Modules: `-`\r\n\n\n### Version\n\n2.18.4\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-1fp2ap\r\n\r\nplease open Preview in new tab\n\n### Description\n\nI can't change position of UNotifications component because when I pass props it doesn't override tailwind class it just add my classes right to default classes.\r\n\r\nSolution which helped me: \r\nset class which you don't want to unset like this bottom-[unset]\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2046],{"name":2019,"color":2020},2128,"UNotifications position","2024-10-10T10:16:14Z","https://github.com/nuxt/ui/issues/2128",0.76669014,{"description":2053,"labels":2054,"number":2057,"owner":1988,"repository":2002,"state":2029,"title":2058,"updated_at":2059,"url":2060,"score":2061},"### Environment\r\n\r\nN/A\r\n\r\n### Reproduction\r\n\r\nN/A\r\n\r\n### Describe the bug\r\n\r\nsetup fails\r\n\r\n### Additional context\r\n\r\ncc: @tobiasdiez \r\n\r\nHere are the lines\r\n\r\nhttps://github.com/nuxt/test-utils/blob/86d09da23a2d7ba6b0f3dcf2e9ca8c21655a5218/src/core/server.ts#L17-L71\r\n\r\noffending line for me was 57, but could easily be any other lines\r\n\r\nhttps://github.com/nuxt/test-utils/commit/c4df41db447afe6101df10fbe763b198b12da86d\r\n\r\nis the offending commit \r\n\r\nspecifically this change\r\n\r\nhttps://github.com/nuxt/test-utils/commit/c4df41db447afe6101df10fbe763b198b12da86d#diff-84e9c1e393b43cee97ce99909a2db3a09bf9a2435daa2066b01a838e206edec3\r\n\r\n### Logs\r\n\r\n```shell-script\r\nN/A\r\n```\r\n",[2055,2056],{"name":2019,"color":2020},{"name":1999,"color":2000},918,"`ctx.nuxt` does not exist when `build: false` in setup","2024-12-05T14:26:41Z","https://github.com/nuxt/test-utils/issues/918",0.76813924,{"description":2063,"labels":2064,"number":2066,"owner":1988,"repository":2028,"state":2029,"title":2067,"updated_at":2068,"url":2069,"score":2070},"### Environment\n\nOperating System: Linux\r\nNode Version: v20.15.1\r\nNuxt Version: 3.13.0\r\nCLI Version: 3.13.1\r\nNitro Version: 2.9.7\r\nPackage Manager: bun@1.1.27\r\nBuilder: -\r\nUser Config: devtools, extends, modules, ui\r\nRuntime Modules: @nuxt/ui@2.18.4\r\nBuild Modules: -\n\n### Version\n\nv2.18.4\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-ggpvlu?file=app.vue\n\n### Description\n\nWhen adding `NuxtLink` props (ex: to: '/') to the items of `Dropdown`, causes the next warn:\r\n```\r\nruntime-core.esm-bundler.js?v=13c1e3b9:50 [Vue warn]: Extraneous non-emits event listeners (pointerenter, focus) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the \"emits\" option. \r\n at \u003CRouterLink ref=fn to=\"/\" activeClass=undefined ... > \r\n at \u003CNuxtLink key=0 ref_for=true to=\"/\" ... > \r\n at \u003CMenuItems class=\"relative focus:outline-none overflow-y-auto scroll-py-1 divide-y divide-gray-200 dark:divide-gray-700 ring-1 ring-gray-200 dark:ring-gray-700 rounded-md shadow-lg bg-white dark:bg-gray-800\" static=\"\" > \r\n at \u003CBaseTransition appear=true persisted=false mode=undefined ... > \r\n at \u003CTransition appear=\"\" enterActiveClass=\"transition duration-100 ease-out\" enterFromClass=\"transform scale-95 opacity-0\" ... > \r\n at \u003CMenu as=\"div\" class=\"relative inline-flex text-left rtl:text-right\" onMouseleave=fn\u003ConMouseLeave> > \r\n at \u003CDropdown items= (4) [Array(1), Array(2), Array(2), Array(1)] popper= {placement: 'bottom-start'} > \r\n at \u003CApp key=4 > \r\n at \u003CNuxtRoot>\r\nwarn$1 @ runtime-core.esm-bundler.js?v=13c1e3b9:50\r\nrenderComponentRoot @ runtime-core.esm-bundler.js?v=13c1e3b9:6383\r\ncomponentUpdateFn @ runtime-core.esm-bundler.js?v=13c1e3b9:5065\r\nrun @ reactivity.esm-bundler.js?v=13c1e3b9:150\r\ninstance.update @ runtime-core.esm-bundler.js?v=13c1e3b9:5118\r\nupdateComponent @ runtime-core.esm-bundler.js?v=13c1e3b9:4927\r\nprocessComponent @ runtime-core.esm-bundler.js?v=13c1e3b9:4861\r\npatch @ runtime-core.esm-bundler.js?v=13c1e3b9:4366\r\ncomponentUpdateFn @ runtime-core.esm-bundler.js?v=13c1e3b9:5074\r\nrun @ reactivity.esm-bundler.js?v=13c1e3b9:150\r\ninstance.update @ runtime-core.esm-bundler.js?v=13c1e3b9:5118\r\ncallWithErrorHandling @ runtime-core.esm-bundler.js?v=13c1e3b9:200\r\nflushJobs @ runtime-core.esm-bundler.js?v=13c1e3b9:413\r\nPromise.then\r\nqueueFlush @ runtime-core.esm-bundler.js?v=13c1e3b9:323\r\nqueueJob @ runtime-core.esm-bundler.js?v=13c1e3b9:317\r\n(anonymous) @ runtime-core.esm-bundler.js?v=13c1e3b9:5112\r\nresetScheduling @ reactivity.esm-bundler.js?v=13c1e3b9:235\r\ntriggerEffects @ reactivity.esm-bundler.js?v=13c1e3b9:279\r\ntriggerRefValue @ reactivity.esm-bundler.js?v=13c1e3b9:1045\r\nset value @ reactivity.esm-bundler.js?v=13c1e3b9:1092\r\nprefetch @ nuxt-link.js?v=13c1e3b9:203\r\n(anonymous) @ nuxt-link.js?v=13c1e3b9:226\r\n(anonymous) @ nuxt-link.js?v=13c1e3b9:351\r\nShow 23 more frames\r\nShow less\r\n\r\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2065],{"name":2019,"color":2020},2105,"`UDropdown` Extraneous non-emits event listeners (pointerenter, focus)","2024-09-06T10:17:27Z","https://github.com/nuxt/ui/issues/2105",0.7826727,{"labels":2072,"number":2078,"owner":1988,"repository":1988,"state":2029,"title":2079,"updated_at":2080,"url":2081,"score":2082},[2073,2075],{"name":1999,"color":2074},"E99695",{"name":2076,"color":2077},"2.x","d4c5f9",7513,"[2.13.0] Script not called when refresh or page from direct link","2023-01-22T15:36:02Z","https://github.com/nuxt/nuxt/issues/7513",0.788116,{"description":2084,"labels":2085,"number":2092,"owner":1988,"repository":2028,"state":2029,"title":2093,"updated_at":2094,"url":2095,"score":2096},"### Description\n\nHello! I'm working on a huge project that relies on Nuxt UI v2. We want to upgrade to Nuxt UI v3, but the changes are vast, and I'm wondering if it is possible to have version 2 and version 3 at the same time somehow so we can do an incremental upgrade. If it's not possible, then I would LOVE for this to be a feature request to be able to do somehow.\n\nThanks!",[2086,2089],{"name":2087,"color":2088},"question","d876e3",{"name":2090,"color":2091},"v3","49DCB8",3562,"Incremental upgrade possible?","2025-03-17T16:11:35Z","https://github.com/nuxt/ui/issues/3562",0.79274946,["Reactive",2098],{},["Set"],["ShallowReactive",2101],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"UzqxhmUkovefiyiWhXvm7lscO6IGp0Zm8QfttRWGuto":-1},"/nuxt/ui/2104"]