\r\n Loading\r\n \u003C/div>\r\n \u003C/template>\r\n \u003Cdiv class=\"content\" ref=\"someRef\">\r\n This text should NOT be large!\r\n Remove the \u003Cpre>ref=\"someRef\"\u003C/pre> from the parent and it works\r\n \u003C/div>\r\n \u003C/ClientOnly>\r\n\u003C/template>\r\n```\r\n\r\n**Expected behaviour when loading the page:**\r\nA big loading spinner, and, when everything is done loading, some normal text, like this:\r\n\r\n\r\n**Instead,** you get this:\r\n\r\n\r\nWhen you remove the `ref=\"someRef\"` from the content div, it works as expected",[],"nuxt","icon","open","Unexpected behaviour when using an Icon within ClientOnly fallback","2023-12-18T12:08:48Z","https://github.com/nuxt/icon/issues/129",0.733572,{"description":3147,"labels":3148,"number":3149,"owner":3139,"repository":3140,"state":3141,"title":3150,"updated_at":3151,"url":3152,"score":3153},"I want to share common icons between projects using nuxt layers. I would prefer to keep my icons in svg files. Unfortunately, the `nuxt-icons` module does not meet my expectations (import all icons), so I decided to use your solution.\r\n\r\nWhen I hold the icon in `/components/global` everything works great. Unfortunately, when I keep this icon in a nuxt layer, I get a string with the name instead of the icon.\r\n\r\nI would also love to be able to use `param-case` in the `name` property.\r\n\r\nReproduction: https://stackblitz.com/edit/github-qddkmm?file=base/nuxt.config.ts",[],48,"Can't use svg icons from nuxt layer","2024-05-07T08:36:47Z","https://github.com/nuxt/icon/issues/48",0.73537034,{"description":3155,"labels":3156,"number":3166,"owner":3139,"repository":3167,"state":3141,"title":3168,"updated_at":3169,"url":3170,"score":3171},"### Description\n\nUsing `\u003CUNavigationMenu>` it adds an external icon when prop `to` is an external link: \n\n\u003Cimg width=\"196\" height=\"69\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/e7417d54-ca16-48c2-9992-a54a9bed764d\" />\n\nUnfortunately, `UButton` doesnt have this feature. Even with the prop `trailingIcon` the same behavior cant be archived manually in an easy manner because the icon wont be small, at the top and grayed out. Currently it would require to make it fully manually:\n\n```\n\u003CUButton :to=\"externalUrl\" target=\"_blank\">\n \u003Cspan\n >To external provider\u003CIcon\n name=\"i-material-symbols:arrow-outward-rounded\"\n class=\"size-3 align-top opacity-70\"\n />\u003C/span>\n \u003C/UButton>\n```\n\n\u003Cimg width=\"191\" height=\"48\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/f89198d7-a64f-4a04-815b-41ddba68c3cc\" />\n\nIt would be great if a button would either automatically add the icon, like `\u003CUNavigationMenu>` does, or would have a prop `externalIcon` that can be set to true.\n\n### Additional context\n\n\n\n_No response_",[3157,3160,3163],{"name":3158,"color":3159},"enhancement","a2eeef",{"name":3161,"color":3162},"v3","49DCB8",{"name":3164,"color":3165},"triage","ffffff",4501,"ui","Add external icon option to UButton and ULink","2025-07-11T09:39:53Z","https://github.com/nuxt/ui/issues/4501",0.73942935,{"description":3173,"labels":3174,"number":3178,"owner":3139,"repository":3167,"state":3179,"title":3180,"updated_at":3181,"url":3182,"score":3183},"### Description\n\nIn case we need to pass an image URL to any component with icons (for example `Button`), we currently need to use slots when they are available (which is not always the case, for example the input icon of `CommandPalette`). It would be helpful if the `Icon` component could accept an URL and use `#build/ui-image-component` instead.\n\nExample use case: allowing users to upload/set their own icons.\n\n\n\n### Additional context\n\n_No response_",[3175,3176,3177],{"name":3158,"color":3159},{"name":3161,"color":3162},{"name":3164,"color":3165},4030,"closed","Allow image url for icons","2025-05-15T14:39:30Z","https://github.com/nuxt/ui/issues/4030",0.6861013,{"description":3185,"labels":3186,"number":3187,"owner":3139,"repository":3140,"state":3179,"title":3188,"updated_at":3189,"url":3190,"score":3191},"In my own projects I want to name how I build the component \"Icon\".\r\n\r\nI think as a package it would make way more sense for the component name to be \"NuxtIcon\" with an \"icon\" class instead of just \"Icon\" with name.\r\n\r\nAlso see this:\r\nhttps://vuejs.org/style-guide/rules-essential.html#use-multi-word-component-names\r\n(not super relevant due to how I would use it probably lol)\r\n\r\nI'd like to look at my own codebase and make the icon component custom, like:\r\n\r\n```html\r\n\u003C!-- Icon.vue -->\r\n\u003Ctemplate>\r\n\u003Cdiv class=\"aspect-square rounded-full h-20 text-2xl flex items-center justify-center text-white\">\r\n \u003CNuxtIcon :icon=\"icon\" />\r\n\u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\ndefineProps({ icon: String })\r\n\u003C/script>\r\n```",[],174,"Can the Base component be changed to \"NuxtIcon\" instead of \"Icon\" with the \"name\" attribute?","2024-06-26T16:45:07Z","https://github.com/nuxt/icon/issues/174",0.698509,{"description":3193,"labels":3194,"number":3195,"owner":3139,"repository":3140,"state":3179,"title":3196,"updated_at":3197,"url":3198,"score":3199},"Hi,\n\nI’ve searched high and low and didn’t find this covered anywhere, apologies if this has been addressed already.\n\nI am using @nuxt/icon with @iconify and the VS Code Intellisense plugin, works great.\n\nI have a custom component that I would like to pass autocompleted string values to, something like:\n\n```html\n\u003CHighlight\n icon-name=\"...\"\n\u003C!-- ^ This should suggest values such as \"bxs:success\" etc, same as the \u003CIcon> component directly -->\n```\n\nI tried this:\n\n```ts\n// Highlight.vue\n\nimport type { ExtractPublicPropTypes } from 'vue';\nimport { Icon } from '#components';\ntype IconName = ExtractPublicPropTypes\u003Ctypeof Icon['name']>\n\nconst props = defineProps\u003C{\n iconName: IconName\n}>()\n```\n\nI get a vague `{} & {}` as the resulting type. Any help appreciated!",[],412,"Infer \u003CIcon> \"name\" as prop to be used in a custom component","2025-07-02T09:24:15Z","https://github.com/nuxt/icon/issues/412",0.69907534,{"description":3201,"labels":3202,"number":3209,"owner":3139,"repository":3139,"state":3179,"title":3210,"updated_at":3211,"url":3212,"score":3213},"### Environment\n\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v18.0.0\r\n- Nuxt Version: 3.7.4\r\n- CLI Version: 3.9.0\r\n- Nitro Version: 2.6.3\r\n- Package Manager: yarn@1.22.17\r\n- Builder: -\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-dvdiuv?file=app.vue\n\n### Describe the bug\n\nHi,\r\n\r\nI encountered a problem while creating a generic app button component in my project. I am using the dynamic component creation method in Vue and when I send a _NuxtLink_ value to the is attribute of the component tag, it does not render. I didn't encounter this problem on nuxt2. But it doesn't work on nuxt3. How can I solve it?\r\n\r\n`\u003CComponent is=\"NuxtLink\" to=\"/page\">Link\u003C/Component>` doesn't render as a tag\n\n### Additional context\n\nMy button component\r\n\r\n```\r\n\u003Ctemplate lang=\"pug\">\r\nComponent.app-button(\r\n :is=\"as\"\r\n v-bind=\"$attrs\"\r\n :class=\"[variantClass, textTypeClass, linkTypeClass, outlineClass, blockClass, iconPositionClass, loadingClass]\"\r\n role=\"button\"\r\n)\r\n template(v-if=\"$slots.prepend\")\r\n slot(name=\"prepend\")\r\n\r\n template(v-if=\"iconPosition === 'left'\")\r\n .app-button__icon\r\n slot(name=\"icon\")\r\n\r\n slot\r\n\r\n template(v-if=\"iconPosition === 'right'\")\r\n .app-button__icon\r\n slot(name=\"icon\")\r\n\r\n template(v-if=\"$slots.append\")\r\n slot(name=\"append\")\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nimport type { ButtonPropTypes } from './AppButton.component.types'\r\n\r\nconst baseClassName = 'app-button'\r\n\r\nconst props = withDefaults(defineProps\u003CButtonPropTypes>(), {\r\n as: 'button',\r\n variant: 'default',\r\n text: false,\r\n link: false,\r\n outline: false,\r\n block: false,\r\n iconPosition: 'left'\r\n})\r\n\r\nconst slots = useSlots()\r\n\r\nconst variantClass = computed(() => `${baseClassName}--${props.variant}`)\r\n\r\nconst textTypeClass = computed(() => props.text && `${baseClassName}--text`)\r\nconst linkTypeClass = computed(() => props.link && `${baseClassName}--link`)\r\nconst outlineClass = computed(() => props.outline && `${baseClassName}--outline`)\r\nconst blockClass = computed(() => props.block && `${baseClassName}--block`)\r\n\r\nconst iconPositionClass = computed(() => {\r\n if (slots.icon) {\r\n if (props.iconPosition === 'left') {\r\n return `${baseClassName}--iconLeft`\r\n } else if (props.iconPosition === 'right') {\r\n return `${baseClassName}--iconRight`\r\n } else {\r\n return null\r\n }\r\n } else {\r\n return null\r\n }\r\n})\r\n\r\nconst loadingClass = computed(() => props.loading && `${baseClassName}--loading`)\r\n\u003C/script>\r\n\r\n\u003Cstyle lang=\"scss\" src=\"./AppButton.component.scss\">\u003C/style>\r\n```\r\n\n\n### Logs\n\n_No response_",[3203,3206],{"name":3204,"color":3205},"3.x","29bc7f",{"name":3207,"color":3208},"pending triage","E99695",23450,"\u003Ccomponent is=\"NuxtLink\" ...> doesn't render ","2023-09-28T12:29:53Z","https://github.com/nuxt/nuxt/issues/23450",0.7097015,{"description":3215,"labels":3216,"number":3227,"owner":3139,"repository":3167,"state":3179,"title":3228,"updated_at":3229,"url":3230,"score":3231},"### Description\n\n### 🚀 Feature Request\nI’d like to suggest adding a built-in `\u003CDynamicRenderer>` component to Nuxt UI that renders dynamic, nested components based on a configuration object.\n\n### 📋 Motivation\nThis component would be ideal for:\n\n- Form builders\n\n- CMS-driven UIs\n\n- Low-code tools\n\n- Declarative UI rendering\n\nIt simplifies the process of rendering deeply nested structures without hardcoding components in the template.\n\n### 💡 Proposal\nThe DynamicRenderer would accept a config prop that defines:\n\n- The component to render\n\n- Props to bind\n\n- Slot content (including nested component trees)\n\nIt would recursively render components and their slots. Here's an example implementation:\n\n\n#### `DynamicRenderer.vue`\n```vue\n\u003Cscript setup lang=\"ts\">\ndefineProps\u003C{ config: any }>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003Ccomponent :is=\"config.component\" v-bind=\"config\">\n \u003Ctemplate\n v-for=\"(slotContent, slotName) in config.slots\"\n #[slotName]\n >\n \u003Ctemplate v-if=\"typeof slotContent === 'string'\">\n {{ slotContent }}\n \u003C/template>\n\n \u003Ctemplate v-else-if=\"Array.isArray(slotContent)\">\n \u003CDynamicRenderer\n v-for=\"(nested, index) in slotContent\"\n :key=\"index\"\n :config=\"nested\"\n />\n \u003C/template>\n\n \u003Ctemplate v-else>\n \u003CDynamicRenderer :config=\"slotContent\" :key=\"slotContent.name || slotName\" />\n \u003C/template>\n \u003C/template>\n \u003C/component>\n\u003C/template>\n```\n\n\n\n#### `index.vue`\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { UButton, UCard, UContainer, UForm, UFormField, UInput } from '#components'\n\nconst config = {\n component: UContainer,\n class: 'h-screen flex justify-center items-center',\n slots: {\n default: [\n {\n component: UCard,\n slots: {\n default: [{\n component: UForm,\n class: 'space-y-4',\n slots: {\n default: [\n {\n component: UFormField,\n label: 'Username',\n name: 'username',\n required: true,\n slots: {\n default: [\n {\n component: UInput,\n placeholder: 'Enter Username',\n value: 'hh'\n }\n ]\n }\n },\n {\n component: UFormField,\n label: 'Password',\n name: 'password',\n required: true,\n slots: {\n default: [\n {\n component: UInput,\n type: 'password',\n placeholder: 'Enter Password',\n value: 'hh'\n }\n ]\n }\n },\n {\n component: UButton,\n label: 'Login',\n icon: 'i-lucide-user',\n variant: 'soft',\n type: 'submit',\n block: true\n }\n ]\n }\n }]\n }\n }\n ]\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003CDynamicRenderer :config=\"config\" />\n\u003C/template>\n```\n\n### Result \n\n\nIt would also be great if using this approach could eliminate the need to manually import components like:\n\n```ts\nimport { UButton, UCard, UContainer, UForm, UFormField, UInput } from '#components'\n```\n\nand instead rely on automatic resolution by the renderer itself.\n\nThanks for your work on Nuxt UI – it’s a fantastic toolkit!\n\n### Additional context\n\n_No response_",[3217,3220,3221,3222,3225],{"name":3218,"color":3219},"feature","A27AF6",{"name":3161,"color":3162},{"name":3164,"color":3165},{"name":3223,"color":3224},"closed-by-bot","ededed",{"name":3226,"color":3224},"stale",4138,"✨ Feature Request: Add `\u003CDynamicRenderer>` component for config-driven UI rendering","2025-09-03T02:01:06Z","https://github.com/nuxt/ui/issues/4138",0.7165245,{"description":3233,"labels":3234,"number":3235,"owner":3139,"repository":3140,"state":3179,"title":3236,"updated_at":3237,"url":3238,"score":3239},"Although it looks redundant, Iconify uses `\u003CIcon icon=\"...\" />` as the Vue component. Since this module uses Iconify, why not keeping the same structure so we can just copy the component from their lib? An alias prop would be welcomed if I'm sounding too radical 😋 That way we can use both `name` and `icon`.",[],51,"[question] Why not using `icon` as a prop instead of `name`?","2023-02-16T15:53:34Z","https://github.com/nuxt/icon/issues/51",0.7167858,{"description":3241,"labels":3242,"number":3248,"owner":3139,"repository":3167,"state":3179,"title":3249,"updated_at":3250,"url":3251,"score":3252},"### Environment\n\nN/A\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0\n\n### Reproduction\n\nhttps://ui.nuxt.com/components/input#loading-icon\n\n### Description\n\nBoth icons, the one shown in the example `i-lucide-repeat-2` and the component's default prop, `i-lucide-refresh-cw` look bad when rotated. I think there's a lot of room for improvement, these icons aren't meant to be animated.\n\nLuckily, there are some Lucide icons which _are_ designed to be animated.\n\nHow about https://lucide.dev/icons/loader-circle?\n\nOr https://lucide.dev/icons/loader?\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3243,3246,3247],{"name":3244,"color":3245},"bug","d73a4a",{"name":3161,"color":3162},{"name":3164,"color":3165},4162,"`Input`'s default loading icon needs improvement","2025-05-16T16:06:11Z","https://github.com/nuxt/ui/issues/4162",0.7192096,["Reactive",3254],{},["Set"],["ShallowReactive",3257],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f0FoT4t7qCmzz3m5YuNz1c-Du79Oj8N3AxUCuoqDSbZ8":-1},"/nuxt/ui/4728"]