\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```",[2866],{"name":2867,"color":2868},"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.7817525,{"description":2876,"labels":2877,"number":2878,"owner":2856,"repository":2857,"state":2858,"title":2879,"updated_at":2880,"url":2881,"score":2882},"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.7910764,{"description":2884,"labels":2885,"number":2891,"owner":2856,"repository":2892,"state":2858,"title":2893,"updated_at":2894,"url":2895,"score":2896},"### Description\r\n\r\n**Problem**\r\nThe current implementation of the keyboard shortcuts composable (defineShortcuts) doesn't work correctly with non-Latin keyboard layouts, such as Arabic. This limits the usability of the composable for users with different language settings.\r\n\r\n**Proposed Solution**\r\nImplement an optional configuration flag '_layoutIndependent_' that, when set to true, makes the composable use KeyboardEvent.code instead of KeyboardEvent.key. This change will allow the shortcuts to work regardless of the keyboard layout or language setting.\r\n\r\n### Additional context\r\n\r\n_No response_",[2886,2888],{"name":2853,"color":2887},"a2eeef",{"name":2889,"color":2890},"triage","ffffff",2293,"ui","Add support for non-Latin keyboard layouts in defineShortcuts composable","2025-01-10T07:47:55Z","https://github.com/nuxt/ui/issues/2293",0.79304355,{"description":2898,"labels":2899,"number":2908,"owner":2856,"repository":2892,"state":2909,"title":2910,"updated_at":2911,"url":2912,"score":2913},"### 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_",[2900,2903,2905],{"name":2901,"color":2902},"bug","d73a4a",{"name":2904,"color":2890},"wontfix-v2",{"name":2906,"color":2907},"upstream","78bddb",1746,"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.75198925,{"description":2915,"labels":2916,"number":2918,"owner":2856,"repository":2857,"state":2909,"title":2919,"updated_at":2920,"url":2921,"score":2922},"See notes on Figma",[2917],{"name":2853,"color":2854},639,"[Docs] Framework V3 improvements","2023-02-15T12:30:52Z","https://github.com/nuxt/nuxt.com/issues/639",0.75689876,{"description":2924,"labels":2925,"number":2928,"owner":2856,"repository":2870,"state":2909,"title":2929,"updated_at":2930,"url":2931,"score":2932},"### 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",[2926,2927],{"name":2901,"color":2902},{"name":2867,"color":2868},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.76331997,{"description":2934,"labels":2935,"number":2937,"owner":2856,"repository":2892,"state":2909,"title":2938,"updated_at":2939,"url":2940,"score":2941},"### 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_",[2936],{"name":2901,"color":2902},2128,"UNotifications position","2024-10-10T10:16:14Z","https://github.com/nuxt/ui/issues/2128",0.76674944,{"description":2943,"labels":2944,"number":2951,"owner":2856,"repository":2892,"state":2909,"title":2952,"updated_at":2953,"url":2954,"score":2955},"### 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!",[2945,2948],{"name":2946,"color":2947},"question","d876e3",{"name":2949,"color":2950},"v3","49DCB8",3562,"Incremental upgrade possible?","2025-03-17T16:11:35Z","https://github.com/nuxt/ui/issues/3562",0.78121907,{"description":2957,"labels":2958,"number":2964,"owner":2856,"repository":2856,"state":2909,"title":2965,"updated_at":2966,"url":2967,"score":2968},"### Environment\n\nChrome 115 macOS\n\n### Reproduction\n\n1. Go to https://nuxt.com/docs/guide/going-further/experimental-features#experimental-features\r\n1. Scroll to the bottom\r\n\r\nExpected result: There is content after the reactivityTransform section that matches the content in https://github.com/nuxt/nuxt/blob/main/docs/2.guide/3.going-further/1.experimental-features.md.\r\nActual result: There is no content after the reactivityTransform section.\r\n\r\n\u003Cimg width=\"1372\" alt=\"Screenshot-Experimental Features · Nuxt Advanced-2023-08-08-09-52-01\" src=\"https://github.com/nuxt/nuxt/assets/3038600/a32f1d4c-9e00-4978-8bfc-45d9f809436c\">\r\n\n\n### Describe the bug\n\nThis page in the docs does not load completely: https://nuxt.com/docs/guide/going-further/experimental-features#experimental-features\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2959,2962],{"name":2960,"color":2961},"3.x","29bc7f",{"name":2867,"color":2963},"E99695",22540,"Experimental Features page does not load completely in docs","2023-08-08T15:23:44Z","https://github.com/nuxt/nuxt/issues/22540",0.78667074,["Reactive",2970],{},["Set"],["ShallowReactive",2973],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fUzqxhmUkovefiyiWhXvm7lscO6IGp0Zm8QfttRWGuto":-1},"/nuxt/ui/2104"]