\n\u003C/template>\n\n\u003Cscript setup>\n\tconst keyword = ref('');\n\n\twatchEffect(() => {\n\t\tconsole.log('🚀 ~ watchEffect ~ keyword.value:', keyword.value);\n\t});\n\u003C/script>\n```\n\n\n\n```vue\n\u003Ctemplate>\n\t\u003CUInput v-model=\"keyword\" />\n\u003C/template>\n\n\u003Cscript setup>\n\tconst keyword = ref('');\n\n\twatchEffect(() => {\n\t\tconsole.log('🚀 ~ watchEffect ~ keyword.value:', keyword.value);\n\t});\n\u003C/script>\n```\n\n### Logs\n\n```shell-script\n\n```",[2880,2883],{"name":2881,"color":2882},"bug","d73a4a",{"name":2884,"color":2885},"triage","ffffff",2713,"ui","UInput Component Lacks Proper Handling of compositionstart and compositionend","2024-11-21T06:40:46Z","https://github.com/nuxt/ui/issues/2713",0.7233422,{"description":2893,"labels":2894,"number":2896,"owner":2871,"repository":2871,"state":2872,"title":2897,"updated_at":2898,"url":2899,"score":2900},"### Describe the feature\n\nIt would be nice to introduce the possibility to define support for view transition types in the experimental view transitions, as described in the [Google View Transition Update](https://developer.chrome.com/blog/view-transitions-update-io24?hl=it#view-transition-types). \nI suggest introducing `ViewTransitionOptions` in `nuxt.config.ts` to allow defining a callback for the types:\n\n```ts\nexperimental: {\n viewTransition: {\n enabled: true,\n defineTypes: (from, to) => [`${from.name?.toString()}-to-${to.name?.toString()}`],\n },\n},\n```\n\nThis way, you can define animations based on `:active-view-transition-type()`. In this way you could be able to define a slide animations or, more generally, asymmetric animations:\n\n```ts\n:active-view-transition-type(store-to-store-slug) {\n &::view-transition-old(selected-image) {\n // ...\n }\n\n &::view-transition-new(selected-image) {\n // ...\n }\n}\n\n:active-view-transition-type(store-slug-to-store) {\n &::view-transition-old(selected-image) {\n // ...\n }\n\n &::view-transition-new(selected-image) {\n // ...\n }\n}\n```\n\nTo implement this, it should be enough to define `ViewTransitionOptions` and add the following to `view-transitions.client.ts`:\n\n```ts\ntransition = document.startViewTransition!({\n // @ts-expect-error update is not in the type\n update: async () => {\n changeRoute()\n return promise\n },\n types: appViewTransitionTypes(from, to),\n})\n```\n\nP.S. maybe could be useful this as default type for the transitions:\n```ts\n`${from.name?.toString().replace(/___[^_]*$/, '')}-to-${to.name?.toString().replace(/___[^_]*$/, '')}`\n```\nwhere `.replace(/___[^_]*$/, '')}` is to handle localized routes.\n\n\n### Additional information\n\n- [ ] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [x] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [x] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2895],{"name":2868,"color":2869},31972,"Add types support to View Transitions","2025-05-02T02:41:50Z","https://github.com/nuxt/nuxt/issues/31972",0.7322932,{"description":2902,"labels":2903,"number":2904,"owner":2871,"repository":2905,"state":2906,"title":2907,"updated_at":2908,"url":2909,"score":2910},"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","closed","Help: can't figure out the server part for custom collections","2025-02-11T13:00:52Z","https://github.com/nuxt/icon/issues/355",0.6405889,{"description":2912,"labels":2913,"number":2920,"owner":2871,"repository":2887,"state":2906,"title":2921,"updated_at":2922,"url":2923,"score":2924},"### For what version of Nuxt UI are you suggesting this?\n\nv3.0.0-alpha.8\n\n### Description\n\n```vue\n\u003Cscript setup lang=\"ts\">\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 rerender = () => {\n if (!data.value?.length) {\n data.value = defaultData\n } else {\n data.value = []\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003CUButton label=\"rerender\" @click=\"rerender()\" />\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",[2914,2917],{"name":2915,"color":2916},"enhancement","a2eeef",{"name":2918,"color":2919},"v3","49DCB8",2689,"[Table] reactive columns for auto-generated UTable columns","2024-11-21T13:11:03Z","https://github.com/nuxt/ui/issues/2689",0.64483815,{"description":2926,"labels":2927,"number":2930,"owner":2871,"repository":2931,"state":2906,"title":2932,"updated_at":2933,"url":2934,"score":2935},"",[2928],{"name":2881,"color":2929},"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.7038154,{"description":2937,"labels":2938,"number":2943,"owner":2871,"repository":2944,"state":2906,"title":2945,"updated_at":2946,"url":2947,"score":2948},"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",[2939,2940],{"name":2881,"color":2882},{"name":2941,"color":2942},"provider","1161A4",187,"fonts","Adobe doesn't load","2024-07-04T05:50:31Z","https://github.com/nuxt/fonts/issues/187",0.714223,{"description":2950,"labels":2951,"number":2943,"owner":2871,"repository":2955,"state":2906,"title":2956,"updated_at":2957,"url":2958,"score":2948},"### 📚 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_",[2952],{"name":2953,"color":2954},"help wanted","008672","scripts","googlemaps latlng","2024-08-22T09:11:49Z","https://github.com/nuxt/scripts/issues/187",{"description":2960,"labels":2961,"number":2965,"owner":2871,"repository":2871,"state":2906,"title":2966,"updated_at":2967,"url":2968,"score":2969},"I am trying to trigger the leave transition right when the nuxt-link is clicked but the transition gets triggered only after the asyncData of the next route has finished. Is there anyway I can trigger the transitions before that ? \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/c1787\">#c1787\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2962],{"name":2963,"color":2964},"2.x","d4c5f9",2012,"Transitions aren't being triggered before asyncData of the next route is finished","2023-01-18T15:42:55Z","https://github.com/nuxt/nuxt/issues/2012",0.71645784,{"description":2971,"labels":2972,"number":2976,"owner":2871,"repository":2887,"state":2906,"title":2977,"updated_at":2978,"url":2979,"score":2980},"### Description\n\nDuring creation of a flow diagram using vue-flow inside a modal there's an issue with the edge/connectors not lining up correctly and this is due to the transition/animation and to resolve the issue I need to recalculate the flow chart node positions after the transition/animation has ended.\n\nI see there is a after:leave event but would be useful to have a 'after:enter' that fires off after the overlay/modal transitions/animations are finished.\n\nI've tried using @animationed and @transitionend (they don't fire) and also update:open but that fires before the transition is done.\n\n### Additional context\n\nAs a workaround for now I'm listening the the update:open event and then setting a timer to wait for a bit then updating the nodes, which isn't ideal but work. Also turning of transitions on the model works.\n\n```\n\u003Ctemplate>\n \u003CClientOnly>\n \u003CUModal @update:open=\"toggleModelState\">\n \u003CUTooltip text=\"Open Modal.\">\n \u003CUButton icon=\"i-tabler-route-square-2\" color=\"neutral\" variant=\"ghost\" class=\"float-right\" />\n \u003C/UTooltip>\n \u003Ctemplate #body>\n \u003Cdiv class=\"relative w-full h-[75vh]\">\n \u003CVueFlow v-if=\"isModalOpen\" :nodes=\"nodes\" :edges=\"edges\" :nodes-connectable=\"nodesConnectable\" @nodes-initialized=\"layoutGraph\" />\n \u003C/div>\n \u003C/template>\n \u003C/UModal>\n \u003C/ClientOnly>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport { ref, } from 'vue';\nimport { useVueFlow, type Edge, type Node } from '@vue-flow/core'\n\nconst config = useRuntimeConfig();\n\n// Define the props with TypeScript\nconst { treeData } = defineProps\u003C{\n treeData: Array\u003CArray\u003Cnumber>>;\n prefix: string;\n}>();\n\nconst nodesConnectable = ref(false)\nconst isModalOpen = ref(false)\nconst hasParsedPaths = ref(false); // Flag to track if paths have been parsed\n\nconst nodes = ref\u003CNode[]>([]);\nconst edges = ref\u003CEdge[]>([]);\nconst { layout } = useLayout();\nconst { fitView, updateNodeInternals } = useVueFlow();\n\nfunction toggleModelState(event: boolean) {\n if (event === true) {\n // Workaround to fix issue with connectors/edges after transition has finisehd\n //\n setTimeout(() => {\n updateNodeInternals(); // re-calculate node positions\n }, 250);\n }\n isModalOpen.value = event;\n}\n\nasync function layoutGraph(): Promise\u003Cvoid> {\n nodes.value = layout(nodes.value, edges.value);\n await nextTick(() => {\n fitView();\n });\n}\n\u003C/script>\n\n```",[2973,2974,2975],{"name":2915,"color":2916},{"name":2918,"color":2919},{"name":2884,"color":2885},4149,"Modal Component @after:enter event","2025-05-23T10:39:54Z","https://github.com/nuxt/ui/issues/4149",0.72811365,["Reactive",2982],{},["Set"],["ShallowReactive",2985],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fsHSjveyR_UIt2D9ovy8JwhhBi9_unbSIQwde1ColYcM":-1},"/nuxt/fonts/266"]