\n \u003CUTable :data=\"data\">\n \u003Ctemplate #empty>\n no data\n \u003C/template>\n \u003C/UTable>\n \u003C/div>\n\u003C/template>\n\n````\nIn this example, if the table's data is initially empty and then updated (by clicking the \"rerender\" button), you will notice that the content in the empty slot disappears. This indicates that the table's data is no longer empty, yet nothing is rendered in the table. The reason is that the table's columns are not reactive. I believe this limitation is caused by TanStack.\n\n### Potential Solution\n```vue\nwatch(columns, (newColumns) => {\n tableApi.setOptions((prevOpt) => ({\n ...prevOpt,\n columns: newColumns \n }))\n}) \n```\n\n\n\n\n### Additional context\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { watch } from 'vue'\nimport { getCoreRowModel, useVueTable } from '@tanstack/vue-table'\ntype Data = {\n id: number,\n name: string\n}\n\nconst defaultData = [\n {\n id: 1,\n name: \"a\"\n },\n {\n id: 2,\n name: \"b\"\n }\n]\n\nconst data = ref\u003CData[]>([])\nconst columns = computed(() => Object.keys(data.value[0] ?? {}).map((accessorKey: string) => ({ accessorKey, header: accessorKey })))\n\nconst tableApi = useVueTable({\n data,\n columns: columns.value,\n getCoreRowModel: getCoreRowModel()\n})\n\nconst rerender = () => {\n if (!data.value.length) {\n\n data.value = defaultData\n } else {\n data.value = []\n }\n}\n\n/* watch(columns, (newColumns) => {\n tableApi.setOptions((prevOpt) => ({\n ...prevOpt,\n columns: newColumns \n }))\n}) */\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003CUButton label=\"rerender\" @click=\"rerender()\" />\n \u003Cdiv>\n {{ columns }}\n \u003C/div>\n \u003Cbr>\n \u003Cdiv>\n {{ tableApi.options }}\n \u003C/div>\n \u003C/div>\n\u003C/template>\n\n```\n\nnoticed that tableApi's columns won't change along with updates to the data",[2945,2948],{"name":2946,"color":2947},"enhancement","a2eeef",{"name":2949,"color":2950},"v3","49DCB8",2689,"ui","[Table] reactive columns for auto-generated UTable columns","2024-11-21T13:11:03Z","https://github.com/nuxt/ui/issues/2689",0.70697033,{"description":2958,"labels":2959,"number":2960,"owner":2911,"repository":2961,"state":2937,"title":2962,"updated_at":2963,"url":2964,"score":2965},"Ok, so I've followed the instructions here: https://nuxt.com/modules/icon#custom-local-collections\n\nI have my folder in \"assets\", with some icons to test:\n\n\n\nThen I have this in my nuxt.config.ts:\n\n```\nicon: {\n aliases: aliases,\n clientBundle: {\n // list of icons to include in the client bundle\n icons: iconsToBundle,\n\n // scan all components in the project and include icons\n scan: true,\n\n // guard for uncompressed bundle size, will fail the build if exceeds\n sizeLimitKb: 256\n },\n customCollections: [\n {\n prefix: 'nemus',\n dir: './assets/icons'\n }\n ]\n },\n```\n\nAnd it seems to be correctly configured, as I get this message when I run the app:\n\n```\n[1:21:18 PM] ✔ Nuxt Icon loaded local collection nemus with 10 icons\n```\n\nBut when I use one of the icons in a component like this:\n```\n\u003CIcon\n name=\"nemus:trucker-blue\"\n :class=\"['size-4 min-w-4', props.isFav ? 'text-fav ' : 'text-secondary-300']\"\n />\n```\n\nI get this error on the console:\n```\n WARN [Icon] failed to load icon nemus:trucker-blue (repeated 5 times)\n\n\n WARN [nuxt] Failed to stringify dev server logs. Received DevalueError: Cannot stringify arbitrary non-POJOs. You can define your own reducer/reviver for rich types following the instructions in https://nuxt.com/docs/api/composables/use-nuxt-app#payload.\n```\n\nI'm guessing the problem is that I didn't understand this line in the docs:\n```\nNote that custom local collections require you to have a server to serve the API. \n```\n\nIf anyone could shed some light, I'd appreciate it a lot :)",[],355,"icon","Help: can't figure out the server part for custom collections","2025-02-11T13:00:52Z","https://github.com/nuxt/icon/issues/355",0.7209925,{"description":2967,"labels":2968,"number":2973,"owner":2911,"repository":2924,"state":2937,"title":2974,"updated_at":2975,"url":2976,"score":2977},"at the moment redeploys on cloud providers with `experimental.buildCache` result in font files not being included in published site\r\n\r\n",[2969,2970],{"name":2921,"color":2922},{"name":2971,"color":2972},"good first issue","7057ff",266,"support for nuxt `experimental.buildCache`","2024-09-23T14:18:03Z","https://github.com/nuxt/fonts/issues/266",0.7250865,{"description":2979,"labels":2980,"number":2983,"owner":2911,"repository":2984,"state":2937,"title":2985,"updated_at":2986,"url":2987,"score":2988},"",[2981],{"name":2921,"color":2982},"ff281a",490,"nuxt.com","[Content] Fix blog articles sort by date","2022-05-13T16:00:22Z","https://github.com/nuxt/nuxt.com/issues/490",0.7314342,{"labels":2990,"number":2999,"owner":2911,"repository":2911,"state":2937,"title":3000,"updated_at":3001,"url":3002,"score":3003},[2991,2993,2996],{"name":2946,"color":2992},"8DEF37",{"name":2994,"color":2995},"discussion","538de2",{"name":2997,"color":2998},"3.x","29bc7f",13525,"Reactivity transform for built-in composables","2023-02-07T00:04:07Z","https://github.com/nuxt/nuxt/issues/13525",0.73648113,{"description":3005,"labels":3006,"number":3007,"owner":2911,"repository":2936,"state":2937,"title":3008,"updated_at":3009,"url":3010,"score":3011},"Script looks like this:\r\n```js\r\n!function (w, d, t) {\r\n w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=[\"page\",\"track\",\"identify\",\"instances\",\"debug\",\"on\",\"off\",\"once\",\"ready\",\"alias\",\"group\",\"enableCookie\",\"disableCookie\", \"holdConsent\", \"revokeConsent\", \"grantConsent\"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i\u003Cttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(var e=ttq._i[t]||[],n=0;n\u003Cttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var i=\"https://analytics.tiktok.com/i18n/pixel/events.js\";ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=i,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};var o=document.createElement(\"script\");o.type=\"text/javascript\",o.async=!0,o.src=i+\"?sdkid=\"+e+\"&lib=\"+t;var a=document.getElementsByTagName(\"script\")[0];a.parentNode.insertBefore(o,a)};\r\n ttq.load('YOUR_ID_HERE');\r\n}(window, document, 'ttq');\r\n```\r\nDocs can be found [here](https://ads.tiktok.com/help/article/get-started-pixel?lang=en)",[],166,"Add Tiktok Pixel to registry","2024-07-23T14:40:36Z","https://github.com/nuxt/scripts/issues/166",0.73800987,{"description":3013,"labels":3014,"number":3015,"owner":2911,"repository":2961,"state":2937,"title":3016,"updated_at":3017,"url":3018,"score":3019},"I'm using @nuxt/icon as part of @nuxt/ui, but I don't think, this makes a difference.\n\nWhat I'm doing/I'd like to do:\n- I reference the icon `mdi:cog`. It's displayed nicely in the current text color, switching light/dark mode.\n- I take the SVG code that is used in the rendered HTML. (I want to slightly modify it, but I'm not doing it just to demonstrate the issue.) I put the SVG coder into a `cog.svg` in my custom icons folder.\n- I reference it with `custom:cog`.\n\nWhat I'm expecting:\n- Both icons should behave exactly the same with respect to size/color/...\n\nWhat actually happens:\n- While the `mdi:cog` icon has text color and switches when changing dark/light mode, the `custom:cog` icon is always displayed in black.\n\nWhen looking at the rendered HTML/CSS it looks very different for custom icon than for the non-custom icon:\nWhile the `mdi:cog` uses the css propery `mask-image`, the `custom:cog` uses `background-image´.\n\nIt would be very cool to either change this behavior so that custom icons behave like regular icons or at least document the difference.",[],324,"Custom icon gets rendered differently (mask-image vs. background-image)","2024-12-18T09:49:35Z","https://github.com/nuxt/icon/issues/324",0.7605347,["Reactive",3021],{},["Set"],["ShallowReactive",3024],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fpRz_W3wAGMMvdw-mpce_x9a01RQJmZ20GFa5ubr7jc8":-1},"/nuxt/fonts/187"]