\n \u003CUInput v-model=\"state.name1\" placeholder=\"...\" />\n\u003C/UModal>\n```\n\nWhen a modal contains one or more input boxes, the first input box will always get focus automatically.\nIf I manually add a close button in the upper right corner, it will trigger a validation when I click it. This is not good. How can I avoid the input box getting focus when opening the modal?\n\n### Additional context\n\n\n\n\n### Logs\n\n```shell-script\n\n```",[1984,1987],{"name":1985,"color":1986},"bug","d73a4a",{"name":1988,"color":1989},"triage","ffffff",3062,"nuxt","ui","open","The input box in the modal will automatically gain focus","2025-01-10T08:36:56Z","https://github.com/nuxt/ui/issues/3062",0.69406545,{"description":1999,"labels":2000,"number":2005,"owner":1991,"repository":1992,"state":2006,"title":2007,"updated_at":2008,"url":2009,"score":2010},"### 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```",[2001,2002],{"name":1985,"color":1986},{"name":2003,"color":2004},"v3","49DCB8",2655,"closed","Classes of container component are not working properly","2024-11-16T13:13:33Z","https://github.com/nuxt/ui/issues/2655",0.686762,{"description":2012,"labels":2013,"number":2017,"owner":1991,"repository":1992,"state":2006,"title":2018,"updated_at":2019,"url":2020,"score":2021},"### Description\n\nI would like to style my Radio component like this -\n\n\nBut Nuxt UI default styling gives me this. Without much ability to customize -\n\n\nI achieved the first styling in a very hacky way. I saw the DOM of the `\u003CURadioGroup>` component and used deep selector to style child tags. Some class selectors that are used are from tailwind like the items-start (styling code in the comment section). Not the best way, but it works.\n\nIs there a more elegant and straightforward way to do this?\n",[2014],{"name":2015,"color":2016},"question","d876e3",2950,"NuxtUI custom styling of URadioGroup component","2024-12-22T15:40:17Z","https://github.com/nuxt/ui/issues/2950",0.693356,{"description":2023,"labels":2024,"number":2030,"owner":1991,"repository":1992,"state":2006,"title":2031,"updated_at":2032,"url":2033,"score":2034},"### Environment\n\n- Operating System: `Windows_NT`\n- Node Version: `v22.13.0`\n- Nuxt Version: `3.15.2`\n- CLI Version: `3.20.0`\n- Nitro Version: `2.10.4`\n- Package Manager: `yarn@1.22.22`\n- Builder: `-`\n- User Config: `modules`, `ssr`, `devtools`, `colorMode`, `ui`, `runtimeConfig`, `routeRules`, `future`, `compatibilityDate`, `telemetry`, `eslint`, `i18n`, `security`\n- Runtime Modules: `@nuxt/ui@3.0.0-alpha.11`, `@nuxt/eslint@0.7.5`, `@nuxtjs/i18n@9.1.1`, `@vueuse/nuxt@12.4.0`, `@pinia/nuxt@0.9.0`, `nuxt-security@2.1.5`\n- Build Modules: `-`\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.11\n\n### Reproduction\n\nCheck the official documentation website and hover any button: https://ui3.nuxt.dev/components/button\n\n### Description\n\nWhen mouse hovering a button, the cursor must be changed to pointer!\n\nWhen a button has a cursor pointer, it provides a clear visual cue to users that the element is interactive. This enhances the user experience by making it obvious that clicking the button will trigger an action. Without this visual feedback, users might not realize that the button is clickable, leading to confusion or frustration.\n\nIn essence, the cursor pointer helps improve the usability and accessibility of web interfaces by making interactive elements more intuitive to use.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2025,2026,2029],{"name":1985,"color":1986},{"name":2027,"color":2028},"duplicate","cfd3d7",{"name":2003,"color":2004},3125,"Buttons are missing \"cursor pointer\"","2025-04-02T09:40:55Z","https://github.com/nuxt/ui/issues/3125",0.69366467,{"description":2036,"labels":2037,"number":2043,"owner":1991,"repository":1992,"state":2006,"title":2044,"updated_at":2045,"url":2046,"score":2047},"### Description\n\nThanks to the team for the wonderful UI library. I purchased a license for nuxt/ui-pro, but encountered an activation problem - after paying and receiving the key, I could not [activate](https://ui3.nuxt.dev/pro/activate) it, the system gave an error. `[POST] \"https://api.nuxtlabs.com/ui-pro/activate\": \u003Cno response> Failed to fetch`",[2038,2039,2040],{"name":2015,"color":2016},{"name":2003,"color":2004},{"name":2041,"color":2042},"pro","5BD3CB",3341,"License key activation error","2025-02-17T12:02:07Z","https://github.com/nuxt/ui/issues/3341",0.69837004,{"description":2049,"labels":2050,"number":2054,"owner":1991,"repository":1992,"state":2006,"title":2055,"updated_at":2056,"url":2057,"score":2058},"### Description\n\nThere should be an option via Nuxt UI's configuration to disable all of the other modules:\r\n- @nuxt/icon\r\n- @nuxtjs/tailwindcss\r\n- @nuxtjs/color-mode\r\n\r\nThat way, if a user wanted access to the components, but entirely unstyled, they could still use Nuxt UI.\r\n\r\nCurrently, I have a use case for using UPopover, but not Tailwind, Nuxt Icon, or color mode. I could use Headless UI instead, but Nuxt UI's implementation of the hover mode is already complete and ready to use.\n\n### Additional context\n\n_No response_",[2051],{"name":2052,"color":2053},"enhancement","a2eeef",2162,"Disable @nuxt/icon, @nuxtjs/tailwindcss and @nuxtjs/color-mode modules via config","2024-09-10T16:29:53Z","https://github.com/nuxt/ui/issues/2162",0.702178,{"description":2060,"labels":2061,"number":2064,"owner":1991,"repository":2065,"state":2006,"title":2066,"updated_at":2067,"url":2068,"score":2069},"- [x] `/modules`\n- [x] `/community/repositories`\n- [x] `/community/nuxters`\n\n\n",[2062],{"name":2052,"color":2063},"1ad6ff",613,"nuxt.com","Pages with search should have an empty state","2023-02-15T12:32:39Z","https://github.com/nuxt/nuxt.com/issues/613",0.703136,{"description":2071,"labels":2072,"number":2064,"owner":1991,"repository":2082,"state":2006,"title":2083,"updated_at":2084,"url":2085,"score":2069},"When I had been running tests using the `@nuxt/test-utils` library I could get results like:\r\n\r\n```bash\r\n Test Files 1 failed | 1 passed (2)\r\n Tests 1 failed | 1 passed (2)\r\n Start at 14:49:45\r\n Duration 2.13s (transform 696ms, setup 0ms, collect 1.49s, tests 14ms, environment 434ms, prepare 381ms)\r\n```\r\n\r\nBut because I was having trouble with Nuxt imports like `ReferenceError: useRuntimeConfig is not defined`, I've made changes to switch over to using this library. Unfortunately, I cannot figure out how to get the tests to actually run or at least error out. Instead, I just get this:\r\n\r\n```bash\r\n$ npm run test\r\n\r\n> project@1.0.0 test\r\n> vitest --config ./vitest.config.ts run\r\n\r\n RUN v0.33.0 .../project/test\r\n```\r\n\r\nHere are some relevant file contents...\r\n\r\n### package.json\r\n\r\n```json\r\n{\r\n \"name\": \"project\",\r\n \"version\": \"1.0.0\",\r\n \"description\": \"\",\r\n \"private\": true,\r\n \"type\": \"module\",\r\n \"engines\": {\r\n \"node\": \"18\"\r\n },\r\n \"scripts\": {\r\n \"dev\": \"nuxt dev\",\r\n \"generate\": \"nuxt generate\",\r\n \"preview\": \"nuxt preview\",\r\n \"prepare\": \"nuxt prepare\",\r\n \"build\": \"NITRO_PRESET=aws-lambda nuxt build\",\r\n \"deploy\": \"DEPLOY=true TIER=$TIER NITRO_PRESET=aws-lambda nuxt build && sls deploy --stage $TIER\",\r\n \"offline\": \"npm run build && sls offline start\",\r\n \"debug\": \"SLS_DEBUG=* node --inspect node_modules/serverless/bin/serverless offline\",\r\n \"test\": \"vitest --config ./vitest.config.ts run\",\r\n \"test:watch\": \"vitest --config ./vitest.config.ts watch\",\r\n \"lint:js\": \"eslint --ext \\\".ts,.vue\\\" --ignore-path .gitignore .\",\r\n \"lint:prettier\": \"prettier --check .\",\r\n \"lint\": \"npm run lint:js && npm run lint:prettier\",\r\n \"lintfix\": \"prettier --write --list-different . && eslint --ext \\\".ts,.vue\\\" --ignore-path .gitignore . --fix\",\r\n \"coverage\": \"vitest run --coverage --config ./vitest.config.ts\",\r\n \"postinstall\": \"patch-package\"\r\n },\r\n \"devDependencies\": {\r\n \"@babel/cli\": \"^7.23.0\",\r\n \"@babel/core\": \"^7.23.2\",\r\n \"@nuxt/test-utils\": \"^3.8.0\",\r\n \"@nuxtjs/eslint-config-typescript\": \"^12.1.0\",\r\n \"@nuxtjs/eslint-module\": \"^4.1.0\",\r\n \"@nuxtjs/partytown\": \"^1.3.0\",\r\n \"@pinia-plugin-persistedstate/nuxt\": \"^1.1.2\",\r\n \"@serverless/typescript\": \"^3.30.1\",\r\n \"@types/aws-lambda\": \"^8.10.125\",\r\n \"@types/crypto-js\": \"^4.1.3\",\r\n \"@types/eslint\": \"^8.44.6\",\r\n \"@types/node\": \"^20.8.10\",\r\n \"@types/papaparse\": \"^5.3.10\",\r\n \"@types/pdfmake\": \"^0.2.7\",\r\n \"@types/uuid\": \"^9.0.6\",\r\n \"@typescript-eslint/parser\": \"^6.9.1\",\r\n \"@vitejs/plugin-vue\": \"^4.4.0\",\r\n \"@vitest/coverage-v8\": \"^0.33.0\",\r\n \"@vue/compiler-sfc\": \"^3.3.4\",\r\n \"@vue/test-utils\": \"^2.4.1\",\r\n \"@vueuse/nuxt\": \"^10.5.0\",\r\n \"eslint\": \"^8.52.0\",\r\n \"eslint-config-prettier\": \"^9.0.0\",\r\n \"eslint-plugin-nuxt\": \"^4.0.0\",\r\n \"eslint-plugin-prettier\": \"^5.0.1\",\r\n \"eslint-plugin-vitest\": \"^0.3.9\",\r\n \"happy-dom\": \"^12.10.3\",\r\n \"jsdom\": \"^22.1.0\",\r\n \"naive-ui\": \"^2.35.0\",\r\n \"nuxt\": \"^3.8.0\",\r\n \"nuxt-icon\": \"^0.6.1\",\r\n \"nuxt-lodash\": \"^2.5.3\",\r\n \"nuxt-viewport\": \"^2.0.6\",\r\n \"nuxt-vitest\": \"^0.11.2\",\r\n \"patch-package\": \"^8.0.0\",\r\n \"prettier\": \"^3.0.3\",\r\n \"sass\": \"^1.69.5\",\r\n \"sass-loader\": \"^13.3.2\",\r\n \"serverless-offline\": \"^13.2.0\",\r\n \"serverless-s3-sync\": \"^3.2.0\",\r\n \"typescript\": \"^5.2.2\",\r\n \"unplugin-auto-import\": \"^0.16.7\",\r\n \"unplugin-vue-components\": \"^0.25.2\",\r\n \"vitest\": \"^0.33.0\",\r\n \"vue\": \"^3.3.7\",\r\n \"vue-tsc\": \"^1.8.22\"\r\n },\r\n \"dependencies\": {\r\n \"@css-render/vue3-ssr\": \"^0.15.12\",\r\n \"@pinia/nuxt\": \"^0.5.1\",\r\n \"buffer\": \"^6.0.3\",\r\n \"crypto-js\": \"^4.2.0\",\r\n \"dayjs\": \"^1.11.10\",\r\n \"deep-object-diff\": \"^1.1.9\",\r\n \"deepdash-es\": \"^5.3.9\",\r\n \"jszip\": \"^3.10.1\",\r\n \"marked\": \"^9.1.5\",\r\n \"mitt\": \"^3.0.1\",\r\n \"papaparse\": \"^5.4.1\",\r\n \"pdfmake\": \"^0.2.7\",\r\n \"pinia\": \"^2.1.7\",\r\n \"slugify\": \"^1.6.6\",\r\n \"uuid\": \"^9.0.1\"\r\n },\r\n \"overrides\": {}\r\n}\r\n```\r\n\r\n### nuxt.config.ts\r\n\r\n```typescript\r\n modules: [\r\n \"nuxt-vitest\",\r\n ...\r\n ],\r\n```\r\n\r\n### vitest.config.ts\r\n\r\n```typescript\r\nimport { defineVitestConfig } from \"nuxt-vitest/config\";\r\n\r\nexport default defineVitestConfig({\r\n plugins: [],\r\n test: {\r\n globals: true,\r\n environment: \"jsdom\",\r\n environmentOptions: {\r\n nuxt: {\r\n overrides: {},\r\n },\r\n },\r\n },\r\n root: \"./test\",\r\n});\r\n```\r\n\r\n### project/test/example.nuxt.test.ts\r\n\r\n```typescript\r\nimport { test, expect } from \"vitest\";\r\n\r\ntest(\"1 + 1\", () => {\r\n expect(1 + 1).toEqual(2);\r\n});\r\n```",[2073,2076,2079],{"name":2074,"color":2075},"vitest-environment","b60205",{"name":2077,"color":2078},"needs reproduction","DE7793",{"name":2080,"color":2081},"closed-by-bot","ededed","test-utils","Vitest hangs at [RUN] v0.33.0 with no debug output or error","2023-12-14T12:31:18Z","https://github.com/nuxt/test-utils/issues/613",{"description":2087,"labels":2088,"number":2092,"owner":1991,"repository":1991,"state":2006,"title":2093,"updated_at":2094,"url":2095,"score":2096},"I tried to watch my properties for change and than trigger a following function:\r\n```javascript\r\ndata(){\r\n return {\r\n isActive: false,\r\n unsavedChange = false\r\n }\r\n},\r\nwatch: {\r\n isActive: {\r\n handler: () => {\r\n this.$log.info('was changed')\r\n this.unsavedChange = true\r\n },\r\n deep: true\r\n }\r\n },\r\n```\r\nI can't access `this` - in the case of plugin ($log) I get error and `unsavedChange` do nothing in global scope.\r\n\r\nBut if I log just `this` out - it looks like a different instance of vue is created. Is this correct behaviour?\r\n\r\nthx\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/c2460\">#c2460\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2089],{"name":2090,"color":2091},"2.x","d4c5f9",2828,"Can't acces `this` in watch property","2023-01-18T16:02:39Z","https://github.com/nuxt/nuxt/issues/2828",0.7032923,{"description":2098,"labels":2099,"number":2103,"owner":1991,"repository":2082,"state":2006,"title":2104,"updated_at":2105,"url":2106,"score":2107},"### 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",[2100],{"name":2101,"color":2102},"pending triage","5D08F5",737,"mountSuspended & createTestingPinia","2024-11-28T08:58:33Z","https://github.com/nuxt/test-utils/issues/737",0.70558083,["Reactive",2109],{},["Set"],["ShallowReactive",2112],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"RK_sN2c_HLs8fBqtgVTRAFxm9_GxQ1pORq_xjUVP7Gk":-1},"/nuxt/ui/2346"]