\nI'd really appreciate it if the team considers a more flexible and intuitive API.\n\n### Additional information\n\n- [ ] 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).",[1998,2001],{"name":1999,"color":2000},"enhancement","8DEF37",{"name":2002,"color":2003},"pending triage","E99695",29275,"Better API for Auto Imports Customization","2024-10-08T08:40:01Z","https://github.com/nuxt/nuxt/issues/29275",0.6933594,{"description":2010,"labels":2011,"number":2016,"owner":1988,"repository":1988,"state":1990,"title":2017,"updated_at":2018,"url":2019,"score":2020},"### Describe the feature\r\n\r\nI have been trying to configure auto-imports for a library of web components, so that i can minimize bundle size without having to manually add imports.\r\n\r\nI tried creating a module like this:\r\n\r\n```ts\r\nimport { defineNuxtModule, addComponent } from 'nuxt/kit'\r\n\r\nexport default defineNuxtModule({\r\n meta: {\r\n name: 'my-components',\r\n compatibility: {\r\n nuxt: '^3.0.0',\r\n },\r\n },\r\n\r\n setup() {\r\n // From the runtime directory\r\n addComponent({\r\n name: 'MyButton',\r\n kebabName: 'my-button',\r\n mode: 'client',\r\n filePath: \"@my/web-components/Button.js\",\r\n })\r\n },\r\n})\r\n```\r\n\r\nHowever, this does not work as `addComponent` (or something downstream of it) expects there to be a vue component at the given path. the problem would exist just the same if I had a web component relative to the module (i.e. not from npm)\r\n\r\nI am wondering if there is any scope to extend `addComponent`/component auto-import behavior to support web components. Since web components typically register themselves, the desired output would be a side-effect import wherever usage of `my-button` was detected. something like this:\r\n\r\n```ts\r\n// rather than this\r\nimport Button from \"@my/web-components/Button.js\"\r\n// we would have this\r\nimport \"@my/web-components/Button.js\"\r\n```\r\n\r\nMy first thought was to add a `sideEffectOnly: boolean` option to `addComponent` as a flag to indicate this is the desired behavior, but i don't think that composes well with other existing options (e.g. what does it mean to have `mode: \"server\"` with `sideEffectOnly: true`?). Therefore perhaps the best option would be a new value for `mode`, since (right now) web components are implicitly client-side. \r\n\r\nI'm sure it's possible to build this behavior outside of nuxt with some custom transforms etc, but i imagine a comprehensive solution would end up recreating most, if not all, of nuxt's existing mechanisms for scanning/importing/tree-shaking components.\r\n\r\nSuch an addition would be useful not just in my use case, but for all web component libraries. Additionally, many WC libraries publish a [manifest of components](https://github.com/webcomponents/custom-elements-manifest) they contain, meaning a generic nuxt module could be written which accepts the manifest as an input, and dynamically calls `addComponent` for each web component found. \r\n\r\nIn summary, my proposal is something like:\r\n\r\n```ts\r\naddComponent({\r\n name: 'my-button',\r\n mode: 'web-component', // the specific value is up for debate\r\n filePath: \"@my/web-components/Button.js\",\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- [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).",[2012,2013],{"name":1999,"color":2000},{"name":2014,"color":2015},"discussion","538de2",25528,"nuxt/kit: ability to configure web components for auto-import","2024-06-30T11:05:58Z","https://github.com/nuxt/nuxt/issues/25528",0.69388133,{"description":2022,"labels":2023,"number":2028,"owner":1988,"repository":1988,"state":2029,"title":2030,"updated_at":2031,"url":2032,"score":2033},"### What problem does this feature solve?\n\nI cannot find a working solution that let's me use ava or jest to run unit tests that utilize the Vue Test Utils library. Given that both Vue Test Utils and Nuxt appear to hold strong positions within the Vue community, I think it makes sense to ensure that Vue Test Utils can be utilized for both Nuxt universal and Nuxt SPAs\n\n### What does the proposed changes look like?\n\nNuxt should seamlessly let developers run tests with runners like jest or ava while using Vue-test-utils as well as modern ES features (import statements). Importing .vue SFCs from your test files would work fine, using the import statement would work fine, and utilizing Vue Test Util features like shallowMount would work fine.\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\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/c7972\">#c7972\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2024,2025],{"name":1999,"color":2000},{"name":2026,"color":2027},"2.x","d4c5f9",4115,"closed","Enable Vue-Test-Utils to work with Nuxt","2023-01-22T15:50:48Z","https://github.com/nuxt/nuxt/issues/4115",0.63883114,{"description":2035,"labels":2036,"number":2042,"owner":1988,"repository":1988,"state":2029,"title":2043,"updated_at":2044,"url":2045,"score":2046},"### Describe the feature\n\nUnit testing (e.g. [parts of ]composables or server functions) doesn't require a full built of nuxt. \r\n\r\n_Originally posted by @pi0 in https://github.com/vitest-dev/vitest/issues/2044#issuecomment-1251939691_\r\n\r\n> We plan to support also unit testing with `nuxi test` but properly in a Nuxt environment. Exposing vite config only is not enough for doing that and in past similar approach made lots of headaches for testing in Nuxt 2. However, probably will expose as a `@nuxt/kit` utility anyway as an alternative to current usage that needs replicating vite config for aliases.\r\n\r\nRelated: https://github.com/nuxt/nuxt.js/issues/13077 (auto-import issues when testing components)\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://v3.nuxtjs.org/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/framework/discussions) and [issues](https://github.com/nuxt/framework/issues).",[2037,2038,2039],{"name":1999,"color":2000},{"name":2014,"color":2015},{"name":2040,"color":2041},"3.x","29bc7f",14972,"Support for unit testing in nuxt environment","2023-12-02T00:33:53Z","https://github.com/nuxt/nuxt/issues/14972",0.64488065,{"description":2048,"labels":2049,"number":2051,"owner":1988,"repository":1988,"state":2029,"title":2052,"updated_at":2053,"url":2054,"score":2055},"Hello, \r\n\r\nI'm thinking about creating a module providing some testing configuration. The plugin would work with [Jest](https://facebook.github.io/jest), allowing to unit test components, vuex stores, plugins… The whole configuration will be already done, and developers would just have to include it.\r\n\r\nBut, before getting started, I'd like some information :\r\n\r\n1. Is such plugin welcome ? Or do you plan to support testing natively in Nuxt ?\r\n1. The plugin would provide a testing script, is it possible from a module to extend the Nuxt scripts (And provide `nuxt test` for exemple) ?\r\n\r\nFor now, I implemented some testing setup here : https://github.com/antoinerey/nuxt-jest\r\n\r\n**Edit**: The more I think about it, the more I feel like it'd be better to make a vue-cli plugin. What do you think ?\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/c2610\">#c2610\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2050],{"name":2026,"color":2027},3013,"Testing module","2023-01-18T16:09:51Z","https://github.com/nuxt/nuxt/issues/3013",0.65251553,{"description":2057,"labels":2058,"number":2061,"owner":1988,"repository":1988,"state":2029,"title":2062,"updated_at":2063,"url":2064,"score":2065},"\u003C!-- 💚 Thanks for your time to make Nuxt better with your feedbacks 💚 -->\r\n\r\n### Is your feature request related to a problem? Please describe.\r\n\r\nIt is related to issue #8620 (\"beforeNuxtRender is called too soon\").\r\n\r\nSince Vue’s `serverPrefetch` (`onServerPrefetch`) and Nuxt’s [new fetch](https://ja.nuxtjs.org/blog/understanding-how-fetch-works-in-nuxt-2-12/) (which utilizes Vue’s serverPrefetch) were introduced, `beforeNuxtRender` is no longer the proper hook for plugins to inject their state into `nuxtState`.\r\n\r\nNuxt \u003C 2.12\r\n→ asyncData() & fetch() → **beforeNuxtRender()** → start rendering App → **serverPrefetch()** → render HTML\r\n\r\nNuxt >= 2.12\r\n→ asyncData() → **beforeNuxtRender()** → start rendering App → **serverPrefetch()** → **fetch()** → render HTML\r\n\r\nSome plugins such as vue-apollo currently rely on `serverPrefetch` (onServerPrefetch) to perform the component-level prefetching, and therefore these plugins cannot do the client hydration properly with the current Nuxt.\r\n\r\nSome users seems to do a temporary hack as a workaround https://github.com/nuxt/nuxt.js/issues/8852#issuecomment-789946319.\r\n\r\n### Describe the solution you'd like\r\n\r\nI think Nuxt should provide plugins with a new hook that is suitable for updating `nuxtState`.\r\n\r\n### Describe alternatives you've considered\r\n\r\nInstead of adding a new hook, we could make Nuxt call beforeNuxtRender() just after the App is rendered if this doesn't cause serious backward compatibility issues.",[2059,2060],{"name":1999,"color":2000},{"name":2026,"color":2027},9155,"Need a new way for plugins to inject their state into `nuxtState`","2023-01-22T15:52:51Z","https://github.com/nuxt/nuxt/issues/9155",0.6719992,{"labels":2067,"number":2073,"owner":1988,"repository":1988,"state":2029,"title":2074,"updated_at":2075,"url":2076,"score":2077},[2068,2071,2072],{"name":2069,"color":2070},"stale","ffffff",{"name":2002,"color":2003},{"name":2026,"color":2027},6130,"create a component library","2023-01-22T15:34:44Z","https://github.com/nuxt/nuxt/issues/6130",0.67493993,{"description":2079,"labels":2080,"number":2086,"owner":1988,"repository":1988,"state":2029,"title":2087,"updated_at":2088,"url":2089,"score":2090},"Hi @alexchopin @pi0 @Atinux \r\n\r\nPlease consider moving examples from `nuxt/nuxt.js` to separate repo. Maybe to `nuxt-community`?\r\nI believe that community can add lots of useful examples and the main nuxt repo will be cleaner.\r\n\r\n\r\nWhat do you think?\r\n\r\n\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/c1206\">#c1206\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2081,2082,2085],{"name":1999,"color":2000},{"name":2083,"color":2084},"documentation","5319e7",{"name":2026,"color":2027},1362,"Proposition: nuxt examples to separate repo","2023-01-18T15:41:42Z","https://github.com/nuxt/nuxt/issues/1362",0.6769311,{"labels":2092,"number":2095,"owner":1988,"repository":1988,"state":2029,"title":2096,"updated_at":2097,"url":2098,"score":2099},[2093,2094],{"name":1999,"color":2000},{"name":2026,"color":2027},6517,"Add example on how to use with @vue/composition-api","2023-01-22T15:51:03Z","https://github.com/nuxt/nuxt/issues/6517",0.67940307,["Reactive",2101],{},["Set"],["ShallowReactive",2104],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"T29h_r3W92ISRzeRnnvPdskiHXV9pzAYrtfnNtXKuFA":-1},"/nuxt/test-utils/386"]