` in `index.vue`\n4. run `npm run generate`\n5. serve `.output/public` with `apache2`\n\n\u003Cdetails>\u003Csummary>\u003Ccode>nuxt.config.ts\u003C/code> and \u003Ccode>app/pages/index.vue\u003C/code>\u003C/summary>\n\n```\nexport default defineNuxtConfig({\n devtools: { enabled: true },\n\n modules: [\n '@nuxt/ui',\n '@nuxt/eslint'\n ],\n\n ssr: false,\n css: ['~/assets/css/main.css'],\n icon: {\n provider: 'none',\n clientBundle: {\n scan: true,\n }\n },\n\n compatibilityDate: '2025-07-16'\n})\n```\n\n```\n\u003Cscript setup>\nconst value=ref(true)\n\u003C/script>\n\u003Ctemplate>\n \u003CUCheckbox v-model=\"value\" />\n\u003C/template>\n```\n\n\u003C/details>\n\n### Description\n\n\nThe default icon for `UCheckbox` will not be [bundled for client](https://github.com/nuxt/icon?#client-bundle) when SSR is disabled.\n\nThe check icon is missing:\n\n\u003Cimg width=\"47\" height=\"52\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/3a72a4c2-3577-4de5-8dcf-89c2ed9c8879\" />\n\nand a warning message is shown in the console:\n\n> [!WARNING] \n> [Icon] failed to load icon \\`lucide:check\\`\n\nfyi, the icon will show if\n- `provider: 'server'` and `ssr: true` is set\n- `provider: 'iconify'` is set and `https://api.iconify.design/` is reachable\n- Or, the icon is explitly specified: `\u003CUCheckbox v-model=\"value\" icon=\"i-lucide-check\" />`\n",[3162,3165],{"name":3163,"color":3164},"bug","d73a4a",{"name":3166,"color":3167},"triage","ffffff",4748,"ui","Check Icon is missing when `icon.clientBundle.scan: true` and `ssr: false` is used for static build","2025-08-14T16:08:31Z","https://github.com/nuxt/ui/issues/4748",0.7474442,{"description":3175,"labels":3176,"number":3179,"owner":3140,"repository":3180,"state":3181,"title":3182,"updated_at":3183,"url":3184,"score":3185},"I got a \n```\n---\ntitle: ''\n---\n```\n\nWe should not set the `title` and `description` key if empty since Content v2 will automatically takes the first `\u003Ch1>` to generate it.",[3177],{"name":3163,"color":3178},"ff281a",505,"nuxt.com","closed","[Project] Don't generate the front-matter if values are empty","2023-02-15T12:32:27Z","https://github.com/nuxt/nuxt.com/issues/505",0.67234886,{"description":3187,"labels":3188,"number":3179,"owner":3140,"repository":3154,"state":3181,"title":3198,"updated_at":3199,"url":3200,"score":3185},"As you mentioned in the playground tests, it would be great if we can use vue-router for navigating etc. \r\nAlso really helpfull if you have dynamic routes where the API relies on some `route.params` value.",[3189,3192,3195],{"name":3190,"color":3191},"enhancement","a2eeef",{"name":3193,"color":3194},"help wanted","008672",{"name":3196,"color":3197},"vitest-environment","b60205","(feat) Vue router support","2023-12-02T00:17:07Z","https://github.com/nuxt/test-utils/issues/505",{"description":3202,"labels":3203,"number":3210,"owner":3140,"repository":3169,"state":3181,"title":3211,"updated_at":3212,"url":3213,"score":3214},"### Description\n\nHi there,\n\nI'd like to know, how to deal with paginated data that comes from the used API, e.g. a Laravel resource response.\n\n```\n{\n \"current_page\": 1,\n \"data\": [\n {\n \"id\": \"1\",\n \"name\": \"Foo\",\n \"created_at\": \"2025-04-01T11:46:21+00:00\"\n },\n {\n \"id\": \"2\",\n \"name\": \"Bar\",\n \"created_at\": \"2025-04-01T11:46:21+00:00\"\n },\n ],\n \"first_page_url\": \"https:\\/\\/api.example.test\\/test?page%5Bsize%5D=30&page%5Bnumber%5D=1\",\n \"from\": 1,\n \"last_page\": 14,\n \"last_page_url\": \"https:\\/\\/api.example.test\\/test?page%5Bsize%5D=30&page%5Bnumber%5D=14\",\n \"links\": [\n {\n \"url\": null,\n \"label\": \"« Previous\",\n \"active\": false\n },\n {\n \"url\": \"https:\\/\\/api.example.test\\/test?page%5Bsize%5D=30&page%5Bnumber%5D=1\",\n \"label\": \"1\",\n \"active\": true\n },\n {\n \"url\": \"https:\\/\\/api.example.test\\/test?page%5Bsize%5D=30&page%5Bnumber%5D=2\",\n \"label\": \"2\",\n \"active\": false\n },\n {\n \"url\": \"https:\\/\\/api.example.test\\/test?page%5Bsize%5D=30&page%5Bnumber%5D=3\",\n \"label\": \"3\",\n \"active\": false\n },\n {\n \"url\": \"https:\\/\\/api.example.test\\/test?page%5Bsize%5D=30&page%5Bnumber%5D=4\",\n \"label\": \"4\",\n \"active\": false\n },\n {\n \"url\": \"https:\\/\\/api.example.test\\/test?page%5Bsize%5D=30&page%5Bnumber%5D=5\",\n \"label\": \"5\",\n \"active\": false\n },\n {\n \"url\": \"https:\\/\\/api.example.test\\/test?page%5Bsize%5D=30&page%5Bnumber%5D=6\",\n \"label\": \"6\",\n \"active\": false\n },\n {\n \"url\": \"https:\\/\\/api.example.test\\/test?page%5Bsize%5D=30&page%5Bnumber%5D=7\",\n \"label\": \"7\",\n \"active\": false\n },\n {\n \"url\": \"https:\\/\\/api.example.test\\/test?page%5Bsize%5D=30&page%5Bnumber%5D=8\",\n \"label\": \"8\",\n \"active\": false\n },\n {\n \"url\": \"https:\\/\\/api.example.test\\/test?page%5Bsize%5D=30&page%5Bnumber%5D=9\",\n \"label\": \"9\",\n \"active\": false\n },\n {\n \"url\": \"https:\\/\\/api.example.test\\/test?page%5Bsize%5D=30&page%5Bnumber%5D=10\",\n \"label\": \"10\",\n \"active\": false\n },\n {\n \"url\": null,\n \"label\": \"...\",\n \"active\": false\n },\n {\n \"url\": \"https:\\/\\/api.example.test\\/test?page%5Bsize%5D=30&page%5Bnumber%5D=13\",\n \"label\": \"13\",\n \"active\": false\n },\n {\n \"url\": \"https:\\/\\/api.example.test\\/test?page%5Bsize%5D=30&page%5Bnumber%5D=14\",\n \"label\": \"14\",\n \"active\": false\n },\n {\n \"url\": \"https:\\/\\/api.example.test\\/test?page%5Bsize%5D=30&page%5Bnumber%5D=2\",\n \"label\": \"Next »\",\n \"active\": false\n }\n ],\n \"next_page_url\": \"https:\\/\\/api.example.test\\/test?page%5Bsize%5D=30&page%5Bnumber%5D=2\",\n \"path\": \"https:\\/\\/api.example.test\\/test\",\n \"per_page\": 30,\n \"prev_page_url\": null,\n \"to\": 30,\n \"total\": 394\n}\n```\n\nI am a bit intimidated by the TanStack API.",[3204,3207],{"name":3205,"color":3206},"question","d876e3",{"name":3208,"color":3209},"v3","49DCB8",3776,"Use UTable with paginated data, which comes from API","2025-04-04T13:04:05Z","https://github.com/nuxt/ui/issues/3776",0.67385924,{"description":3216,"labels":3217,"number":3218,"owner":3140,"repository":3141,"state":3181,"title":3219,"updated_at":3220,"url":3221,"score":3222},"I have this kind of template:\n```\n \u003Cspan>\n \u003CIcon\n v-show=\"!searching\"\n name=\"i-heroicons-magnifying-glass-20-solid\" />\n \u003CIcon\n v-show=\"searching\"\n name=\"i-heroicons-arrow-path-20-solid\"\n class=\"animate-spin\"\n />\u003C/span>\n```\n\nSo, it should show `magnifying-glass` when not searching and `arrow-path` when searching. This does not work. Depending on if the view was loaded during navigation or page load it does not change or there a both. With `v-if` it works fine.\n\nHere is a reproduction with `nuxt-ui`:\nhttps://stackblitz.com/edit/nuxt-ui-7zcwsg?file=app.vue,package.json\n\nAnd here is a reproduction from `nuxt-icon-playground`:\nhttps://stackblitz.com/edit/nuxt-icon-playground-odkjmz?file=app.vue,package.json\n\nIt works with 1.7.6 but not 1.8.0 onwards. Could this be related to #300 ?\n\n---\n```\n❯ npx nuxt info\nWorking directory: /home/projects/nuxt-ui \nNuxt project info: \n\n------------------------------\n- Operating System: Linux\n- Node Version: v18.20.3\n- Nuxt Version: 3.14.159\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@8.15.6\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@2.19.2\n- Build Modules: -\n------------------------------\n```\n",[],301,"Issue with v-show on icons in 1.8.1 or 1.8.0","2024-11-20T15:03:29Z","https://github.com/nuxt/icon/issues/301",0.6939673,{"description":3224,"labels":3225,"number":3228,"owner":3140,"repository":3169,"state":3181,"title":3229,"updated_at":3230,"url":3231,"score":3232},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.9.0\n- Nuxt Version: 3.15.1\n- CLI Version: 3.17.2\n- Nitro Version: 2.10.4\n- Package Manager: npm@9.8.1\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.10\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.10\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/keen-chaplygin-lyj8jq\n\n### Description\n\nIf in `nuxt.config.ts` the `ssr` property is set to false, the `--ui-*` variables cannot be overwritten anymore in `:root` as described in the nuxt docs here in the green info box: https://ui3.nuxt.dev/getting-started/theme#color-shades.\n\nOnly if `!important` is used, the changes take effect.\n\nI believe this is because the `main.css` is imported before the variable declaration done by nuxt/ui, so the variable values in `main.css` are overwritten again. In the final html the `--ui-*` variable declaration done by nuxt/ui is inlined as the last element in the `\u003Chead>` of the html.\n\n#### main.css\n```css\n@import \"tailwindcss\";\n@import \"@nuxt/ui\";\n\n:root {\n /* Try to use different shade. */\n --ui-primary: var(--ui-color-primary-700); /* Does not work. */\n --ui-success: var(--ui-color-success-700) !important;\n}\n```\n\n#### nuxt.config.ts\n```ts\nexport default defineNuxtConfig({\n devtools: { enabled: true },\n modules: [\"@nuxt/ui\"],\n css: [\"~/assets/css/main.css\"],\n compatibilityDate: \"2025-01-06\",\n ssr: false, // works if set to true\n});\n```\n\n#### app.vue\n```vue\n\u003Ctemplate>\n \u003CUApp>\n \u003Cdiv class=\"flex flex-col items-start gap-2\">\n \u003CUBadge label=\"Uses default -500 shade\" color=\"primary\" />\n \u003CUBadge label=\"Uses -700 shade due to !important\" color=\"success\" />\n \u003C/div>\n \u003C/UApp>\n\u003C/template>\n```",[3226,3227],{"name":3163,"color":3164},{"name":3208,"color":3209},3075,"[v3] Overwriting `--ui-*` CSS variables does not work with client-side only rendering (`ssr: false`).","2025-01-25T13:14:25Z","https://github.com/nuxt/ui/issues/3075",0.72071284,{"description":3234,"labels":3235,"number":3238,"owner":3140,"repository":3169,"state":3181,"title":3239,"updated_at":3240,"url":3241,"score":3242},"### For what version of Nuxt UI are you asking this question?\n\nv3.0.0-alpha.x\n\n### Description\n\nIn my Nuxt 3 project (that uses Nuxt UI `v3.0.0-alpha9`), I have a Vue component like this:\n\n```vue\n\u003Cscript setup lang=\"ts\">\n...\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUContainer class=\"section\">\n ...\n \u003C/UContainer>\n\u003C/template>\n\n\u003Cstyle scoped lang=\"scss\">\n@use \"tailwindcss\";\n\n.section + .section {\n @apply mt-8 lg:mt-12;\n}\n\u003C/style>\n```\n\nThe problem is that `@apply mt-8 lg:mt-12;` doesn't work unless I add this to my `nuxt.config.ts`:\n```\npostcss: {\n plugins: {\n \"@tailwindcss/postcss\": {}, // https://tailwindcss.com/docs/v4-beta#using-post-css\n },\n},\n```\n\nHowever, when I do this, the Nuxt UI components stop working properly (e.g., Slideover renders at the bottom of the page and with wrong styling). How can I make the `@apply ...` work without breaking the Nuxt UI components?\n\nThis is my `package.json`:\n```json\n{\n \"name\": \"frontend\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"postinstall\": \"husky install && nuxt prepare\",\n \"dev\": \"nuxt dev\",\n \"build\": \"nuxt build\",\n \"preview\": \"nuxt preview\"\n },\n \"dependencies\": {\n \"@nuxt/ui\": \"^3.0.0-alpha.9\",\n \"nuxt\": \"latest\",\n \"nuxt-svgo\": \"latest\",\n \"vue\": \"latest\",\n \"vue-router\": \"latest\"\n },\n \"devDependencies\": {\n \"@commitlint/cli\": \"latest\",\n \"@commitlint/config-conventional\": \"latest\",\n \"husky\": \"latest\",\n \"sass\": \"latest\"\n }\n}\n```\n\nThis is my `nuxt.config.ts`:\n```ts\n// https://nuxt.com/docs/api/configuration/nuxt-config\nexport default defineNuxtConfig({\n compatibilityDate: \"2024-04-03\",\n devtools: { enabled: false },\n modules: [\"@nuxt/ui\", \"nuxt-svgo\"],\n css: [\"@/assets/css/main.css\"],\n // postcss: {\n // plugins: {\n // \"@tailwindcss/postcss\": {}, // https://tailwindcss.com/docs/v4-beta#using-post-css\n // },\n // },\n appConfig: {\n // https://ui3.nuxt.dev/getting-started/theme#colors\n ui: {\n colors: {\n primary: \"primary\", // Defined in `assets/css/theme.css`\n secondary: \"secondary\", // Defined in `assets/css/theme.css`\n },\n },\n },\n});\n```\n\nThis is my `assets/main.css`:\n```css\n/* https://ui3.nuxt.dev/getting-started/installation/nuxt#import-tailwind-css-and-nuxt-ui-in-your-css */\n@import \"tailwindcss\";\n@import \"@nuxt/ui\";\n```",[3236,3237],{"name":3205,"color":3206},{"name":3208,"color":3209},2772,"@apply Tailwind CSS class in a component's `\u003Cstyle>` tag","2024-12-09T11:14:28Z","https://github.com/nuxt/ui/issues/2772",0.72751766,{"description":3244,"labels":3245,"number":3246,"owner":3140,"repository":3141,"state":3181,"title":3247,"updated_at":3248,"url":3249,"score":3250},"Since I upgraded to 1.4.x icons that were not there on initial page load (e.g. toggle by v-if or even when navigating pages) are all missing with errors in console for each:\r\n\r\n```\r\nGET http://localhost:3001/api/_nuxt_icon/material-symbols.json?icons=add 404 (Cannot find any route matching /_nuxt_icon/material-symbols.json.)\r\n```\r\n\r\nThis applies to dev only. On prod it works fine.\r\n\r\nI made a reproduction repo but I couldnt reproduce there. I dont have any configuration for icons in my nuxt.config and I just use them as shown in the docs with no additional config:\r\n\r\n```\r\n\u003CIcon name=\"uil:github\" />\r\n```\r\n\r\nNuxi info:\r\n```\r\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v21.6.1\r\n- Nuxt Version: 3.13.0\r\n- CLI Version: 3.13.1\r\n- Nitro Version: 2.9.7\r\n- Package Manager: bun@1.1.26\r\n- Builder: -\r\n- User Config: extends, modules, future, experimental, runtimeConfig, scripts, i18n, routeRules, ignore, site, app, ogImage, sitemap, plausible\r\n- Runtime Modules: @nuxt/scripts@^0.6.4, @nuxtjs/seo@2.0.0-rc.19, @nuxtjs/tailwindcss@^6.12.0, @vee-validate/nuxt@^4.13.2, nuxt-og-image, @nuxtjs/plausible@^1.0.2\r\n- Build Modules: -\r\n------------------------------\r\n```",[],251,"On dev: 404 for icons that were not visible on initial page load","2024-09-05T14:04:26Z","https://github.com/nuxt/icon/issues/251",0.7310689,["Reactive",3252],{},["Set"],["ShallowReactive",3255],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fhfkqiE7uI74nwJ_uYiY-zPbcVlNyzYf1Y5tkGFR4hfM":-1},"/nuxt/ui/3299"]