\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",[2923,2924],{"name":2893,"color":2894},{"name":2896,"color":2897},2689,"[Table] reactive columns for auto-generated UTable columns","2024-11-21T13:11:03Z","https://github.com/nuxt/ui/issues/2689",0.70697033,{"description":2931,"labels":2932,"number":2933,"owner":2871,"repository":2934,"state":2915,"title":2935,"updated_at":2936,"url":2937,"score":2938},"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":2940,"labels":2941,"number":2946,"owner":2871,"repository":2884,"state":2915,"title":2947,"updated_at":2948,"url":2949,"score":2950},"at the moment redeploys on cloud providers with `experimental.buildCache` result in font files not being included in published site\r\n\r\n",[2942,2943],{"name":2881,"color":2882},{"name":2944,"color":2945},"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":2952,"labels":2953,"number":2956,"owner":2871,"repository":2957,"state":2915,"title":2958,"updated_at":2959,"url":2960,"score":2961},"",[2954],{"name":2881,"color":2955},"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":2963,"number":2972,"owner":2871,"repository":2871,"state":2915,"title":2973,"updated_at":2974,"url":2975,"score":2976},[2964,2966,2969],{"name":2893,"color":2965},"8DEF37",{"name":2967,"color":2968},"discussion","538de2",{"name":2970,"color":2971},"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":2978,"labels":2979,"number":2980,"owner":2871,"repository":2914,"state":2915,"title":2981,"updated_at":2982,"url":2983,"score":2984},"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,["Reactive",2986],{},["Set"],["ShallowReactive",2989],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fpRz_W3wAGMMvdw-mpce_x9a01RQJmZ20GFa5ubr7jc8":-1},"/nuxt/fonts/187"]