\r\n\u003C/template>\r\n\u003Cscript setup>\r\nconst show = ref(false)\r\n\u003C/script>\r\n\u003Cscript setup>\r\nconst {error, data} = await useFetch('https://ord.uib.no/bm/fil/article100new.json')\r\n\u003C/script>\r\n```\r\n\r\n\r\n#### **`app.vue`**\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cbutton @click=\"show=!show\">toggle\u003C/button>\r\n \u003CPage v-if=\"show\"/>\r\n\u003C/template>\r\n\u003Cscript setup>\r\nconst show = ref(false)\r\n\u003C/script>\r\n```\r\n\r\nAfter the page has finished loading in the browser, disconnect from the internet, or select 'offline' in the browser devtools. Then click the button to render the Page-component. The error message will be \"\u003Cno response> Failed to fetch\", with status code 500.\r\n\r\n\r\n\r\n### Describe the bug\r\n\r\nWhen internet connection is lost, useFetch returns it as an internal server error when using an external API:\r\n{ \"cause\": \"TypeError: Failed to fetch\", \"message\": \"[GET] \\\"https://ord.uib.no/bm/fil/article100new.json\\\": \u003Cno response> Failed to fetch\", \"name\": \"Error\", \"statusCode\": 500 }\r\n\r\nIn the browser devtools I see an error code in fetch.js that makes more sense: net::ERR_INTERNET_DISCONNECTED, but I'm unable to capture this with useFetch.\r\n\r\n### Additional context\r\nThe error code is 500 even if SSR is disabled.\r\n\r\n### Logs\r\n\r\n_No response_",[3038,3041,3044,3047],{"name":3039,"color":3040},"enhancement","8DEF37",{"name":3042,"color":3043},"workaround available","11376d",{"name":3045,"color":3046},"upstream","E8A36D",{"name":3048,"color":3049},"🍰 p2-nice-to-have","0E8A16",24334,"Misleading error message in useFetch","2024-06-30T11:06:51Z","https://github.com/nuxt/nuxt/issues/24334",0.64864004,{"description":3056,"labels":3057,"number":3065,"owner":3028,"repository":3029,"state":3066,"title":3067,"updated_at":3068,"url":3069,"score":3070},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v18.20.5\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.8.2\n- Builder: -\n- User Config: default\n- Runtime Modules: nuxt-vuefire@1.0.4, @nuxt/ui@3.0.0-alpha.9\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.9\n\n### Reproduction\n\n\n\n\n\n```\n \u003CUTooltip :delay-duration=\"0\" :text=\"`R$ ${transactionCost.brl}`\">\n \u003CUIcon class=\"text-yellow-500 text-xs\" name=\"i-lucide-coins\" />\n \u003Cp class=\"text-neutral-200 text-xs\">\n {{ transactionCost.credits }}\n \u003C/p>\n\u003C/UTooltip>\n```\n\n``` \n\u003CNuxtLayout>\n \u003CUApp :toaster=\"{ position: 'top-right' }\">\n \u003CNuxtPage />\n \u003C/UApp>\n\u003C/NuxtLayout>\n```\n\n\n### Description\n\nThe `app.vue` is already using the `UApp`. When I try to add a `UTooltip` inside the modal, it throw an error.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```\nUncaught (in promise) Error: Injection `Symbol(TooltipProviderContext)` not found. Component must be used within `TooltipProvider`\n```",[3058,3059,3062],{"name":3019,"color":3020},{"name":3060,"color":3061},"needs reproduction","CB47CF",{"name":3063,"color":3064},"v3","49DCB8",2801,"closed","[v3][UTooltip] `UTooltip` inside `UModal` causing error","2025-02-06T15:28:30Z","https://github.com/nuxt/ui/issues/2801",0.5907404,{"description":3072,"labels":3073,"number":3078,"owner":3028,"repository":3029,"state":3066,"title":3079,"updated_at":3080,"url":3081,"score":3082},"### Description\n\nBefore using `nuxt ui`, I briefly skimmed through the repository and found an already closed issue: [3018](https://github.com/nuxt/ui/issues/3018)\n\nThe error and solution mentioned in this issue (the [v2 documentation](https://ui.nuxt.com/getting-started/installation) indeed did not mention the solution) can actually be resolved by adding `tailwindcss@next` to the `peerDependencies` section in the `package.json` file.\n\nThis is because when [nuxi module add](https://github.com/nuxt/cli/blob/1afc06e8d08ea781fc5fede343de8d68865c2b4e/packages/nuxi/src/commands/module/add.ts#L134) installs a module, it not only installs the module itself but also scans the module package's `peerDependencies`.\n\nFor example, when using `nuxi module add pinia`, since `@pinia/nuxt` has `pinia` listed in its `peerDependencies` in the [package.json](https://github.com/vuejs/pinia/blob/3b21e08b6a068d18112b915b83f702fb5504ab73/packages/nuxt/package.json#L51C4-L51C20), both `@pinia/nuxt` and `pinia` will be automatically installed during the module installation.\n\nIf there are dependencies in `peerDependencies` that you do not want `nuxi module` to install automatically, you can use `peerDependenciesMeta` to ignore them, for [example](https://github.com/atinux/nuxt-auth-utils/blob/6b61b8888e3b3c6f60fd5ff767b7f0aa6cf09fc9/package.json#L57):\n\n```\n\"peerDependenciesMeta\": {\n \"pinia\": {\n \"optional\": true\n }\n },\n```\n\nTherefore, Nuxt UI can specify `tailwindcss@next` in the `peerDependencies` of `package.json`, ensuring Tailwind CSS is automatically installed when the Nuxt UI module is installed.\n\nThis solution applies to both v3 and v2.\n\n> PS: I noticed `typescript` in the `peerDependencies` of the v3 package.json. Is this a necessary dependency similar to `tailwindcss`? If not, after adding tailwindcss, perhaps `peerDependenciesMeta` could be used to ignore it.",[3074,3077],{"name":3075,"color":3076},"question","d876e3",{"name":3063,"color":3064},3349,"Add \"tailwindcss@next\" to the \"peerDependencies\" section in the package.json file.","2025-02-21T17:05:10Z","https://github.com/nuxt/ui/issues/3349",0.61599493,{"description":3084,"labels":3085,"number":3089,"owner":3028,"repository":3029,"state":3066,"title":3090,"updated_at":3091,"url":3092,"score":3093},"### Description\n\nIt's shorter and can save traffic.\n\n### Additional context\n\n_No response_",[3086,3088],{"name":3039,"color":3087},"a2eeef",{"name":3063,"color":3064},3250,"Use `foo-(--bar)` instead of `foo-[var(--bar)]` for tailwindcss classes","2025-02-07T10:24:17Z","https://github.com/nuxt/ui/issues/3250",0.6176803,{"description":3095,"labels":3096,"number":3099,"owner":3028,"repository":3029,"state":3066,"title":3100,"updated_at":3101,"url":3102,"score":3103},"### Description\n\nHello, I just wanted to overwrite shadow-sm with another shadow in the card root slot.\nBut I failed to do so. I tried the :ui way and the app.config.ts way but in both cases the new class \"shadow-card\" ended up BEHIND \"shadow-sm\".\n\n```\n card: {\n slots: {\n root: \"shadow-card\",\n },\n },\n```\n\nSo shadow-card always gets overwritten by shadow-sm cause the code always ends up like this:\n```\n\u003Cdiv class=\"bg-[var(--ui-bg)] ring ring-[var(--ui-border)] divide-y divide-[var(--ui-border)] rounded-[calc(var(--ui-radius)*2)] shadow-sm shadow-card\">\n```\n\nso how can I overwrite shadow-sm here?",[3097,3098],{"name":3075,"color":3076},{"name":3063,"color":3064},2936,"Overwrite css classes of slots","2025-01-08T16:26:22Z","https://github.com/nuxt/ui/issues/2936",0.61990875,{"description":3105,"labels":3106,"number":3109,"owner":3028,"repository":3029,"state":3066,"title":3110,"updated_at":3111,"url":3112,"score":3113},"### Environment\n\n------------------------------\n- Operating System: Linux\n- Node Version: v22.14.0\n- Nuxt Version: 3.16.0\n- CLI Version: 3.23.0\n- Nitro Version: 2.11.6\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: app, compatibilityDate, sourcemap, devtools, nitro, experimental, runtimeConfig, routeRules, typescript, css, viewport, i18n, icon, hub, devServer, vite, $development, $production, auth, ui, vue, modules\n- Runtime Modules: @nuxtjs/i18n@9.3.1, @nuxt/ui@3.0.0, @pinia/nuxt@0.10.1, nuxt-viewport@2.2.0, @nuxthub/core@0.8.18, nuxt-auth-utils@0.5.16, @nuxt/eslint@1.2.0\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0\n\n### Reproduction\n\nInstall nuxt ui and i18n module (to switch to current loacale)\n\nin app.vue: \n```vue\ntemplate>\n \u003CUApp \n :toaster=\"{ position: $viewport.isLessThan('md') ? 'bottom-center' : 'top-center' }\"\n :locale=\"locales[locale as 'fr' | 'en']\" class=\"\"\n >\n \u003CNuxtLayout>\n \u003CNuxtPage />\n \u003C/NuxtLayout>\n \u003C/UApp>\n\u003C/template>\n\u003Cscript setup lang=\"ts\">\nimport { fr, en } from '@nuxt/ui/locale';\nconst locales = { fr, en };\nconst { t, locale } = useI18n();\n\u003C/script>\n```\nAnalyze your bundle:\n`npx nuxi analyze`\n\n### Description\n\nAs you can see, unused locales are still included in the bundle, while only Fr and En have been imported\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3107,3108],{"name":3019,"color":3020},{"name":3063,"color":3064},3602,"i18n, Unused locales are included in the bundle","2025-03-18T14:19:38Z","https://github.com/nuxt/ui/issues/3602",0.63225746,{"description":3115,"labels":3116,"number":3117,"owner":3028,"repository":3118,"state":3066,"title":3119,"updated_at":3120,"url":3121,"score":3122},"After using `pnpm update` to upgrade vue to 3.4.3, the console throws a lot of `Hydration mismatch`. If I am using vue 3.3.13, no `Hydration mismatch` warnings will be thrown.\r\n\r\n\u003Cimg width=\"1402\" alt=\"SCR-20240103-qagg\" src=\"https://github.com/nuxt/nuxt.com/assets/133459587/188ac1c4-e19a-4570-a5d0-4863c92a7bda\">\r\n",[],1467,"nuxt.com","About vue@3.4.3 causing hydration mismatch","2024-05-03T00:34:36Z","https://github.com/nuxt/nuxt.com/issues/1467",0.6337479,{"description":3124,"labels":3125,"number":3131,"owner":3028,"repository":3029,"state":3066,"title":3132,"updated_at":3133,"url":3134,"score":3135},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.18.0\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.16.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.12.3\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/image@1.8.1, @nuxt/content@2.13.4, @nuxthq/studio@1.1.2, @nuxt/ui-pro@3.0.0-alpha.10, @nuxtjs/plausible@1.2.0, @nuxtjs/seo@2.0.2, @vueuse/nuxt@12.0.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0.alpha10\n\n### Reproduction\n\nhttps://ui3.nuxt.dev/components/button#loading (example with `loading-auto`)\n\n### Description\n\nWhen using a `UIButton` component with an `@click` event, the cursor does not change to `cursor-pointer`, which may confuse users about the button's clickability.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3126,3127,3130],{"name":3019,"color":3020},{"name":3128,"color":3129},"duplicate","cfd3d7",{"name":3063,"color":3064},2940,"`cursor-pointer` is missing on `UButton` with an `@click` event","2025-04-02T09:37:12Z","https://github.com/nuxt/ui/issues/2940",0.63762385,{"description":3137,"labels":3138,"number":3140,"owner":3028,"repository":3029,"state":3066,"title":3141,"updated_at":3142,"url":3143,"score":3144},"### Description\n\nHi, using the UTable with Expanded feature is it possible to apply a style to the Expand column ??? I can see how to do this for columns I add but not the expanded column.\r\nAlso is it possible to change the default so the expanded is open by default? Or to change this in the script section?\r\n\r\nThanks I was unable to find answers in the docs.",[3139],{"name":3075,"color":3076},2244,"UTable Expandable questions?","2024-11-05T14:52:12Z","https://github.com/nuxt/ui/issues/2244",0.6438758,["Reactive",3146],{},["Set"],["ShallowReactive",3149],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f5kg-8s2yf0ggrZqegDcJSdplmVmpf8dOEM4b7nUG1Rs":-1},"/nuxt/nuxt.com/1403"]