\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",[2920,2922],{"name":2868,"color":2921},"a2eeef",{"name":2898,"color":2899},2689,"closed","[Table] reactive columns for auto-generated UTable columns","2024-11-21T13:11:03Z","https://github.com/nuxt/ui/issues/2689",0.70856667,{"description":2930,"labels":2931,"number":2934,"owner":2874,"repository":2935,"state":2924,"title":2936,"updated_at":2937,"url":2938,"score":2939},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.9.3\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: modules, devtools\r\n- Runtime Modules: @pinia/nuxt@0.5.1, @nuxt/test-utils/module@3.10.0\r\n- Build Modules: -\n\n### Reproduction\n\n[Minimal reproduction](https://stackblitz.com/edit/github-ftohct?file=app.nuxt.test.ts)\n\n### Describe the bug\n\nHi all! Do I understand correctly that on the current version of `@nuxt/test-utils` there is no way to pre-fill a store using this instruction from the [Pinia](https://pinia.vuejs.org/cookbook/testing.html#Initial-State) documentation.\r\n\r\n```\r\nimport { describe, test, expect, vi } from 'vitest';\r\nimport { createTestingPinia } from '@pinia/testing';\r\nimport { mountSuspended } from '@nuxt/test-utils/runtime';\r\nimport App from './app.vue';\r\n\r\nconst siteInfoMock = {\r\n title: 'Nuxt 3',\r\n url: 'https://nuxt.com',\r\n};\r\n\r\ndescribe('App link', async () => {\r\n const wrapper = await mountSuspended(App, {\r\n global: {\r\n plugins: [\r\n createTestingPinia({\r\n initialState: {\r\n Site: {\r\n siteInfo: siteInfoMock,\r\n },\r\n },\r\n createSpy: vi.fn,\r\n }),\r\n ],\r\n },\r\n });\r\n\r\n test('Should render the link with a substitute title', () => {\r\n expect(wrapper.get('[data-test-id=\"link\"]').text()).toBe(\r\n siteInfoMock.title\r\n );\r\n\r\n // The test passes because the data in the \"Site\" store has not been changed.\r\n // expect(wrapper.get('[data-test-id=\"link\"]').text()).toBe('Example.com');\r\n });\r\n\r\n test('Should render the link with the spoofed link', () => {\r\n expect(wrapper.get('[data-test-id=\"link\"]').attributes().href).toBe(\r\n siteInfoMock.url\r\n );\r\n\r\n // The test passes because the data in the \"Site\" store has not been changed.\r\n // expect(wrapper.get('[data-test-id=\"link\"]').attributes().href).toBe('https://example.com');\r\n });\r\n});\r\n```\r\nThe component is also rendered, receiving default data from the store. In turn, I expect replacement data in the store.\r\n\r\nI tried to look for information about a similar case in local chats and here in different threads, but I just didn’t receive any information. Several users have raised a similar issue.\r\n\r\n* https://discordapp.com/channels/473401852243869706/1199858451833168004/1199858605831241820\r\n* https://discordapp.com/channels/473401852243869706/496371343542059011/1195669478403489862\r\n* https://discordapp.com/channels/473401852243869706/496371343542059011/1153407426087886942\r\n\r\nIt seems like `@pinia/nuxt` & `@nuxt/test-utils` are not fully compatible, namely the `createTestingPinia` & `mountSuspended` methods.\r\n\r\nPlease tell me, someone was able to solve the problem of how to create a test instance of Pinia.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\nstdout | createSuspenseBoundary (/home/projects/rlmilwjxk.github/node_modules/.pnpm/@vue+runtime-core@3.4.15/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:1439:43)\r\n\u003CSuspense> is an experimental feature and its API will likely change.\r\n\r\nstderr | warn$1 (/home/projects/rlmilwjxk.github/node_modules/.pnpm/@vue+runtime-core@3.4.15/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:46:13)\r\n[Vue warn]: App already provides property with key \"Symbol(pinia)\". It will be overwritten with the new value.\n```\n",[2932],{"name":2884,"color":2933},"5D08F5",737,"test-utils","mountSuspended & createTestingPinia","2024-11-28T08:58:33Z","https://github.com/nuxt/test-utils/issues/737",0.71391803,{"description":2941,"labels":2942,"number":2943,"owner":2874,"repository":2944,"state":2924,"title":2945,"updated_at":2946,"url":2947,"score":2948},"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.7158972,{"description":2950,"labels":2951,"number":2952,"owner":2874,"repository":2944,"state":2924,"title":2953,"updated_at":2954,"url":2955,"score":2956},"I don't have a whole lot of info for this issue other than when in `mode: 'css'` it spits out\r\n\r\n```\r\nUncaught (in promise) DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules\r\n```\r\n\r\nbut `mode: 'svg'` works just fine\r\n\r\nIts worth noting that the icons still render in CSS mode",[],189,"[BUG]: CSS mode causes DOMException","2024-07-15T16:07:16Z","https://github.com/nuxt/icon/issues/189",0.71717244,{"description":2958,"labels":2959,"number":2962,"owner":2874,"repository":2963,"state":2924,"title":2964,"updated_at":2965,"url":2966,"score":2967},"",[2960],{"name":2868,"color":2961},"1ad6ff",715,"nuxt.com","[Docs] Remove `useScrollToHeading` from TOC","2022-06-30T12:08:37Z","https://github.com/nuxt/nuxt.com/issues/715",0.7227333,{"description":2969,"labels":2970,"number":2974,"owner":2874,"repository":2963,"state":2924,"title":2975,"updated_at":2976,"url":2977,"score":2978},"If a website don't have background, it will look like this:\n",[2971],{"name":2972,"color":2973},"bug","ff281a",488,"Set background on preview iframe","2022-05-11T14:44:35Z","https://github.com/nuxt/nuxt.com/issues/488",0.72415453,["Reactive",2980],{},["Set"],["ShallowReactive",2983],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fmWsIpGZHF0FfBd6c7CQp2nVXnNO3gemHya3qaaDNk1U":-1},"/nuxt/nuxt.com/490"]