`\n\nit doesn't work that way\n\nI really ask for help!",[2884,2885],{"name":2868,"color":2869},{"name":2871,"color":2872},3098,"Table filtered, sorting fetch","2025-01-14T11:05:37Z","https://github.com/nuxt/ui/issues/3098",0.70191115,{"description":2892,"labels":2893,"number":2896,"owner":2874,"repository":2875,"state":2876,"title":2897,"updated_at":2898,"url":2899,"score":2900},"### Description\n\nCurrently, when I use `UAvatar` and the user's photo returns a 404, it generates an `\u003Cimg>` with the broken image icon:\n\n\nIs there a way to make the image that returns 404 display text from the alt instead?\nIn the documentation it says:\n>When no icon or text is provided, the initials of the `alt` prop are used as fallback\n\nCan `alt` also be used as a fallback when the image is broken?\n\n\n\nExample:\n\n",[2894,2895],{"name":2868,"color":2869},{"name":2871,"color":2872},3809,"[UAvatar] If the image does not exist, return text","2025-04-06T16:07:33Z","https://github.com/nuxt/ui/issues/3809",0.71397364,{"description":2902,"labels":2903,"number":2907,"owner":2874,"repository":2908,"state":2876,"title":2909,"updated_at":2910,"url":2911,"score":2912},"### Describe the feature\n\nNuxtHub enforce build to cloudflare but test-utils only refer to node build location, so if I use setup() with build: true it will resolve to error, for the workaround now is using host that point to the dev server that can handle NuxtHub related features.\n\n### Additional information\n\n- [ ] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2904],{"name":2905,"color":2906},"enhancement","a2eeef",934,"test-utils","Support non-node build targets for e2e testing","2024-12-05T06:38:10Z","https://github.com/nuxt/test-utils/issues/934",0.72188574,{"description":2914,"labels":2915,"number":2922,"owner":2874,"repository":2875,"state":2876,"title":2923,"updated_at":2924,"url":2925,"score":2926},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.9.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.8.3\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@2.19.2, nuxt-svgo@4.0.9, @pinia/nuxt@0.9.0, pinia-plugin-persistedstate/nuxt, @nuxtjs/i18n@9.1.0, nuxt-jsonld@2.1.0, @nuxtjs/robots@5.0.0, nuxt-gtag@3.0.2, @sentry/nuxt/module@8.42.0, nuxt-time@1.0.3, @nuxt/eslint@0.7.2\n- Build Modules: -\n\n\n### Version\n\nv2.19.2\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-ncxoznzw\n\n### Description\n\nIf you define your own color for tailwinds, and attempt to use it on a UButton component with the link variant, it will not work and give the following error:\n\n```\n500\nvariant?.replaceAll is not a function\n\nat ComputedRefImpl.fn (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@nuxt+ui@2.19.2_vite@6.0.3_vue@3.5.13/node_modules/@nuxt/ui/dist/runtime/components/elements/Button.js:142:18)\nat refreshComputed (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:353:29)\nat get value (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:1558:5)\nat unref (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:1431:29)\nat Object.get (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+reactivity@3.5.13/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js?v=177a248a:1437:64)\nat Object.get (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:3099:26)\nat Proxy._sfc_render (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@nuxt+ui@2.19.2_vite@6.0.3_vue@3.5.13/node_modules/@nuxt/ui/dist/runtime/components/elements/Button.js:199:17)\nat renderComponentRoot (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:6521:16)\nat hydrateSubTree (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:5309:32)\nat ReactiveEffect.componentUpdateFn [as fn] (https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io/_nuxt/node_modules/.pnpm/@vue+runtime-core@3.5.13/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js?v=177a248a:5334:13)\n```\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2916,2919],{"name":2917,"color":2918},"bug","d73a4a",{"name":2920,"color":2921},"triage","ffffff",2860,"[UButton] Using a custom color on the link variant causes an error","2025-02-06T03:16:14Z","https://github.com/nuxt/ui/issues/2860",0.7364232,{"description":2928,"labels":2929,"number":2932,"owner":2874,"repository":2933,"state":2934,"title":2935,"updated_at":2936,"url":2937,"score":2938},"",[2930],{"name":2917,"color":2931},"ff281a",120,"nuxt.com","closed","Fix file fetch in project content editor","2022-03-07T14:15:00Z","https://github.com/nuxt/nuxt.com/issues/120",0.66544396,{"description":2940,"labels":2941,"number":2945,"owner":2874,"repository":2874,"state":2934,"title":2946,"updated_at":2947,"url":2948,"score":2949},"I want to do endless loading of my goods. For this, I create a scroll.js file. The function loadData () using axios makes a get request and receives the data and sends it to the data (vue). There is also a .vue page where you need to substitute these data. I'm trying to do this with \u003Cno -ssr> but I do not fully understand how?\r\n\r\n`scroll.js`\r\n```\r\nvar app = new Vue({\r\n el: '#preview-list',\r\n data: {\r\n goods: []\r\n }\r\n});\r\n$(function() {\r\n\r\n var imgs = app.goods;\r\n var prevScroll = 0,\r\n step = 1,\r\n requestAllowed = true, //запрос разрешен\r\n $pagination = $('.clear-both'),\r\n $list = $('#preview-list-items'),\r\n limit = 6,\r\n offset = 0,\r\n url ='https://jsonplaceholder.typicode.com/photos';\r\n loadData();\r\n console.log('2', imgs);\r\n\r\n\r\n //при скролле страницы\r\n $(window).scroll(function() {\r\n\r\n var scroll = $(window).scrollTop(),\r\n endOfProducts = $pagination.offset().top - $(window).height(), // величина конца продуктов\r\n direction = scroll > prevScroll, //направление?\r\n stepMap = step >= 0 && step \u003C= 3; //кол-во подгрузок\r\n\r\n if (step == 3) {\r\n requestAllowed = false;\r\n $('#preview-buttons a').show();\r\n } else {\r\n $('#preview-buttons a').hide();\r\n }\r\n\r\n if (scroll > endOfProducts && requestAllowed && direction && stepMap) {\r\n loadData();\r\n }\r\n\r\n prevScroll = scroll;\r\n });\r\n\r\n $('#preview-show-more').click(function() {\r\n $(this).blur();\r\n step = 0;\r\n requestAllowed = true;\r\n $('#preview-buttons a').hide();\r\n loadData();\r\n });\r\n\r\n function loadData() {\r\n requestAllowed = false;\r\n axios.get(url)\r\n .then(function (response) {\r\n requestAllowed = true;\r\n var data = [];\r\n for (var i = 0, max = response.data.length; i \u003C max; i++) {\r\n imgs.push(response.data[i]);\r\n }\r\n imgs.length = limit;\r\n console.log('i', imgs);\r\n limit += limit;\r\n step++;\r\n })\r\n .catch(function (error) {\r\n console.log(error);\r\n });\r\n }\r\n});\r\n```\r\n`.vue`\r\n```\r\n\u003Ctemplate>\r\n\u003Cdiv>\r\n \u003CFormLine/>\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>",[2942],{"name":2943,"color":2944},"2.x","d4c5f9",1572,"endless loading no working","2023-01-18T15:41:59Z","https://github.com/nuxt/nuxt/issues/1572",0.68711156,{"description":2951,"labels":2952,"number":2958,"owner":2874,"repository":2875,"state":2934,"title":2959,"updated_at":2960,"url":2961,"score":2962},"### 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_",[2953,2956,2957],{"name":2954,"color":2955},"duplicate","cfd3d7",{"name":2905,"color":2906},{"name":2871,"color":2872},4172,"Uselect and UselectMenu content infinite scroll","2025-05-23T13:55:50Z","https://github.com/nuxt/ui/issues/4172",0.69534665,{"description":2964,"labels":2965,"number":2968,"owner":2874,"repository":2875,"state":2934,"title":2969,"updated_at":2970,"url":2971,"score":2972},"### 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.",[2966,2967],{"name":2868,"color":2869},{"name":2871,"color":2872},3070,"How can I customize component styles in v3?","2025-01-13T00:58:26Z","https://github.com/nuxt/ui/issues/3070",0.69572663,{"description":2974,"labels":2975,"number":2979,"owner":2874,"repository":2875,"state":2934,"title":2980,"updated_at":2981,"url":2982,"score":2983},"### 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_",[2976,2977],{"name":2905,"color":2906},{"name":2978,"color":2921},"wontfix-v2",2737,"Specify a components variant for each color mode.","2025-03-03T22:31:17Z","https://github.com/nuxt/ui/issues/2737",0.70041865,["Reactive",2985],{},["Set"],["ShallowReactive",2988],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fQacrP8kD_INPWrePxmBIFCHazgSj3Txtc6M9dzyxZOY":-1},"/nuxt/nuxt.com/712"]