\r\n \u003CUInput v-model=\"coverInfoStore.coverTitle\" />\r\n\r\n### Description\r\n\r\nProblem:\r\nWhen using UTextarea component in conjunction with pinia and v-model, there is an inconsistency in behavior compared to using UInput.\r\n\r\nExpected Behavior:\r\nBoth UInput and UTextarea should behave consistently when used with pinia and v-model. Updates to the bound data should reflect immediately in both components.\r\n\r\nActual Behavior:\r\n\r\nWhen updating the data bound to UInput using v-model, the changes are reflected immediately in the UI.\r\nHowever, when updating the data bound to UTextarea using v-model, the changes are not reflected immediately. \r\n\r\n### Additional context\r\n\r\n\r\n\r\n\r\n### Logs\r\n\r\n_No response_",[2917,2920,2923],{"name":2918,"color":2919},"question","d876e3",{"name":2921,"color":2922},"closed-by-bot","ededed",{"name":2924,"color":2922},"stale",1701,"ui","closed","Inconsistent behavior with UTextarea, pinia, and v-model compared to UInput","2025-06-19T02:12:43Z","https://github.com/nuxt/ui/issues/1701",0.68246746,{"description":2933,"labels":2934,"number":2942,"owner":2908,"repository":2908,"state":2927,"title":2943,"updated_at":2944,"url":2945,"score":2946},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v18.14.0`\r\n- Nuxt Version: `3.4.2`\r\n- Nitro Version: `2.3.3`\r\n- Package Manager: `pnpm@8.2.0`\r\n- Builder: `vite`\r\n- User Config: `ssr`, `dev`, `experimental`, `vite`, `typescript`, `css`, `sourcemap`, `runtimeConfig`, `modules`, `devtools`, `content`, `colorMode`, `robots`, `htmlValidator`, `routeRules`\r\n- Runtime Modules: `@nuxt/devtools@0.4.1`, `@nuxt/content@2.6.0`, `@nuxt/image-edge@1.0.0-28020728.5df24eb`, `@nuxtjs/tailwindcss@6.6.6`, `@nuxtjs/color-mode@3.2.0`, `@nuxtjs/robots@3.0.0`, `@nuxtjs/html-validator@1.2.5`, `@pinia/nuxt@0.4.9`, `@vueuse/nuxt@10.1.0`, `nuxt-headlessui@1.1.4`\r\n- Build Modules: `-`\r\n\n\n### Reproduction\n\nI did not manage to create a minimal reproduction yet. I still thought it is useful to open the issue in hope to find others with the same issue.\n\n### Describe the bug\n\nAfter enabling `experimental.renderJsonPayloads`, I have the problem that the pinia state is different on the client.\r\n\r\nInside a component:\r\n```ts\r\nconst auth = useAuthStore() // A pinia store\r\n\r\n// server { .... }\r\n// client null\r\nconsole.log(process.server ? 'server' : 'client', auth.user)\r\n```\r\n\r\nThis is fixed after disabling `experimental.renderJsonPayloads` again.\n\n### Additional context\n\n`auth.user` is set inside an async store method, which makes a HTTP request.\r\nThis store method is called inside a global middleware on the server.\n\n### Logs\n\n_No response_",[2935,2938,2939],{"name":2936,"color":2937},"3.x","29bc7f",{"name":2905,"color":2906},{"name":2940,"color":2941},"needs reproduction","FBCA04",20448,"experimental.renderJsonPayloads results in missing pinia state on the client","2023-07-13T18:07:42Z","https://github.com/nuxt/nuxt/issues/20448",0.71474975,{"description":2948,"labels":2949,"number":2955,"owner":2908,"repository":2908,"state":2927,"title":2956,"updated_at":2957,"url":2958,"score":2959},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v16.14.2\r\n- Nuxt Version: 3.6.5\r\n- Nitro Version: 2.5.2\r\n- Package Manager: yarn@3.2.0\r\n- Builder: vite\r\n- User Config: alias, app, components, css, devtools, experimental, extends, i18n, modules, nitro, pinia, router, runtimeConfig, tailwindcss, telemetry, veeValidate, vite, vue\r\n- Runtime Modules: @pinia/nuxt@^0.4.11, @nuxtjs/stylelint-module@^5.1.0, @nuxtjs/i18n@8.0.0-beta.13, @vueuse/nuxt@10.2.1, @vee-validate/nuxt@^4.9.6, @nuxtjs/tailwindcss@^6.8.0\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\nI provide a minimal reproduction\r\n\r\nhttps://stackblitz.com/edit/github-brcyvh?file=pages%2Findex.vue\r\n\r\n### Describe the bug\r\n\r\nI'm using a plugin `$bp` that use `useBreakpoints` from `vueuse` under the hood https://vueuse.org/core/useBreakpoints\r\n\r\nMy goal is to change the `size` of the component `NButton` based on a boolean : `$bp.isLapM`.\r\n\r\nWhen we refresh the page, we see that the `btnSize` inside the button is updated but the class still `-sm`.\r\nIf I resize my window, both are updated\r\n\r\nWe are migrating our app to Nuxt 3, and on Nuxt 2 we didn't have this issue... :cry: \r\n\r\nI'm a doing something wrong about this ? \r\n\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2950,2951,2952],{"name":2936,"color":2937},{"name":2905,"color":2906},{"name":2953,"color":2954},"upstream","E8A36D",22722,"class / style attribute does not update on node mismatch","2023-08-23T10:38:59Z","https://github.com/nuxt/nuxt/issues/22722",0.7193022,{"description":2961,"labels":2962,"number":2965,"owner":2908,"repository":2908,"state":2927,"title":2966,"updated_at":2967,"url":2968,"score":2969},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v16.17.1`\r\n- Nuxt Version: `3.0.0-rc.12`\r\n- Nitro Version: `0.6.0`\r\n- Package Manager: `npm@8.15.0`\r\n- Builder: `vite`\r\n- User Config: `runtimeConfig`, `meta`, `modules`, `image`, `components`, `build`, `css`, `postcss`, `vite`\r\n- Runtime Modules: `@pinia/nuxt@0.4.3`, `nuxt-icons@2.0.2`, `@vueuse/nuxt@9.4.0`, `@nuxt/image-edge@1.0.0-27769790.4b27db3`\r\n- Build Modules: `-`\n\n### Reproduction\n\n**Source code**\r\nhttps://github.com/novicell/nuxt3-boilerplate/tree/repro/ssr-layout-hydration\r\n\r\n**Deployed version**\r\nhttps://repro-ssr-layout-hydration--novicell-nuxt3-boilerplate.netlify.app/\n\n### Describe the bug\n\nHi!\r\n\r\nWe have a general Nuxt 3 boilerplate at Novicell that we use to build various client websites.\r\n\r\nWe've encountered a problem with server side rendering things that is loaded in the layout such as navigation, footer etc.\r\n\r\nWe use `useAsyncData` inside our `[...slug].vue` for rendering CMS pages. To save requests we usually include the navigation in the response on the first page load and set it in our Pinia store which is then loaded inside the layout.\r\n\r\nIt looks like the layout is rendered before the `[...slug].vue` and is not hydrated during SSR until the page is loaded.\r\n\r\nI've made a small example where I have an initial value in the store that is then updated upon fetch of the page.\r\n\r\n**SSR value**\r\n\r\n\r\n**Hydrated value**\r\n\r\n\r\nI'm not sure if this is a bug or a matter of configuration, but please let us know how to solve it 😄 \n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2963,2964],{"name":2936,"color":2937},{"name":2905,"color":2906},15474,"Pinia store values in layout is not server side rendered","2024-01-11T21:54:36Z","https://github.com/nuxt/nuxt/issues/15474",0.7205179,{"description":2971,"labels":2972,"number":2979,"owner":2908,"repository":2926,"state":2927,"title":2980,"updated_at":2981,"url":2982,"score":2983},"### For what version of Nuxt UI are you suggesting this?\n\nv3.0.0-alpha.x\n\n### Description\n\nAs of now, in Nuxt UI v3.0.0-alpha.x, the `SIDE_OPTIONS` constant is defined as follows:\n\n``` ts\nconst SIDE_OPTIONS: [\"top\", \"right\", \"bottom\", \"left\"];\n```\n\nThe current four directions cannot meet the practical development needs. For example, when there is a button on the far right of the screen to open a dropdown menu, it cannot automatically appear as 'bottom-right'.Tooltips, dropdown menus, or popovers may require positioning beyond the basic cardinal directions to avoid obscuring content or to better fit within the viewport.\n\n#### Proposed Enhancement\n\nI propose to extend the SIDE_OPTIONS constant to include combinations of the cardinal directions to allow for greater flexibility and finer control over positioning. The updated SIDE_OPTIONS would be:\n\n``` ts\nconst SIDE_OPTIONS = [\n \"top\", \"right\", \"bottom\", \"left\",\n \"bottom-left\", \"bottom-right\",\n \"left-top\", \"left-bottom\",\n \"top-left\", \"top-right\",\n \"right-top\", \"right-bottom\"\n];\n```\n\n\n### Additional context\n\n| | |\n| ----------- | ----------- |\n|  | |\n\n\n",[2973,2976],{"name":2974,"color":2975},"enhancement","a2eeef",{"name":2977,"color":2978},"v3","49DCB8",2712,"Side needs more direction","2024-11-20T19:59:29Z","https://github.com/nuxt/ui/issues/2712",0.72136337,{"description":2985,"labels":2986,"number":2989,"owner":2908,"repository":2908,"state":2927,"title":2990,"updated_at":2991,"url":2992,"score":2993},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.20.2\r\n- Nuxt Version: 3.10.3\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.6\r\n- Package Manager: yarn@4.1.1\r\n- Builder: -\r\n- User Config: devtools, modules, piniaPersistedstate, watch\r\n- Runtime Modules: @pinia/nuxt@0.5.1, @pinia-plugin-persistedstate/nuxt@1.2.0\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nhttps://gitlab.com/javier-sedano/ufe5\r\n\r\nHowever, I have applied the workaround defined in https://github.com/nuxt/nuxt/issues/22943#issuecomment-1702506306 so in order to reproduce it again, comment out some lines:\r\n\r\nThe architecture is a bit complex (it is a microfrontend poc) so use:\r\n\r\nyarn install\r\nyarn initAll\r\nedit app-core/node_modules/javier-sedano-ufe5-store-library-pinia/src/stores/total.store.ts and comment out the workaround from lines 7-8.\r\nyarn dev\r\nbrowse localhost:4100\r\n\r\nWARNING: upon reload, it does not fail anymore, it only fails in the first load after a fresh start.\r\n\n\n### Describe the bug\n\nThe console complains with:\r\n\r\nLooks like the bug was detected in Nuxt 3.7.0 and fixed in 3.7.something. It has appeared again, I think. I have verified that it works with Nuxt 3.10.2 and fails with Nuxt 3.10.3 (edit app-core/package.json to check this).\r\n\n\n### Additional context\n\nMateuszStawski says in https://github.com/nuxt/nuxt/issues/22943#issuecomment-2119360501 that it fails for him as well.\n\n### Logs\n\n_No response_",[2987,2988],{"name":2905,"color":2906},{"name":2940,"color":2941},27447,"'getActivePinia()\" was called but there was no active Pinia' is back","2024-10-17T08:09:57Z","https://github.com/nuxt/nuxt/issues/27447",0.7241747,{"description":2995,"labels":2996,"number":2999,"owner":2908,"repository":2908,"state":2927,"title":3000,"updated_at":3001,"url":3002,"score":3003},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v20.7.0\r\n- Nuxt Version: 3.7.4\r\n- CLI Version: 3.9.0\r\n- Nitro Version: 2.6.3\r\n- Package Manager: npm@10.1.0\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/github/lubomirblazekcz/nuxt-layout-repro\r\n\r\n### Describe the bug\r\n\r\nAs mentioned in https://github.com/nuxt/nuxt/issues/15158#issuecomment-1397373067, if NuxtLayout is used in page, the whole layout is re-rendered, even if the contents of the layout don't change.\r\n\r\nThis is clearly visible in repro, the animation occures on each page because of the layout re-render.\r\n\r\nHere is a repro where animation occures only when the layout changes, which would be correct behaviour. This is because the layout is defined in `app.vue`, instead of page - but this is not ideal, because then slot & template doesn't work which is also mentioned in https://github.com/nuxt/nuxt/issues/15158\r\n\r\nhttps://stackblitz.com/github.com/lubomirblazekcz/nuxt-layout-repro/tree/working\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2997,2998],{"name":2936,"color":2937},{"name":2905,"color":2906},23421,"Layout re-renders even if the layout contents are same","2023-09-27T05:47:09Z","https://github.com/nuxt/nuxt/issues/23421",0.7244903,{"description":3005,"labels":3006,"number":3010,"owner":2908,"repository":2908,"state":2927,"title":3011,"updated_at":3012,"url":3013,"score":3014},"\u003C!-- 💚 Thanks for your time to make Nuxt better with your feedbacks 💚\r\n\r\n**IMPORTANT** Before reporting a bug:\r\n\r\n- Please make sure that you have read through Nuxt documentation: https://nuxtjs.org\r\n- If issue is related to a module please create the issue in corresponding repository\r\n- Ensure using latest version of nuxt dependencies using `yarn upgrade nuxt` or `npm upgrade nuxt`\r\n\r\n👍 A properly detailed bug report can save a LOT of time and help fixing issues as soon as possible.\r\n-->\r\n\r\n### Versions\r\n\r\n- nuxt: \u003C!-- ex: v2.13.0 -->\"nuxt\": \"^2.14.6\",\r\n- node: \u003C!-- ex: v12.14.0 -->\r\n\r\n### Reproduction\r\nI am creating a custom plugin for axios so it will be injected to root and context ( please don't suggest me to use @nuxt/axios, I am using it as an example ) and in there I am using store as well as i18n.locale. It works fine until I make a change to the vuex state or change locale of i18n, the plugin does not update when any of these these are changed,\r\nSample code: @/plugins/axios.js\r\n\r\n\u003C!--\r\nLink to a minimal test case based on one of:\r\n- A fork of https://template.nuxtjs.org\r\n- A GitHub repository that can reproduce the bug\r\nWithout a reproduction, it is so hard to address problem :(\r\n-->\r\n\r\n\u003Cdetails open>\r\n\u003Csummary>Additional Details\u003C/summary>\r\n\u003Cbr>\r\n\u003C!-- Attaching `nuxt.config`, dependencies, logs or code snippets would help to find the issue -->\r\n\u003C/details>\r\n\r\n### Steps to reproduce\r\n```\r\nimport axios from \"axios\";\r\nexport default ({ app, store }, inject) => {\r\n const lang = app.i18n.locale;\r\n const token = store.getters[\"auth/token\"]\r\n const baseAxios = axios.create({\r\n baseURL: \"...\",\r\n headers: {\r\n Authorization: `Bearer ${token}`,\r\n lang\r\n }\r\n });\r\n inject(\"axios\", baseAxios);\r\n};\r\n```\r\n\r\n### What is Expected?\r\nI want the plugin to update to the lates state of vuex. (state of `token` in my case)\r\n\r\n### What is actually happening?\r\nIt is not reactive to store changes",[3007],{"name":3008,"color":3009},"2.x","d4c5f9",8682,"Store in custom plugin is not reactive","2023-01-18T15:31:07Z","https://github.com/nuxt/nuxt/issues/8682",0.7270732,{"description":3016,"labels":3017,"number":3026,"owner":2908,"repository":2926,"state":2927,"title":3027,"updated_at":3028,"url":3029,"score":3030},"### Environment\n\n- Operating System: Windows_NT\r\n- Node Version: v21.6.1\r\n- Nuxt Version: 3.11.2\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.6\r\n- Package Manager: npm@10.2.4\r\n- Builder: -\r\n- User Config: devtools, app, nitro, runtimeConfig, modules, svgoOptions, security, routeRules, vercel, colorMode, ui, i18n, maxDuration \r\n- Runtime Modules: nuxt-security@1.3.2, nuxt-svgo@4.0.2, @nuxt/ui@2.18.3, nuxt-zod-i18n@1.9.0, @nuxtjs/i18n@8.3.3, @nuxt/icon@1.4.4\r\n- Build Modules: -\n\n### Version\n\n2.18.3\n\n### Reproduction\n\n- no need\n\n### Description\n\nthe color attribute is not connected by any mean to the off state icon. even if you change the off state in `nuxt.config.ts` `ui` config to: \r\n```js \r\n ui:{\r\n toggle:{\r\n icon:{\r\n off:'text-{color}-400 dark:text-{color}-500'\r\n },\r\n default:{\r\n color: '{color ? color: primary}'\r\n }\r\n }\r\n },\r\n ```\r\nit will still be applying this to the \"on\" icon and not the off one, which is useless\r\n\r\ncurrent solution is to add your class in the off icon as such:\r\n\r\n```js\r\n \u003CUToggle\r\n on-icon=\"i-mingcute:moon-stars-fill\"\r\n off-icon=\"i-material-symbols:clear-day-rounded text-yellow-500\"\r\n v-model=enabled\r\n >\u003C/UToggle>\r\n```\r\n\r\nSuggestions: \r\n* connect to color attribute to both icons so it can be done like this: \r\n```js\r\n \u003CUToggle\r\n on-icon=\"i-mingcute:moon-stars-fill\"\r\n off-icon=\"i-material-symbols:clear-day-rounded\"\r\n :class=\"enabled ? 'bg-black fill-gray-50' : 'bg-orange-50'\"\r\n :color=\"enabled ? 'red' : 'yellow'\"\r\n v-model=enabled\r\n >\u003C/UToggle>\r\n```\r\n* or just add another one\r\n\r\n\r\nOn a side note: \r\nthere should be a place to edit the circle as well at least the color, preferably the ability to just add classes\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3018,3021,3024,3025],{"name":3019,"color":3020},"bug","d73a4a",{"name":3022,"color":3023},"triage","ffffff",{"name":2921,"color":2922},{"name":2924,"color":2922},2013,"UToggle Color attribute not connected to off Icon","2025-06-19T02:12:11Z","https://github.com/nuxt/ui/issues/2013",0.72869843,["Reactive",3032],{},["Set"],["ShallowReactive",3035],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fT9eQRLUeYmHyNQ_ulqLDZKvK5mLUY01qqnIiPq2GUzE":-1},"/nuxt/ui/1792"]