\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```",[2867,2870],{"name":2868,"color":2869},"bug","d73a4a",{"name":2871,"color":2872},"triage","ffffff",2713,"nuxt","ui","open","UInput Component Lacks Proper Handling of compositionstart and compositionend","2024-11-21T06:40:46Z","https://github.com/nuxt/ui/issues/2713",0.6357568,{"description":2882,"labels":2883,"number":2884,"owner":2874,"repository":2885,"state":2876,"title":2886,"updated_at":2887,"url":2888,"score":2889},"Hi there. Is there any way we could add a feature that minifies the CSS generated by this plugin and/or then extracts the code to a single separate CSS file, rather than having it all output in the ```\u003Chead>``` element?\n\nEven with...\n```javascript\nvite: {\n\tbuild: {\n\t\t\tassetsInlineLimit: 0, // default is 4096 (4 KiB); threshold to inline assets as base64 URLs\n\t\t\tcssCodeSplit: false, // if false, all CSS in the entire project will be extracted into a single CSS file\n\t}\n}\n``` \n...in my ```nuxt.config.ts``` file, the icon-related CSS code from this plugin still gets output onto my pages un-minified *and* un-extracted.\n\nThanks. :-)\n",[],327,"icon","Don't force CSS to be inline","2024-12-22T00:14:16Z","https://github.com/nuxt/icon/issues/327",0.6899994,{"description":2891,"labels":2892,"number":2899,"owner":2874,"repository":2874,"state":2876,"title":2900,"updated_at":2901,"url":2902,"score":2903},"### Describe the feature\r\n\r\nNow that I think I understand composables better, especially useFetch, I see myself using it everytime I communicate to my api. Even when posting a form, because I like the out of the box reactive properties it provides.\r\n\r\nAnd now that Nuxt 3.11 adds `clear()` I feel its complete.\r\n\r\nI often end up doing this:\r\n\r\n```js\r\nconst formData = reactive({\r\n firstName: 'Peter',\r\n lastName: 'Griffin',\r\n ...\r\n});\r\n\r\nconst { status, execute: submit, clear, error } = useFetch('...', {\r\n watch: false,\r\n immediate: false,\r\n \r\n body: formData,\r\n method: 'POST',\r\n});\r\n\r\nonBeforeMount(clear); // maybe theres an even better way to automatically clear things up?\r\n```\r\n\r\nI propose to add a new composable, analog to `useLazyFetch`.\r\n\r\nIt could be named `useManualFetch`, `usePostFetch` (`usePost`?) or `useSubmitFetch` (`useSubmit`?)\r\n\r\nAnd it could be used like this:\r\n\r\n```\r\nconst formData = reactive({ ... });\r\nconst { status, error, execute: submit } = useSubmit('...', formData);\r\n```\r\n\r\nMaybe `lazy: true` and `server: false` is also a good default here? I'm not at all familiar enough with SSR and nitro at this point–\r\n\r\nI know I could make (and have made) that composable myself, but I think this is a good thing to offer out of the box to everybody.\r\n\r\nWhat do you think?\r\n\r\n### Additional information\r\n\r\n- [X] Would you be willing to help implement this feature?\r\n- [x] 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).",[2893,2896],{"name":2894,"color":2895},"enhancement","8DEF37",{"name":2897,"color":2898},"discussion","538de2",26306,"adding useManualFetch / usePostFetch / useSubmitFetch composable","2024-06-30T11:05:09Z","https://github.com/nuxt/nuxt/issues/26306",0.7096804,{"description":2905,"labels":2906,"number":2910,"owner":2874,"repository":2911,"state":2876,"title":2912,"updated_at":2913,"url":2914,"score":2915},"When attempting to render a component for a whitebox test, the entire Nuxt environment is being loaded instead of just the component. This behavior is likely caused by the presence of an authentication guard in the project, which leads to redirection to the sign-in page during test execution.\r\n\r\n### Steps to Reproduce\r\nAccess the following StackBlitz link: [Reproduction Test](https://stackblitz.com/edit/nuxt-vitest-ewepwb?file=test%2Ftest.nuxt.spec.ts)\r\n\r\n### Expected Behavior\r\nThe test should only render the targeted component without triggering global route middleware or redirections.\r\n\r\n### Actual Behavior\r\nUpon running the test, the entire Nuxt environment is loaded, including global route middleware, leading to redirection to the sign-in page due to the presence of the authentication guard.\r\n\r\n### Additional Information\r\nNuxt project info: \r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.16.0\r\n- Nuxt Version: 3.5.3\r\n- Nitro Version: 2.4.1\r\n- Package Manager: yarn@3.6.0\r\n- Builder: vite\r\n- User Config: alias, app, build, sourcemap, ssr, runtimeConfig, vite, css, modules, components, ignore, dayjs, typescript, experimental, devtools\r\n- Runtime Modules: dayjs-nuxt@1.1.2, nuxt-vitest@0.10.2, @pinia/nuxt@^0.4.11\r\n- Build Modules: -\r\n------------------------------",[2907],{"name":2908,"color":2909},"vitest-environment","b60205",526,"test-utils","Components tests it is triggering global route middleware","2024-12-22T21:23:11Z","https://github.com/nuxt/test-utils/issues/526",0.7154795,{"description":2917,"labels":2918,"number":2921,"owner":2874,"repository":2874,"state":2876,"title":2922,"updated_at":2923,"url":2924,"score":2925},"### Describe the feature\n\nI came across a use case that is currently not possible with `useFetch`, as far as I'm aware. I think it might be useful to return the currently pending promise from `useFetch` so that it can be awaited in callbacks.\r\n\r\nLet me illustrate a use case, where it could come in handy:\r\n\r\nImagine we have a page with a list of items that is paginated. We have two ways of fetching new items:\r\n- A pagination component with buttons representing the page numbers.\r\n- A \"fetch more\" button to append new items to the current list.\r\n\r\nWhen changing the page using the pagination component, we want to display a fullscreen loader. When clicking on the \"fetch more\" button, we want to show the loading only on the button itself. That's why a global pending indicator isn't suitable for this use case. (`state === 'pending'`)\r\n\r\nIf `useFetch` were to return its currently pending promise, we could theoretically use it like this:\r\n```vue\r\n\u003Ctemplate>\r\n\u003C!-- ... -->\r\n\u003C!-- the async callback is awaited in the btn component to automatically handle the loading state -->\r\n \u003CMyButton\r\n :on-click=\"handleFetchMore\"\r\n />\r\n\u003C!-- ... -->\r\n\u003C/template>\r\n\r\n\u003Cscript lang=\"ts\" setup>\r\n\r\nconst page = ref\u003Cnumber>(1)\r\n\r\n// temporary name \"promise\" -- maybe this could replace the \"pending\" boolean in Nuxt 4?\r\nconst { data, promise } = useFetch('/api/my-items', {\r\n query: {\r\n page: page\r\n }\r\n})\r\n\r\nasync function handleFetchMore() {\r\n page.value += 1\r\n // would this work? or would nextTick() need to be awaited before it?\r\n await promise.value\r\n}\r\n\r\n// ...\r\n\r\n\u003C/script>\r\n```\r\n\n\n### Additional information\n\n- [X] 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).",[2919,2920],{"name":2894,"color":2895},{"name":2897,"color":2898},26678,"Return the current promise from `useFetch` in a computed ref","2024-06-30T11:04:44Z","https://github.com/nuxt/nuxt/issues/26678",0.71760774,{"description":2927,"labels":2928,"number":2931,"owner":2874,"repository":2932,"state":2933,"title":2934,"updated_at":2935,"url":2936,"score":2937},"If `https://modules.nuxtjs.org/api/modules` does not respond (happened yesterday evening), `useModules -> fetch` fails. And if it fails, being called at the root of `app.vue` makes the whole app to crash.\n\nWe should at least try/catch it.",[2929],{"name":2868,"color":2930},"ff281a",456,"nuxt.com","closed","`fetchModules` call should be protected to avoid the whole app to crash","2022-05-06T11:01:34Z","https://github.com/nuxt/nuxt.com/issues/456",0.7006278,{"description":2939,"labels":2940,"number":2931,"owner":2874,"repository":2911,"state":2933,"title":2941,"updated_at":2942,"url":2943,"score":2937},"### What problem does this feature solve?\r\n\r\nThis feature would make testing ability a first class citizen in Nuxt and it's future iterations.\r\n\r\nWhen running component tests on a nuxt project, there is a fair amount of \"extra\" stuff that we currently have to shim on top of vue-test-utils in order to add specs around our components.\r\n\r\n### What does the proposed changes look like?\r\n\r\nThis is more of a policy change but i'm happy to contribute. Currently when a feature is released, there is little consideration on the ability to test the concepts inside of core external testling libraries like 'vue-test-utils' for unit tests. I would love to help that not be the case any more. \r\n\r\nThe current recommendation is mostly to run a full request spec by booting your entire nuxt server and then run a spec against that. That is great for tiny projects or when you want to make sure something really works end to end. On large projects though it would take many minutes to boot which would cause devs to skip writing tests in the real world. \r\n\r\nA great example of this is the very useful `$fetch` utility. In order to use this and have component tests on components, we will have to create a custom $fetch that we attach to a vue prototype that we assert around. It would be much better if we could have something like this from the nuxt repo or a sidecar repo (nuxt-test-utils?)\r\n\r\n```\r\nconst vm = createNuxtInstance()\r\n```\r\n\r\ncreateNuxtInstance could take many options such as\r\n - whether it should include the reflected store (something we have written custom code to do and are happy to contribute)\r\n - whether is should include a router\r\n - etc\r\n\r\nThis would also pave the way for additional hooks so that library authors could provide the ability to hook into this ecosystem in order to attach to the instance in a \"mock\" way\r\n\r\nNuxt hooks\r\n\r\n`test:nuxtInstanceMounted`\r\n`test:nuxtInstanceCreated`\r\n\r\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\r\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This feature request is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c10775\">#c10775\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[],"Nuxt Test Utils","2023-12-02T00:13:11Z","https://github.com/nuxt/test-utils/issues/456",{"description":2945,"labels":2946,"number":2947,"owner":2874,"repository":2932,"state":2933,"title":2948,"updated_at":2949,"url":2950,"score":2951},"### Environment\r\n\r\nN/A\r\n\r\n### Reproduction\r\n\r\nN/A\r\n\r\n### Describe the bug\r\n\r\nGoing to https://nuxt.com/modules/tailwindcss resulted in this:\r\n\r\n\u003Cimg width=\"573\" alt=\"image\" src=\"https://github.com/nuxt/nuxt/assets/26592486/c1018a94-852c-46f2-ae1b-2c42f83028e4\">\r\n\r\n**ID as Text**: `cle1::k9s6r-1697123779540-48474018b10e`\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[],1368,"nuxt.com 504: GATEWAY_TIMEOUT","2023-10-18T11:04:15Z","https://github.com/nuxt/nuxt.com/issues/1368",0.7018718,{"description":2953,"labels":2954,"number":2957,"owner":2874,"repository":2932,"state":2933,"title":2958,"updated_at":2959,"url":2960,"score":2961},"",[2955],{"name":2894,"color":2956},"1ad6ff",611,"[Resources] Refactor showcases into a composable","2023-02-15T12:32:38Z","https://github.com/nuxt/nuxt.com/issues/611",0.71007484,{"description":2963,"labels":2964,"number":2957,"owner":2874,"repository":2911,"state":2933,"title":2966,"updated_at":2967,"url":2968,"score":2961},"I'm on v0.11.2 and it seems what `defineVitestConfig` wants and the type definition doesn't line up?\r\n\r\nIt wants an `InlineConfig` passed in directly in the typedef, but I'm having to do this:\r\n\r\n```js\r\nimport { defineVitestConfig } from \"nuxt-vitest/config\";\r\nimport type { InlineConfig } from \"vitest\";\r\n\r\nconst test: InlineConfig = {\r\n coverage: {\r\n all: true,\r\n branches: 87.5, // 7 / 8\r\n exclude: [\r\n \"node_modules\",\r\n \".nuxt\",\r\n \"app\",\r\n \"dist\",\r\n \"scripts\",\r\n \"*.config.ts\",\r\n \"**/types.ts\",\r\n \"**/*.tests.ts\",\r\n \"**/*.js\",\r\n \"**/*.mjs\",\r\n \"pages\",\r\n \"plugins\",\r\n \"app.vue\",\r\n ],\r\n },\r\n environment: \"happy-dom\",\r\n include: [\"**/*.tests.ts\"],\r\n};\r\n\r\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\r\n// @ts-ignore\r\nexport default defineVitestConfig({ test });\r\n```",[2965],{"name":2908,"color":2909},"typecheck issues with defineVitestConfig?","2023-12-02T23:35:07Z","https://github.com/nuxt/test-utils/issues/611",["Reactive",2970],{},["Set"],["ShallowReactive",2973],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$frA3hvzT6RkBHzlIiz04IclbTPzkD-viQT_dBAyQ7w58":-1},"/nuxt/test-utils/449"]