\n \u003Cp class=\"text-neutral-200 text-xs\">\n {{ transactionCost.credits }}\n \u003C/p>\n\u003C/UTooltip>\n```\n\n``` \n\u003CNuxtLayout>\n \u003CUApp :toaster=\"{ position: 'top-right' }\">\n \u003CNuxtPage />\n \u003C/UApp>\n\u003C/NuxtLayout>\n```\n\n\n### Description\n\nThe `app.vue` is already using the `UApp`. When I try to add a `UTooltip` inside the modal, it throw an error.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```\nUncaught (in promise) Error: Injection `Symbol(TooltipProviderContext)` not found. Component must be used within `TooltipProvider`\n```",[3225,3226,3229],{"name":3199,"color":3200},{"name":3227,"color":3228},"needs reproduction","CB47CF",{"name":3215,"color":3216},2801,"[v3][UTooltip] `UTooltip` inside `UModal` causing error","2025-02-06T15:28:30Z","https://github.com/nuxt/ui/issues/2801",0.6848393,{"description":3236,"labels":3237,"number":3251,"owner":3188,"repository":3188,"state":3203,"title":3252,"updated_at":3253,"url":3254,"score":3255},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.12.1\r\n- Nuxt Version: 3.6.1\r\n- Nitro Version: 2.5.2\r\n- Package Manager: yarn@1.22.19\r\n- Builder: vite\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nReproduction : https://stackblitz.com/edit/github-88hbfa?file=pages%2Findex.vue\r\n\r\nSteps to reproduce:\r\n1. In a page file, retrieve data using `useAsyncData` and display an array of elements in the template using this data.\r\n2. Assign the array of elements to a ref variable as described in the Vue.js documentation: https://vuejs.org/guide/essentials/template-refs.html#accessing-the-refs.\r\n3. Display this page in a browser.\r\n4. Edit the JS code of this page (e.g., modify console.log).\r\n5. Errors will appear.\r\n\r\nThis error does not occur if:\r\n- The page is being shown for the first time (no reloading through JS edits).\r\n- The code specified above is inside app.vue and not inside a page that is loaded with NuxtPage (if you copy/paste index.vue inside app.vue, errors do not occur).\r\n- No ref is used\r\n- `useAsyncData` is not used\r\n\r\n### Describe the bug\r\n\r\nConsole error is shown related to scheduler flush.\r\nAlso, `TypeError: Cannot read properties of null (reading 'parentNode')` error is thrown.\r\nSee Logs field for more detials about these errors\r\n\r\n### Workarounds\r\n\r\n- Reload page (meh)\r\n- Use `reactive` instead of `ref`\r\n```html\r\n\u003Ctemplate>\r\n\u003Cdiv>\r\n \u003Cli v-for=\"menuItem in menuItems\" ref=\"(el) => updateMenuItemRefs(el)\">\u003C/li>\r\n\u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\n[...]\r\nconst menuItemRefs = reactive([])\r\nfunction updateMenuItemRefs (el) {\r\n menuItemRefs.push(el)\r\n}\r\n\u003C/script>\r\n```\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n(initially made with `test.vue` page, but error is the same)\r\n\r\n```shell-script\r\ntest.vue:14 edit this message 2\r\n\r\nchunk-3Q27KRJ5.js:97 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core \r\n at \u003CRouteProvider key=\"/test\" routeProps= {Component: {…}, route: {…}} pageKey=\"/test\" ... > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CNuxtLayout> \r\n at \u003CApp key=3 > \r\n at \u003CNuxtRoot>\r\nwarn @ chunk-3Q27KRJ5.js:97\r\nlogError @ chunk-3Q27KRJ5.js:271\r\nhandleError @ chunk-3Q27KRJ5.js:263\r\ncallWithErrorHandling @ chunk-3Q27KRJ5.js:215\r\nflushJobs @ chunk-3Q27KRJ5.js:411\r\nPromise.then (async)\r\nqueueFlush @ chunk-3Q27KRJ5.js:324\r\nqueueJob @ chunk-3Q27KRJ5.js:318\r\nreload @ chunk-3Q27KRJ5.js:517\r\n(anonymous) @ chunk-3Q27KRJ5.js:547\r\n(anonymous) @ test.vue?t=1688346524889:81\r\n(anonymous) @ client.ts:542\r\n(anonymous) @ client.ts:459\r\n(anonymous) @ client.ts:306\r\nqueueUpdate @ client.ts:306\r\nawait in queueUpdate (async)\r\n(anonymous) @ client.ts:159\r\nhandleMessage @ client.ts:157\r\n(anonymous) @ client.ts:90\r\nShow 7 more frames\r\n\r\nchunk-MNWBZQKJ.js:82 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')\r\n at parentNode (chunk-MNWBZQKJ.js:82:30)\r\n at ReactiveEffect.componentUpdateFn [as fn] (chunk-3Q27KRJ5.js:5823:11)\r\n at ReactiveEffect.run (reactivity.esm-bundler.js:178:19)\r\n at instance.update (chunk-3Q27KRJ5.js:5860:52)\r\n at callWithErrorHandling (chunk-3Q27KRJ5.js:213:32)\r\n at flushJobs (chunk-3Q27KRJ5.js:411:9)\r\nparentNode @ chunk-MNWBZQKJ.js:82\r\ncomponentUpdateFn @ chunk-3Q27KRJ5.js:5823\r\nrun @ reactivity.esm-bundler.js:178\r\ninstance.update @ chunk-3Q27KRJ5.js:5860\r\ncallWithErrorHandling @ chunk-3Q27KRJ5.js:213\r\nflushJobs @ chunk-3Q27KRJ5.js:411\r\nPromise.then (async)\r\nqueueFlush @ chunk-3Q27KRJ5.js:324\r\nqueueJob @ chunk-3Q27KRJ5.js:318\r\nreload @ chunk-3Q27KRJ5.js:517\r\n(anonymous) @ chunk-3Q27KRJ5.js:547\r\n(anonymous) @ test.vue?t=1688346524889:81\r\n(anonymous) @ client.ts:542\r\n(anonymous) @ client.ts:459\r\n(anonymous) @ client.ts:306\r\nqueueUpdate @ client.ts:306\r\nawait in queueUpdate (async)\r\n(anonymous) @ client.ts:159\r\nhandleMessage @ client.ts:157\r\n(anonymous) @ client.ts:90\r\nShow 8 more frames\r\n```\r\n",[3238,3241,3242,3245,3248],{"name":3239,"color":3240},"3.x","29bc7f",{"name":3199,"color":3200},{"name":3243,"color":3244},"upstream","E8A36D",{"name":3246,"color":3247},"🔨 p3-minor","FBCA04",{"name":3249,"color":3250},"suspense","C70109",21901,"Unhandled error during execution of scheduler flush related to NuxtPage, useAsyncData & refs ","2024-07-22T19:43:53Z","https://github.com/nuxt/nuxt/issues/21901",0.68951064,{"description":3257,"labels":3258,"number":3261,"owner":3188,"repository":3202,"state":3203,"title":3262,"updated_at":3263,"url":3264,"score":3265},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.4.0\n- Nuxt Version: 3.14.159\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.13.2\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.8\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.8\n\n### Reproduction\n\n-\n\n### Description\n\nDefault classes of container in [docs](https://ui3.nuxt.dev/components/container#theme) is:\n```ts\nexport default defineAppConfig({\n ui: {\n container: {\n base: 'max-w-[var(--ui-container)] mx-auto px-4 sm:px-6 lg:px-8'\n }\n }\n})\n```\n**But no one of classes except `mx-auto` is not was created.**\nI change `--ui-container` variable like in [docs](https://ui3.nuxt.dev/getting-started/theme#container):\n```css\n/** app.css */\n\n@import 'tailwindcss';\n@import '@nuxt/ui';\n\n@theme {\n --container-xl: 1280px;\n}\n\n:root {\n --ui-container: var(--container-xl);\n}\n```\nAs result, container classes is `max-w-7xl mx-auto px-4 sm:px-6 lg:px-8` and still not was created, except `mx-auto`.\n\nBut if i create `app.config.ts`:\n```ts\nexport default defineAppConfig({\n ui: {\n container: {\n base: 'max-w-[var(--ui-container)] mx-auto px-4 sm:px-6 lg:px-8'\n }\n }\n})\n```\nAll is ok, width and other classes are created and applying.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3259,3260],{"name":3199,"color":3200},{"name":3215,"color":3216},2655,"Classes of container component are not working properly","2024-11-16T13:13:33Z","https://github.com/nuxt/ui/issues/2655",0.69045323,{"description":3267,"labels":3268,"number":3270,"owner":3188,"repository":3202,"state":3203,"title":3271,"updated_at":3272,"url":3273,"score":3274},"### Description\n\nHi, using the UTable with Expanded feature is it possible to apply a style to the Expand column ??? I can see how to do this for columns I add but not the expanded column.\r\nAlso is it possible to change the default so the expanded is open by default? Or to change this in the script section?\r\n\r\nThanks I was unable to find answers in the docs.",[3269],{"name":3212,"color":3213},2244,"UTable Expandable questions?","2024-11-05T14:52:12Z","https://github.com/nuxt/ui/issues/2244",0.6917606,{"description":3276,"labels":3277,"number":3287,"owner":3188,"repository":3202,"state":3203,"title":3288,"updated_at":3289,"url":3290,"score":3291},"### Environment\n\nOperating System: Windows 11\nNode Version: v22.14.0\nNuxt Version: 3.15.4\nCLI Version: 3.13.2\nNitro Version: 2.10.4\nPackage Manager: npm@11.1.0\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.12\n\n### Reproduction\n\n.\n\n### Description\n\nI want the Popover component to open when a fetch call is made and the results are displayed in the Popover. For example, I want the search results to be displayed, but as soon as I click on the input, the Popover will be displayed.\n\nThis is my code:\n```\n\u003CUPopover v-model:open=\"search.open\" arrow>\n \u003Cdiv class=\"header-search relative flex flex-row items-center w-full max-w-96\">\n \u003Cinput v-model=\"search.param\"\n class=\"input bg-transparent border rounded-3xl focus:ring-0 outline-0 py-1 px-2 w-full\" />\n \u003C/div>\n \u003Ctemplate #content>\n ...\n \u003C/template>\n \u003C/UPopover>\n```\n\nDid I do something wrong?\nPlease help me.\nThanks\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3278,3279,3280,3281,3284],{"name":3199,"color":3200},{"name":3227,"color":3228},{"name":3215,"color":3216},{"name":3282,"color":3283},"triage","ffffff",{"name":3285,"color":3286},"closed-by-bot","ededed",3303,"open Popover manually","2025-03-25T02:04:46Z","https://github.com/nuxt/ui/issues/3303",0.69333696,{"description":3293,"labels":3294,"number":3299,"owner":3188,"repository":3202,"state":3203,"title":3300,"updated_at":3301,"url":3302,"score":3303},"### Description\n\n I wanted to ask if you have considered implementing a server-side table feature in Nuxt UI v3, similar to the functionality provided by Vuetify's DataTable component.\n\nVuetify's DataTable offers built-in support for server-side pagination, filtering, and sorting, which makes it an excellent solution for handling large datasets efficiently. It would be fantastic to see a similar feature integrated into Nuxt UI v3. \nI would love to hear your thoughts on this feature and whether it's something that could be considered for future releases.\n\nThank you for your time and attention!",[3295,3298],{"name":3296,"color":3297},"enhancement","a2eeef",{"name":3215,"color":3216},3023,"I would like to ask, have you considered making a server side table in v3?","2025-01-13T10:43:59Z","https://github.com/nuxt/ui/issues/3023",0.6937629,{"description":3305,"labels":3306,"number":3309,"owner":3188,"repository":3202,"state":3203,"title":3310,"updated_at":3311,"url":3312,"score":3313},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.11.1\n- Nuxt Version: 3.13.2\n- CLI Version: 3.14.0\n- Nitro Version: 2.9.7\n- Package Manager: bun@1.1.33\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Version\n\nv3.0.0-alpha.7\n\n### Reproduction\n\n```ts\nexport default defineAppConfig({\n ui: {\n colors: {\n neutral: \"zinc\",\n primary: \"rose\",\n },\n button: {\n compoundVariants: [\n {\n color: \"neutral\",\n variant: \"outline\",\n class:\n \"ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] hover:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg)] aria-disabled:bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]\",\n },\n ],\n },\n },\n});\n```\n\n```\nType '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]' is not assignable to type 'DeepPartial\u003C({ color: \"primary\"; variant: \"solid\"; class: string; size?: undefined; square?: undefined; loading?: undefined; leading?: undefined; trailing?: undefined; } | { color: \"secondary\"; variant: \"solid\"; ... 5 more ...; trailing?: undefined; } | ... 46 more ... | { ...; })[], string>'.\n Type '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]' is not assignable to type '{ [key: string]: string | TightMap\u003Cstring>; }'.\n Index signature for type 'string' is missing in type '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]'.ts(2322)\n```\n\n### Description\n\nHi :) I am getting type errors when using `compoundVariant`. \n\nFor example, here is my `app.config.ts`:\n\n```ts\nexport default defineAppConfig({\n ui: {\n colors: {\n neutral: \"zinc\",\n primary: \"rose\",\n },\n button: {\n compoundVariants: [\n {\n color: \"neutral\",\n variant: \"outline\",\n class:\n \"ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] hover:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg)] aria-disabled:bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]\",\n },\n ],\n },\n },\n});\n```\n\nI am getting the following type error for `compoundVariants`:\n```\nType '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]' is not assignable to type 'DeepPartial\u003C({ color: \"primary\"; variant: \"solid\"; class: string; size?: undefined; square?: undefined; loading?: undefined; leading?: undefined; trailing?: undefined; } | { color: \"secondary\"; variant: \"solid\"; ... 5 more ...; trailing?: undefined; } | ... 46 more ... | { ...; })[], string>'.\n Type '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]' is not assignable to type '{ [key: string]: string | TightMap\u003Cstring>; }'.\n Index signature for type 'string' is missing in type '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]'.ts(2322)\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3307,3308],{"name":3199,"color":3200},{"name":3215,"color":3216},2481,"Type error on `compoundVariants`","2024-10-28T21:43:49Z","https://github.com/nuxt/ui/issues/2481",0.694808,["Reactive",3315],{},["Set"],["ShallowReactive",3318],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fwj66fQV3HmwESjWEXdHIAGlspXZUwf2jTg1IwKEq610":-1},"/nuxt/ui/3542"]