\n\n// filter by tags\nconst items = [\n {\n label: \"Show all tags\",\n value: \"\"\n },\n {\n label: \"Only Red Tags\",\n value: \"red\"\n },\n {\n label: \"Only Green Tags\",\n value: \"green\"\n }\n]\n\nconst tagFilter = ref(null)\n```\n\nbut in v3 I now get this error:\n\n> Error: A \u003CSelectItem /> must have a value prop that is not an empty string. This is because the Select value can be set to an empty string to clear the selection and show the placeholder.\n\nHow would I add this option in?",[2039,2040],{"name":2028,"color":2029},{"name":1988,"color":1989},3647,"closed","How do I use an empty string with a USelect value?","2025-03-21T21:54:20Z","https://github.com/nuxt/ui/issues/3647",0.72222227,{"description":2048,"labels":2049,"number":2057,"owner":1991,"repository":1991,"state":2042,"title":2058,"updated_at":2059,"url":2060,"score":2061},"### Describe the feature\r\n\r\nIn specific scenarios, it might be handy to reset the state and cancel any pending promises of a declared data fetching composable. \r\n\r\nFor example, it would come useful when we declare a data fetching composable inside a dialog which remains in the DOM when closed AND yet we would like to conveniently reset everything inside a dialog to prepare it for when it becomes opened by the user again. Otherwise, I need to reset everything by hand.\r\n\r\nAn alternative approach is to pass a key explicitly and use it when calling `clearNuxtData`:\r\n\r\n```\r\nconst key = '...'\r\nconst fn = useAsyncData(key, ...)\r\nconst isDialogOpen = defineModel\u003Cboolean>({ required: true })\r\n\r\nwhenever(\r\n () => !isDialogOpen.value,\r\n {\r\n clearNuxtData(key)\r\n }\r\n)\r\n```\r\n\r\n### Additional information\r\n\r\n- [X] Would you be willing to help implement this feature?\r\n- [ ] Could this feature be implemented as a module?\r\n\r\n### Final checks\r\n\r\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2050,2051,2054],{"name":1985,"color":2002},{"name":2052,"color":2053},"3.x","29bc7f",{"name":2055,"color":2056},"🍰 p2-nice-to-have","0E8A16",26195,"Add `reset` fn to data fetching composables","2024-03-17T00:19:45Z","https://github.com/nuxt/nuxt/issues/26195",0.7649554,{"description":2063,"labels":2064,"number":2074,"owner":1991,"repository":2075,"state":2042,"title":2076,"updated_at":2077,"url":2078,"score":2079},"I'm setting up the nuxt-vitest module in my project. Though I'm running into some issues getting a simple test, I use mountSuspended(Logo) to test the mounting of a Logo component. This component uses i18n. Whereas when I'm using mount from Vitest the test passes.\r\n\r\nThe error I'm getting is as follows:\r\n```\r\nVitest caught 1 unhandled error during the test run.\r\nThis might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.\r\n\r\n⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Rejection ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯\r\nSyntaxError: Need to install with `app.use` function\r\n ❯ Module.createCompileError ../node_modules/.pnpm/@intlify+message-compiler@9.3.0-beta.17/node_modules/@intlify/message-compiler/dist/message-compiler.mjs:54:19\r\n ❯ createI18nError ../node_modules/.pnpm/vue-i18n@9.3.0-beta.17_vue@3.3.4/node_modules/vue-i18n/dist/vue-i18n.runtime.mjs:97:34\r\n 96| [I18nErrorCodes.INVALID_ARGUMENT]: 'Invalid argument',\r\n 97| [I18nErrorCodes.MUST_BE_CALL_SETUP_TOP]: 'Must be called at the top of a `setup` function',\r\n 98| [I18nErrorCodes.NOT_INSLALLED]: 'Need to install with `app.use` function',\r\n | ^\r\n 99| [I18nErrorCodes.UNEXPECTED_ERROR]: 'Unexpected error',\r\n 100| [I18nErrorCodes.NOT_AVAILABLE_IN_LEGACY_MODE]: 'Not available in legacy mode',\r\n ❯ Module.useI18n ../node_modules/.pnpm/vue-i18n@9.3.0-beta.17_vue@3.3.4/node_modules/vue-i18n/dist/vue-i18n.runtime.mjs:2253:15\r\n ❯ setup app.vue:33:40\r\n```\r\n\r\nAnd while we are at it. Is there a way to test with the translated i18n messages iso the keys?\r\n\r\n######\r\n\r\nHere are some snippets from my configuration.\r\nvitest.config.js\r\n```\r\n...\r\nexport default defineVitestConfig({\r\n resolve: {\r\n alias\r\n },\r\n test: {\r\n dir: tests,\r\n setupFiles: ['tests/unit.setup.ts'],\r\n environment: 'jsdom',\r\n globals: true,\r\n root: rootDir,\r\n environmentOptions: {\r\n nuxt: {\r\n rootDir\r\n }\r\n }\r\n }\r\n})\r\n```\r\n\r\n./test/nuxt/components/Logo.nuxt.spec.ts (with mountSuspended)\r\n```\r\nimport { describe, it, expect } from 'vitest'\r\n\r\nimport { mountSuspended } from 'vitest-environment-nuxt/utils'\r\nimport Logo from '@/components/header/Logo.vue'\r\n\r\ndescribe('HeaderLogo', () => {\r\n it('can mount some component', async () => {\r\n const component = await mountSuspended(Logo)\r\n expect(component.vm).toBeTruthy()\r\n expect(component.text()).toMatchInlineSnapshot(\r\n '\"global.logo-brand-name.global.logo-brand-localehomepage.logo-tagline\"'\r\n )\r\n })\r\n})\r\n```\r\n./tests/unit.setup.ts\r\n```\r\nimport { config } from '@vue/test-utils'\r\nimport { createI18n } from 'vue-i18n'\r\n\r\nimport nlNL from '~/locales/nl_NL.json'\r\n\r\nconst i18n = createI18n({\r\n legacy: false,\r\n locale: 'nl_NL',\r\n missing: (_, key) => key,\r\n messages: {\r\n nlNL\r\n }\r\n})\r\n\r\nconfig.global.mocks = {\r\n t: msg => msg\r\n}\r\nconfig.global.plugins.push(i18n)\r\n```\r\n\r\n\r\n./tests/nuxt/components/Logo.nuxt.spec.ts (without mountSuspended)\r\n```\r\nimport { mount } from '@vue/test-utils'\r\nimport { describe, it, expect } from 'vitest'\r\n\r\nimport Logo from '@/components/header/Logo.vue'\r\n\r\ndescribe('HeaderLogo', () => {\r\n it('can mount some component', () => {\r\n const component = mount(Logo)\r\n expect(component.vm).toBeTruthy()\r\n expect(component.text()).toMatchInlineSnapshot(\r\n '\"global.logo-brand-name.global.logo-brand-localehomepage.logo-tagline\"'\r\n )\r\n })\r\n})\r\n```\r\n\r\n",[2065,2068,2071],{"name":2066,"color":2067},"vitest-environment","b60205",{"name":2069,"color":2070},"needs reproduction","DE7793",{"name":2072,"color":2073},"closed-by-bot","ededed",585,"test-utils","mountSuspended with i18n","2025-01-22T12:49:12Z","https://github.com/nuxt/test-utils/issues/585",0.7673411,{"description":2081,"labels":2082,"number":2083,"owner":1991,"repository":2075,"state":2042,"title":2084,"updated_at":2085,"url":2086,"score":2087},"This way of overriding options (using spread operator):\r\nhttps://github.com/nuxt-community/module-test-utils/blob/2801ebd478d54e97d95310bbfbd69e642223f363/lib/setup.js#L13-L16\r\nis often very limiting because it makes it impossible to override particular property of an object that has other properties.\r\n\r\nFor example, if we try to override one property from object:\r\n```\r\n{\r\n i18n: {\r\n a: 1,\r\n b: 2,\r\n c: 3,\r\n }\r\n}\r\n```\r\nwith:\r\n```\r\nconst override = {\r\n i18n: {\r\n b: 4\r\n }\r\n}\r\n```\r\nthen that will override whole `i18n` object, leaving just property `b`.\r\n\r\nThis module should rather use something like this:\r\n```\r\nconst deepMerge = require('deepmerge')\r\nconst options = deepMerge.all([options, override])\r\n```\r\n(This would probably be a breaking change if one relied on previous behavior)",[],270,"Inflexible nuxt options override","2023-12-02T00:13:07Z","https://github.com/nuxt/test-utils/issues/270",0.7710433,{"description":2089,"labels":2090,"number":2095,"owner":1991,"repository":1991,"state":2042,"title":2096,"updated_at":2097,"url":2098,"score":2099},"Hello,\r\n\r\nSince using default export of `Options` as option initializer, I have a question that is it a good way to use a Class-like naming style to name a function?\r\n\r\nI found members in `options.js` like `Modes` and `defaultOptions` are also put in `Options` now, maybe leave `Options` as a pure Object, and rename the init function to `Options.from(_options)` is a better choice?\r\n\r\nhttps://github.com/nuxt/nuxt.js/blob/d7d85d3b4763eacf4a25155c08a01fab3ee5746a/lib/core/nuxt.js#L18\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This feature request is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1229\">#c1229\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2091,2092],{"name":1985,"color":2002},{"name":2093,"color":2094},"2.x","d4c5f9",1385,"[internals] improve options module","2023-01-18T15:41:42Z","https://github.com/nuxt/nuxt/issues/1385",0.77972025,{"description":2101,"labels":2102,"number":2107,"owner":1991,"repository":1991,"state":2042,"title":2108,"updated_at":2109,"url":2110,"score":2111},"### Environment\n\n- Operating System: `Linux`\r\n- Node Version: `v16.17.1`\r\n- Nuxt Version: `3.0.0-rc.11`\r\n- Nitro Version: `0.5.4`\r\n- Package Manager: `npm@8.15.0`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-sd5r18?file=pages%2Findex.vue\n\n### Describe the bug\n\nI'm trying to disable an input when the page loads, if a get param is present.\r\n\r\nI created a computed to get the query param, and binded it to the disabled prop in the input.\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cinput :disabled=\"isDisabled\" />\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\nconst route = useRoute()\r\nconst isDisabled = computed(() => route.query.disabled)\r\n\u003C/script>\r\n```\r\n\r\nIt works on SPA when running `npm run dev`, but trying to generate and serve the application with `npm run generate && npm run preview` will not work.\r\n\r\nThere's a workaround: to bind the disabled prop with a ref, and update the ref when the component is mounted\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cinput :disabled=\"disableInput\" />\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\nconst route = useRoute()\r\nconst isDisabled = computed(() => route.query.disabled);\r\nconst disableInput = ref(false);\r\n\r\nonMounted(() => {\r\n if (isDisabled.value) {\r\n disableInput.value = true;\r\n }\r\n});\r\n\u003C/script>\r\n```\r\n\r\nThis solution works both SPA and SSG. But still feels like this workaround shouldn't be needed, and that the first solution should work on SSG as well.\r\n\r\nBoth solutions are present in the minimal reproduction repository for testing.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2103,2104],{"name":2052,"color":2053},{"name":2105,"color":2106},"pending triage","E99695",15162,"Disabling an input based on get param won't work on SSG","2023-01-19T17:45:32Z","https://github.com/nuxt/nuxt/issues/15162",0.78178257,["Reactive",2113],{},["Set"],["ShallowReactive",2116],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"6M7UbFcgRMCDyu0q2rms68SwsVIj9the33IKT1b_4UE":-1},"/nuxt/ui/3106"]