\r\n \u003Cdiv class=\"grid preview-list\" id='preview-list' data-url=\"https://jsonplaceholder.typicode.com/photos\">\r\n \u003Cdiv class=\"tovar container preview-list-items\" id=\"preview-list-items\">\r\n \u003Cno-ssr placeholder=\"Loading\">\r\n\r\n \u003Cdiv class=\"hidden_tovar\" v-for=\"good in goods\" @click=\"goToLink\">\r\n\r\n \u003Ca :href=\"'/product/'+good.id\">\u003Cimg :src=\"good.image\" alt=\"\" class=\"big\">\u003C/a>\r\n\r\n\r\n \u003Cdiv class=\"info\">\r\n \u003Cspan class=\"brand\">“{{good.brend}}”\u003C/span>\r\n \u003Ch2 class=\"goodsTitle\">{{good.title}}\u003C/h2>\r\n \u003Cp class=\"desc goodsDesc\">{{good.description}}\u003C/p>\r\n \u003C/div>\r\n\r\n \u003Cdiv class=\"prices\">\r\n \u003Cnuxt-link :to=\"'/product/'+good.id\">\u003Cimg :src=\"good.image\" alt=\"\" class=\"mini\">\u003C/nuxt-link>\r\n \u003Cdiv class=\"price\">от\u003Cspan class=\"goodsPrice\">{{good.min_price}}\u003C/span>\u003Cspan class=\"rub\">С\u003C/span>\u003C/div>\r\n \u003Cdiv class=\"tovar_hidden_box_content\">\r\n \u003Cdiv>\u003Cp>{{good.sostav}}\u003C/p>\u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/div>\r\n \u003C/no-ssr>\r\n \u003C/div>\r\n \u003Cdiv class=\"sale\">\u003C/div>\r\n \u003C/div>\r\n \u003Cdiv class=\"clear-both\">\u003C/div>\r\n \u003Cdiv id=\"preview-buttons\">\r\n \u003C/div>\r\n \u003Cdiv class=\"clear-both\">\u003C/div>\r\n \u003C!--\u003C/div>-->\r\n\u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\n import FormLine from '~/components/formLine'\r\n export default {\r\n\r\n head: {\r\n script: [\r\n { src: '/js/scroll.js' }\r\n```\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/c1403\">#c1403\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3072],{"name":3073,"color":3074},"2.x","d4c5f9",1572,"endless loading no working","2023-01-18T15:41:59Z","https://github.com/nuxt/nuxt/issues/1572",0.68711156,{"description":3081,"labels":3082,"number":3088,"owner":3026,"repository":3027,"state":3064,"title":3089,"updated_at":3090,"url":3091,"score":3092},"### Description\n\nHello there\nCurrently, \u003CUSelect /> and \u003CUSelectMenu /> components render options within a fixed-height dropdown. It is complicated to deal with large datasets. When displaying large lists of options, this can lead to performance issues. Is it possible we can get something like VueUse infinite scroll?\n[https://vueuse.org/core/useinfinitescroll/#useinfinitescroll](url) ??\n\n### Additional context\n\n_No response_",[3083,3086,3087],{"name":3084,"color":3085},"duplicate","cfd3d7",{"name":3037,"color":3038},{"name":3023,"color":3024},4172,"Uselect and UselectMenu content infinite scroll","2025-05-23T13:55:50Z","https://github.com/nuxt/ui/issues/4172",0.69534665,{"description":3094,"labels":3095,"number":3098,"owner":3026,"repository":3027,"state":3064,"title":3099,"updated_at":3100,"url":3101,"score":3102},"### Description\n\nHow can I customize component styles in v3?\nI learned from `https://ui3.nuxt.dev/getting-started/theme` that styles can be customized in `app.config.ts` For example:\n```ts\nexport default defineAppConfig({\n uiPro: {\n header: {\n slots: {\n root: 'bg-[var(--ui-bg)]/75 backdrop-blur border-b border-[var(--ui-border)] sticky top-0 z-50',\n container: 'flex items-center justify-between gap-3 h-[var(--ui-header-height)]',\n left: 'lg:flex-1 flex items-center gap-1.5',\n center: 'hidden lg:flex',\n right: 'flex items-center justify-end lg:flex-1 gap-1.5',\n title: 'shrink-0 font-bold text-xl text-[var(--ui-text-highlighted)] flex items-end gap-1.5',\n toggle: 'lg:hidden',\n content: 'lg:hidden',\n overlay: 'lg:hidden',\n header: '',\n body: 'p-4 sm:p-6 overflow-y-auto'\n },\n variants: {\n toggleSide: {\n left: {\n toggle: '-ms-1.5'\n },\n right: {\n toggle: '-me-1.5'\n }\n }\n }\n }\n }\n})\n```\nHowever, after testing this approach, it doesn’t seem to work. So I’d like to ask specifically how to modify the style of an entire component in v3.\nFor instance, I want to customize the style of `UHeader`\nPlease forgive me if this is a silly question. English is not my native language, so I might have missed some details mentioned elsewhere.",[3096,3097],{"name":3020,"color":3021},{"name":3023,"color":3024},3070,"How can I customize component styles in v3?","2025-01-13T00:58:26Z","https://github.com/nuxt/ui/issues/3070",0.69572663,{"description":3104,"labels":3105,"number":3110,"owner":3026,"repository":3027,"state":3064,"title":3111,"updated_at":3112,"url":3113,"score":3114},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nMay already be a way to do this but if not It would be nice to specify a variant for light and dark on a component. \nFor instance outline inputs on light mode and soft for dark mode. \n\n` \u003CUInput variant=\"{light: 'outline', dark: 'soft'}\" />\n`\n\n### Additional context\n\n_No response_",[3106,3107],{"name":3037,"color":3038},{"name":3108,"color":3109},"wontfix-v2","ffffff",2737,"Specify a components variant for each color mode.","2025-03-03T22:31:17Z","https://github.com/nuxt/ui/issues/2737",0.70041865,{"description":3116,"labels":3117,"number":3120,"owner":3026,"repository":3027,"state":3064,"title":3121,"updated_at":3122,"url":3123,"score":3124},"### Description\n\nI was trying to add a bit of margin around the Slideover to look like this:\n\n\n\nI think it can be done cleanly if there was a `\u003Cdiv>` wrapping the whole [DialogContent](https://github.com/nuxt/ui/blob/71728d3c3fa95255db03448c8b87fb75bc2d805c/src/runtime/components/Slideover.vue#L129C7-L129C21)\n\nHow do you suggest to achieve it? \nThank you",[3118,3119],{"name":3020,"color":3021},{"name":3023,"color":3024},3390,"How to add margins around the Slideover panel?","2025-02-25T15:36:40Z","https://github.com/nuxt/ui/issues/3390",0.7048817,{"description":3126,"labels":3127,"number":3132,"owner":3026,"repository":3027,"state":3064,"title":3133,"updated_at":3134,"url":3135,"score":3136},"### Description\n\nI’ve been using USlideover from NuxtUI (v3), and I noticed that there’s no event triggered when clicking on the overlay (outside of the slideover). This makes it tricky to detect when a user dismisses it by clicking outside, rather than using the close button.\n\nIt would be super helpful if USlideover emitted an event whenever it’s closed—whether that’s via the close button or the overlay. That way, we could easily handle any necessary logic when the slideover is dismissed.\n\nIf exposing a close event isn’t feasible, maybe the overlay could be made accessible as a slot? That way, we could wrap it in our own template and attach a @click event directly. This would give us more flexibility in handling interactions.\n\nI took a look at the source code, and it seems like these interactions are already handled internally, but they aren’t exposed as events:\n🔗 [Slideover.vue](https://github.com/nuxt/ui/blob/v3/src/runtime/components/Slideover.vue)\n\nWould be awesome to see this in a future update.\n\n### Additional context\n\n_No response_",[3128,3129,3130],{"name":3037,"color":3038},{"name":3023,"color":3024},{"name":3131,"color":3109},"triage",3225,"Expose close event for USlideover (Overlay & Button)","2025-03-28T17:34:38Z","https://github.com/nuxt/ui/issues/3225",0.7058192,["Reactive",3138],{},["Set"],["ShallowReactive",3141],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fQacrP8kD_INPWrePxmBIFCHazgSj3Txtc6M9dzyxZOY":-1},"/nuxt/nuxt.com/712"]