` component, but it doesn’t work.\n",[],365,"icon","Is there a way to change the viewBox attribute of an SVG element?","2025-03-05T19:09:39Z","https://github.com/nuxt/icon/issues/365",0.75133306,{"description":2032,"labels":2033,"number":2039,"owner":1991,"repository":2040,"state":1993,"title":2041,"updated_at":2042,"url":2043,"score":2044},"### Description\n\nHi there,\r\n\r\nI installed the project from scratch with the below commands:\r\nFor Nuxt:\r\n`bun x nuxi@latest init test`\r\n\r\nFor Nuxt UI:\r\n`npx nuxi@latest module add ui`\r\n\r\nWhen I run the project with `bun run dev`, I got the below warning:\r\n\r\n\r\nMy `package.json` is as follows:\r\n```\r\n\"dependencies\": {\r\n \"@nuxt/eslint\": \"^0.5.7\",\r\n \"@nuxt/ui\": \"^2.18.6\",\r\n \"@nuxtjs/tailwindcss\": \"^6.12.1\",\r\n \"@pinia/nuxt\": \"^0.5.4\",\r\n \"@vueuse/core\": \"^11.1.0\",\r\n \"@vueuse/nuxt\": \"^11.1.0\",\r\n \"nuxt\": \"^3.13.2\",\r\n \"vue\": \"latest\",\r\n \"vue-router\": \"latest\"\r\n },\r\n \"devDependencies\": {\r\n \"@nuxt/devtools\": \"^1.5.1\",\r\n \"ts-node\": \"^10.9.2\",\r\n \"typescript\": \"^5.6.2\",\r\n \"vue-tsc\": \"^2.1.6\"\r\n }\r\n```\r\n \r\n And my config is:\r\n```\r\nmodules: [\r\n '@nuxt/eslint',\r\n '@nuxtjs/tailwindcss',\r\n '@nuxt/ui',\r\n '@pinia/nuxt',\r\n '@vueuse/nuxt'\r\n ],\r\n vite: {\r\n server: {\r\n hmr: {\r\n clientPort: 3000\r\n }\r\n }\r\n },\r\n ui: {\r\n global: true\r\n }\r\n```\r\n\r\nI'm wondering why...\r\n1. I got the Nuxt 3.8.2 warning\r\n2. There's no auto-completion for Nuxt UI component (I installed Vue - Official extension)\r\n3. Using Nuxt UI components gives error\r\n\r\n\r\n\r\n\r\n",[2034,2036],{"name":2002,"color":2035},"d876e3",{"name":2037,"color":2038},"stale","ededed",2249,"ui","Module @nuxt/ui is disabled due to incompatibility issues","2024-11-27T02:06:55Z","https://github.com/nuxt/ui/issues/2249",0.755969,{"description":2046,"labels":2047,"number":2056,"owner":1991,"repository":2040,"state":1993,"title":2057,"updated_at":2058,"url":2059,"score":2060},"### Description\n\nIs there any chance we can get option to enable/disable collapsible when collapsed prop is true. v3.0.0-alpha.13 'fixed' NavigationMenu: disable collapsible with collapsed prop, i used nuxt ui since v3.0.0-alpha.12 and thought the collapsible when collapsed was feature.\n\n### Additional context\n\n_No response_",[2048,2050,2053],{"name":1985,"color":2049},"a2eeef",{"name":2051,"color":2052},"v3","49DCB8",{"name":2054,"color":2055},"triage","ffffff",3353,"NavigationMenu: Option to enable collapsible with collapsed prop","2025-02-27T07:38:30Z","https://github.com/nuxt/ui/issues/3353",0.757068,{"description":2062,"labels":2063,"number":2066,"owner":1991,"repository":1991,"state":1993,"title":2067,"updated_at":2068,"url":2069,"score":2070},"### Describe the feature\r\n\r\n### The problem\r\n\r\nSometimes we need a `ref` that works exactly as `ref`, have full semantics and behavior of `ref`, but still works fine with SSR.\r\n\r\nIn the [docs](https://nuxt.com/docs/getting-started/state-management) `useState` is advertised as \"an SSR-friendly `ref` replacement\", which is actually not true as `useState` has different semantics and behavior than `ref` in addition to its SSR-friendliness.\r\n\r\nTo quote the docs:\r\n> [useState](https://nuxt.com/docs/api/composables/use-state) is an SSR-friendly [ref](https://vuejs.org/api/reactivity-core.html#ref) replacement. Its value will be preserved after server-side rendering (during client-side hydration) and shared across all components using a unique key.\r\n\r\nWhat I need is an analogue to `ref` where only the first part of `useState` description (\"Its value will be preserved after server-side rendering\") is true, but not the second (\"shared across all components using a unique key\").\r\n\r\nI.e. that `ref` should be:\r\n1. Initialized **every time** when `script setup` is executed (`init` function of `useState` is not executed on any client-side navigation except the 1st).\r\n2. Preserved between SSR and client-side setup (i.e. hydrated, just like `useState` does).\r\n3. Not shared between component instances or other components (unlike `useState`).\r\n\r\n### The workaround\r\n\r\nCurrently I use workaround like this:\r\n\r\n```ts\r\nconst nuxtApp = useNuxtApp()\r\nconst componentId = useId()\r\nconst myRef = useState(componentId, () => null)\r\nif (!nuxtApp.isHydrating) {\r\n // Called by SSR (initial page load), but also on each client-side navigation too, just as normal ref(generateInitialValue()) would.\r\n myRef.value = generateInitialValue()\r\n}\r\nonUnmounted(() => clearNuxtState(componentId))\r\n```\r\n\r\nI think with the workaround above `myRef` behaves identical to a usual `Ref`, but preserves the value generated by `generateInitialValue()` called from SSR if the component was first rendered by SSR, instead of generating a new initial value (that could be different from SSR-generated value) when the component is rendered on the client.\r\n\r\nAlso, `myRef` is not shared with anyone (even different instances of the same component), just like normal `ref`.\r\n\r\nAnd it's initialization will be performed on each call to `script setup` function, just like normal `ref`. Unlike `useState()`, that calls `init` only 1 time, then `init` is never called again until full server-side reload of the page, that is not what you expect from \"ref replacement\".\r\n\r\nThe downside of this workaround is that on every client-side navigation a new key is created in `useState` data keys storage. So it is a memory leak in this case, as the semantic of `ref` allows to not preserve the value between navigations. It's just a side-effect of using `useState` and `useId` under the hood. I added `onUnmounted(() => clearNuxtState(componentId))`, but this just removes the values, not the keys. Ideally these keys should be removed right after hydration is finished.\r\n\r\n### The proposition\r\n\r\nWhat I want instead is a built-in function that will allow me to write just this:\r\n\r\n```ts\r\nconst myRef = useSsrFriendlyRef(() => generateInitialValue())\r\n```\r\n(the name of the function is discussable, of course 😂)\r\n\r\n### The usefulness\r\n\r\nSuch SSR-friendly `ref` is useful, for example, to generate an initial data to use it as parameters of API called by `useFetch`. These parameters need to be stable between SSR and client-side calling to `useFetch` to make generated fetch key be stable and hydration work.\r\n\r\nOne case when I needed this SSR-friendly `ref` is a component that displays a graph with some data. To load these data from the API the component need to pass a range of dates (e.g. `GET /api/data?from=2024-08-13&to=2024-09-13`). The default (initial) range is \"from 30 days ago to the current date\". After the component is rendered, user should be able to change the range. But on the initial render `useFetch` requests the data for the last 30 days. To make it work properly we need this initial date range to be initialized only once per navigation, but still to be initialized every time the component's setup is called (i.e. the changes user made to `from` and `to` dates should be forgotten if user navigates away from the route and then navigates back). All this behavior is perfectly covered by `ref` except the SSR part. With `ref` the current date could be different in SSR rendered component and client-side rendered component, so the initial date range is different, the `useFetch` key is different, the `useFetch` response hydration doesn't work and `useFetch` is executed 2nd time on the client.\r\n\r\nAnyway, it is just one use-case (maybe not the perfect). The idea of this feature-request is not covering just one use-case, but having a standard mechanism to create SSR-friendly `ref`s, with full semantic of normal `ref`, unlike `useState`, that certainly helpful when you need a shared state, but gets in the way when you need a private state, just like with `ref`, but stable between SSR and client-side rendering.\r\n\r\nI remember `useId()` was introduced not long time ago to cover just a specific case of html element `id` generation (and similar cases). I think it solves similar problem, but in less generic way (you can't use your own initializer, `useId()` always returns a \"random\" string).\r\n\r\nP.S. I tried to search for similar questions/proposition everywhere but didn't find anything. Maybe it's just my skill of creating a correct search requests. :) Anyway, if this idea was already discussed, please point me at it. Honestly, I'm very surprised that it was never discussed, as it is not the first time when I personally needed this feature, just the 1st time when I decided to create a feature request.\r\n\r\n### Additional information\r\n\r\n- [ ] Would you be willing to help implement this feature?\r\n _I would like to, but I'm afraid I will not be able. I tried to understand the implementation of `useId` but it looks like pure black magic to me._\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).",[2064,2065],{"name":1985,"color":2013},{"name":2015,"color":2016},28984,"Real SSR-friendly Ref","2024-09-16T17:51:42Z","https://github.com/nuxt/nuxt/issues/28984",0.75914544,{"description":2072,"labels":2073,"number":2077,"owner":1991,"repository":2040,"state":1993,"title":2078,"updated_at":2079,"url":2080,"score":2081},"### Description\n\nI’ve been trying to display an avatar with a chip inside a `UCommandPalette` item (and `UButton`, …), but it looks like this use case isn't currently supported. \n\n### Additional context\n\n_No response_",[2074,2075,2076],{"name":1985,"color":2049},{"name":2051,"color":2052},{"name":2054,"color":2055},3827,"[UCommandPalette] Support for avatars with chips in `UCommandPalette` items (and `UButton`, …)","2025-04-08T12:03:29Z","https://github.com/nuxt/ui/issues/3827",0.7595112,{"description":2083,"labels":2084,"number":2091,"owner":1991,"repository":1991,"state":2092,"title":2093,"updated_at":2094,"url":2095,"score":2096},"### Environment\r\n\r\nNuxi 3.0.0 14:35:05\r\n 14:35:06\r\nRootDir: /var/www/apps/odyc 14:35:06\r\nNuxt project info: 14:35:06\r\n\r\n------------------------------\r\n- Operating System: `Linux`\r\n- Node Version: `v18.12.1`\r\n- Nuxt Version: `3.0.0`\r\n- Nitro Version: `1.0.0`\r\n- Package Manager: `npm@8.19.2`\r\n- Builder: `vite`\r\n- User Config: `runtimeConfig`, `css`, `vite`, `modules`\r\n- Runtime Modules: `()`\r\n- Build Modules: `-`\r\n\r\n### Reproduction\r\n\r\nI have a plugin with firestore : plugins/firebaseAuth.client.ts\r\n\r\n```\r\nimport { initializeApp } from \"firebase/app\";\r\nimport { getFirestore, collection, getDocs } from \"firebase/firestore\";\r\nimport { getAuth, onAuthStateChanged } from \"firebase/auth\";\r\n\r\nexport default defineNuxtPlugin((nuxtApp) => {\r\n\r\n const config = useRuntimeConfig()\r\n\r\n const firebaseConfig = {\r\n apiKey: config.FIREBASE_API_KEY,\r\n authDomain: config.FIREBASE_AUTH_DOMAIN,\r\n projectId: config.FIREBASE_PROJECT_ID,\r\n storageBucket: config.FIREBASE_STORAGE_BUCKET,\r\n messagingSenderId: config.FIREBASE_MESSAGING_SENDER_ID,\r\n appId: config.FIREBASE_APP_ID,\r\n }\r\n\r\n // Initialize Firebase\r\n const app = initializeApp(firebaseConfig)\r\n const auth = getAuth(app)\r\n\r\n const db = getFirestore(app); \r\n console.log(\"db\", db)\r\n\r\n const querySnapshot = getDocs(collection(db, \"supplier_invoice\"));\r\n querySnapshot.then((querySnapshot) => {\r\n querySnapshot.forEach((doc) => {\r\n console.log(doc.data());\r\n });\r\n });\r\n\r\n nuxtApp.vueApp.provide('auth', auth)\r\n nuxtApp.provide('auth', auth)\r\n\r\n nuxtApp.vueApp.provide('db', db)\r\n nuxtApp.provide('db', db)\r\n});\r\n```\r\nI have a page : pages/supplier/index.vue\r\n\r\n```\r\n\u003Cscript setup>\r\nimport { collection, getDocs, doc, setDoc } from \"firebase/firestore\";\r\n\r\ndefinePageMeta({\r\n title: 'Factures fournisseurs'\r\n});\r\n\r\nconst nuxtApp = useNuxtApp()\r\nconsole.log(nuxtApp.$db)\r\n\r\nconst querySnapshot = getDocs(collection(nuxtApp.$db, \"supplier_invoice\"));\r\nquerySnapshot.then((querySnapshot) => {\r\n querySnapshot.forEach((doc) => {\r\n console.log(doc.data());\r\n });\r\n});\r\n\r\n\u003C/script>\r\n```\r\n\r\n\r\n\r\n### Describe the bug\r\n\r\nIn the plugin when i call my collection, it works, But when i try do the same call in the page, it not works !\r\n\r\nThe error is : **Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore**\r\n\r\nThe log of nuxtApp.$db seems to be the same with the log db in the plugin.\r\n\r\n```\r\nconst querySnapshot = getDocs(collection(db, \"supplier_invoice\"));\r\nquerySnapshot.then((querySnapshot) => {\r\n querySnapshot.forEach((doc) => {\r\n console.log(doc.data());\r\n });\r\n});\r\n```\r\n\r\n**So in don't know what happens, some ideas ? Thks**\r\n\r\n### EDIT\r\n\r\nI do some tests, and something like that \"works\" :\r\n\r\n```\r\nasync function getAll() {\r\n const nuxtApp = useNuxtApp()\r\n const querySnapshot = await getDocs(collection(nuxtApp.$db, \"supplier_invoice\"));\r\n const data = []\r\n querySnapshot.forEach((doc) => {\r\n data.push(doc.data())\r\n })\r\n return data;\r\n}\r\n\r\nonMounted(async () => {\r\n const invoices = await getAll()\r\n console.log(invoices)\r\n})\r\n```\r\nand when i remove the `onMounted(async () => {])` it give me the error after browser refresh.\r\n\r\nI can't stay with onMounted cause i want to use invoices in my template, and with this way is not available.\r\n```\r\n\u003Ctr v-for=\"invoice in invoices\" :key=\"invoice.supplier\">\r\n```\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2085,2088],{"name":2086,"color":2087},"3.x","29bc7f",{"name":2089,"color":2090},"needs details","493824",19312,"closed","Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore","2023-02-28T11:40:55Z","https://github.com/nuxt/nuxt/issues/19312",0.6806798,{"description":2098,"labels":2099,"number":2104,"owner":1991,"repository":2040,"state":2092,"title":2105,"updated_at":2106,"url":2107,"score":2108},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.10.0\n- Nuxt Version: 3.15.4\n- CLI Version: 3.21.1\n- Nitro Version: 2.10.4\n- Package Manager: bun@1.2.2\n- Builder: -\n- User Config: devtools, experimental, ssr, modules, runtimeConfig, css, future, compatibilityDate, app, ogImage, image, icon, colorMode, seo, apiParty, security, lodash, zodI18n, i18n, vue, routeRules, $development, $production, $test\n- Runtime Modules: magic-regexp/nuxt@0.8.0, nuxt-api-party@2.1.2, nuxt-lodash@2.5.3, nuxt-security@2.1.5, nuxt-zod-i18n@1.11.5, @vueuse/nuxt@12.5.0, @pinia/nuxt@0.9.0, @nuxtjs/i18n@9.0.0, @nuxtjs/seo@2.1.1, @nuxt/ui@3.0.0-alpha.12, @nuxt/image@1.9.0, @nuxt/eslint@1.0.0, @nuxt/scripts@0.9.5\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.12\n\n### Reproduction\n\nYou can check it for example here: https://ui3.nuxt.dev/components/navigation-menu#theme when you click the link to check out the source code of the theme file.\n\n### Description\n\nWhen trying to navigate to the source code of a component's theme (like `NavigationMenu`), the link is broken.\nI saw that it's because this\nhttps://github.com/nuxt/ui/blob/69bc686efd657e3cbf8e9394649f0d5f4c4af434/docs/app/components/content/ComponentTheme.vue#L18\nbreaks this\nhttps://github.com/nuxt/ui/blob/69bc686efd657e3cbf8e9394649f0d5f4c4af434/docs/app/components/content/ComponentTheme.vue#L113\nso I think we should either rename the theme files to be camelCase (not worth the effort imho) or just easily do something like this:\n```ts\nconst name = props.slug ?? route.params.slug?.[route.params.slug.length - 1] ?? ''\nconst camelName = camelCase(name)\n```\nand use the `camelName` where needed.\n\nI can submit a PR for that if you prefer.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2100,2103],{"name":2101,"color":2102},"bug","d73a4a",{"name":2051,"color":2052},3222,"Links to components' theme source code are broken","2025-02-02T10:38:55Z","https://github.com/nuxt/ui/issues/3222",0.71279776,["Reactive",2110],{},["Set"],["ShallowReactive",2113],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"Fu_rmDdSlnmX6pl2VEhZ4S2I9EDfkj9BJymEkn0dSs4":-1},"/nuxt/ui/2284"]