\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",[2904,2907],{"name":2905,"color":2906},"enhancement","a2eeef",{"name":2908,"color":2909},"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.6488686,{"description":2917,"labels":2918,"number":2921,"owner":2871,"repository":2922,"state":2896,"title":2923,"updated_at":2924,"url":2925,"score":2926},"",[2919],{"name":2889,"color":2920},"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.70429534,{"description":2928,"labels":2929,"number":2934,"owner":2871,"repository":2895,"state":2896,"title":2935,"updated_at":2936,"url":2937,"score":2938},"Hi guys,\r\n\r\nThis package seems just what my project needs! \r\n\r\nUnfortunately, adobe fonts do no load. \r\nN.B> Adobe doesn't load in the playground either...\r\n\r\nHope it will be sorted,\r\n\r\nkind regards,\r\n\r\nMarco",[2930,2931],{"name":2889,"color":2890},{"name":2932,"color":2933},"provider","1161A4",187,"Adobe doesn't load","2024-07-04T05:50:31Z","https://github.com/nuxt/fonts/issues/187",0.71507245,{"description":2940,"labels":2941,"number":2934,"owner":2871,"repository":2945,"state":2896,"title":2946,"updated_at":2947,"url":2948,"score":2938},"### 📚 What are you trying to do?\n\ni use ScriptGoogleMaps component and i want to use LatLng object for set marker in google maps .\r\ni tried to pass this object to options.center and query but its not working.\r\nAm I using it wrong ?\n\n### 🔍 What have you tried?\n\n_No response_\n\n### ℹ️ Additional context\n\n_No response_",[2942],{"name":2943,"color":2944},"help wanted","008672","scripts","googlemaps latlng","2024-08-22T09:11:49Z","https://github.com/nuxt/scripts/issues/187",{"description":2950,"labels":2951,"number":2959,"owner":2871,"repository":2871,"state":2896,"title":2960,"updated_at":2961,"url":2962,"score":2963},"### Version\n\n[v2.6.0](https://github.com/nuxt.js/releases/tag/v2.6.0)\n\n### Reproduction link\n\n[https://codesandbox.io/embed/xpon94z5yz](https://codesandbox.io/embed/xpon94z5yz)\n\n### Steps to reproduce\n\nCreate two pages that for simplicity both extend a base component. This base component should set the transition mode property to `null` or `''` to override default \"out-in\" mode provided by nuxt. Now declare a data function with a dummy property, in our example x = 1, and declare a `created()` lifecycle hook that modifies this property, in our example `this.x = 2`. Now navigate between the two pages and check the value of x. Check browser console log of CBS to easily see the component lifecycle feedback.\n\n### What is expected ?\n\nI'd expect to see x = 2\n\n### What is actually happening?\n\nInstead of having x = 2, x is equal to 1 ( the value declared in the data function ). That happens because data function get called one more time after the created hook and resets x to the initial value:\n\n- data called, x = 1\n- created hook fired, x = 2\n- data called again, x = 1 ( obviously this should not happen )\n\n This happens only when transition mode is not \"out-in\" or \"in-out\" and does not happen without nuxt\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c9046\">#c9046\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2952,2955,2956],{"name":2953,"color":2954},"stale","ffffff",{"name":2868,"color":2869},{"name":2957,"color":2958},"2.x","d4c5f9",5536,"component data() function called twice on pages when transition mode is empty","2023-01-22T15:33:04Z","https://github.com/nuxt/nuxt/issues/5536",0.722915,{"description":2965,"labels":2966,"number":2971,"owner":2871,"repository":2871,"state":2896,"title":2972,"updated_at":2973,"url":2974,"score":2975},"### Environment\n\nStackblitz\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-bqbjuq?file=pages%2Ftest1.vue,pages%2Findex.vue\r\nNavigate back and forth between test1 and index and notice new random numbers.\n\n### Describe the bug\n\nWhen using `useAsyncData` with a static key, I would expect data to only be fetched once. However when navigating back and forth, `useAsyncData` is called repeatedly.\r\n\r\nI would expect the data to stay the same when the key is the same.\r\nI have implemented my `useAsyncData` like so:\r\n```typescript\r\nconst { data, refresh } = useAsyncData('test', async () => {\r\n const number = Math.random();\r\n await new Promise((r) => setTimeout(r, 10));\r\n console.log({ number });\r\n return [...(data.value ?? []), [number]];\r\n});\r\n```\r\nThe reason I use the existing data.value is so we can load more data, when a user requests more. In this case by clicking a button. We use this pattern for pagination.\r\n\r\nOddly enough this doesn't happen when nothing is awaited in `useAsyncData`.\r\n\r\nAnother possibly unrelated bug is that the component crashes silently, when data is access before anything is awaited.\r\nSo this crashes:\r\n```typescript\r\nconst { data, refresh } = useAsyncData('test', async () => {\r\n const number = Math.random();\r\n console.log({data})\r\n await new Promise((r) => setTimeout(r, 10));\r\n console.log({ number });\r\n return [...(data.value ?? []), [number]];\r\n});\r\n```\r\nand this doesn't:\r\n```typescript\r\nconst { data, refresh } = useAsyncData('test', async () => {\r\n const number = Math.random();\r\n await new Promise((r) => setTimeout(r, 10));\r\n console.log({data})\r\n console.log({ number });\r\n return [...(data.value ?? []), [number]];\r\n});\r\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2967,2970],{"name":2968,"color":2969},"3.x","29bc7f",{"name":2868,"color":2869},19027,"Data is refetched when using same key in useAsyncData on client side navigation","2023-02-14T15:21:46Z","https://github.com/nuxt/nuxt/issues/19027",0.72746205,{"description":2977,"labels":2978,"number":2984,"owner":2871,"repository":2871,"state":2896,"title":2985,"updated_at":2986,"url":2987,"score":2988},"Hi, Is it possible to check to and from inside a transition object? I want to use different transitions depending on where the user came from and are going.\r\n\r\nWhat is the suggested way of doing this? Can I keep all my transitions in some folder and export/import them, using the transition function to check which one to use?\r\n\r\nThis is a transition i'm using inside one of my page components:\r\n```\r\n transition: {\r\n mode: 'out-in',\r\n css: false,\r\n enter (el, done) {\r\n let tl = new TimelineMax\r\n let SplitLines = new SplitText('.js-lines', {type: \"words\" })\r\n let lines = SplitLines.words\r\n TweenMax.set('.js-lines', { perspective: 800 })\r\n\r\n function kill () {\r\n SplitLines.revert()\r\n done()\r\n }\r\n\r\n tl.staggerFrom(lines, 1.5, {\r\n opacity: 0,\r\n yPercent: 50,\r\n scale: 0.85,\r\n rotationX: -90,\r\n transformOrigin: \"center bottom\",\r\n ease: Expo.easeOut\r\n }, 0.075, \"+=0\", kill)\r\n },\r\n leave (el, done) {\r\n TweenMax.to(el, 0.5, { autoAlpha: 0, onComplete: done })\r\n }\r\n }\r\n```\r\n\r\nWould something like this be possible?\r\n\r\n```\r\nexport const fromPageOne = {\r\n mode: 'out-in',\r\n css: false,\r\n enter () {\r\n console.log('from page one')\r\n done()\r\n }\r\n}\r\n\r\nexport const fromPageTwo = {\r\n mode: 'out-in',\r\n css: false,\r\n enter () {\r\n console.log('from page two')\r\n done()\r\n }\r\n}\r\n\r\nexport const toPagOne = {\r\n mode: 'out-in',\r\n css: false,\r\n leave () {\r\n console.log('to page one')\r\n done()\r\n }\r\n}\r\n\r\nexport const toPageTwo = {\r\n mode: 'out-in',\r\n css: false,\r\n leave () {\r\n console.log('to page two')\r\n done()\r\n }\r\n}\r\n\r\n```\r\n\r\nthen in the page component:\r\n```\r\ntransition (to, from) {\r\n return from.name == 'index' ? fromPageOne : fromPageTwo\r\n return to.name == 'index' ? toPageOne : toPageTwo\r\n}\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/c1747\">#c1747\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2979,2982,2983],{"name":2980,"color":2981},"question","cc317c",{"name":2953,"color":2954},{"name":2957,"color":2958},1960,"Checking to/from inside transition object?","2023-01-18T15:42:54Z","https://github.com/nuxt/nuxt/issues/1960",0.7302727,["Reactive",2990],{},["Set"],["ShallowReactive",2993],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fYrygtM0MGbgYK_Pjy4cxcerBaqZqgoW3HHp5HXlLZ8M":-1},"/nuxt/icon/355"]