\n```",[3165],{"name":3166,"color":3167},"question","d876e3",4849,"ui","Can `UNavigationMenu` support active styles via the ui prop?","2025-08-30T10:29:01Z","https://github.com/nuxt/ui/issues/4849",0.75779605,{"description":3175,"labels":3176,"number":3177,"owner":3155,"repository":3178,"state":3179,"title":3180,"updated_at":3181,"url":3182,"score":3183},"### Environment\n\niPadOS Version: 16.2\r\nModel Name: iPad Air 4th generation\n\n### Reproduction\n\nBy accessing [Nuxt website](https://nuxt.com), it can't be opened from iPad on Safari browser.\n\n### Describe the bug\n\nThe content appears, but after a short time everything disappear. I checked in console.\r\n\r\nhttps://user-images.githubusercontent.com/27418268/212558002-8e0126c3-7c0a-4676-8cd2-4bb45e47e71b.MP4\r\n\r\n\u003Cimg width=\"1048\" alt=\"Screenshot 2023-01-15 at 19 50 15\" src=\"https://user-images.githubusercontent.com/27418268/212558006-5478a5c7-08bc-4b07-ada1-0e26aebf91b0.png\">\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[],1227,"nuxt.com","closed","Can't access nuxt.com from iPad on Safari","2023-10-10T14:45:12Z","https://github.com/nuxt/nuxt.com/issues/1227",0.74546564,{"description":3185,"labels":3186,"number":3196,"owner":3155,"repository":3169,"state":3179,"title":3197,"updated_at":3198,"url":3199,"score":3200},"### Package\n\nv4.0.0-alpha.x\n\n### Description\n\n## Why?\nQR codes are widely used in scenarios such as \"sharing links\", \"payment codes\", \"event tickets\", and \"product information\" in enterprise projects (e.g., e-commerce, admin systems, marketing pages). \n\nCurrently, Nuxt UI users need to manually integrate third-party libraries (e.g., `qrcode.vue`, `vue-qrcode-reader`) to implement QR code functions, which has the following pain points:\n- Lack of consistency with Nuxt UI's design system (e.g., theme colors, rounded corners, responsive adaptation).\n- Need to handle compatibility issues between third-party libraries and Nuxt 3 (e.g., SSR support, tree-shaking).\n- No built-in accessibility support (e.g., screen reader prompts, keyboard navigation for QR code download).\n\nAdding an official QRCode component can reduce user development costs and ensure consistency with the Nuxt UI ecosystem.\n\n### Additional context\n\n## What?\n### Basic Features (Must-have)\n- [x] Support dynamic content binding (e.g., bind `value` prop to generate QR code for links/texts like `https://nuxt.com`).\n- [x] Support size customization (via `size` prop, e.g., `size=\"128\"` for 128x128px, default to `160`).\n- [x] Support color customization (via `foregroundColor`/`backgroundColor` props, default to Nuxt UI's `--color-primary` and `--color-background` to fit the theme).\n- [x] Support error correction level (via `errorCorrectionLevel` prop, options: `L`/`M`/`Q`/`H`, default to `M` for common scenarios).\n- [x] SSR compatibility (ensure no client-side only errors when rendering on the server).\n- [x] Basic accessibility (add `aria-label` to describe the QR code content, e.g., \"QR code for Nuxt official website: https://nuxt.com\").\n\n### Advanced Features (Nice-to-have)\n- [ ] Support logo embedding (via `logo` prop, accept image URL; `logoSize` prop to control logo ratio, default to 15% of QR code size).\n- [ ] Support QR code download (built-in `download` method or `showDownloadButton` prop to display a default button, consistent with Nuxt UI's Button component style).\n- [ ] Support border customization (via `borderSize`/`borderColor` props, default to `0` for no border).\n- [ ] Support dark/light mode adaptation (automatically switch `foregroundColor` when color mode changes, if not manually set).\n\n## How?\n### API Design (Proposed)\n| Prop | Type | Default | Description |\n|---------------------|-----------|---------------|----------------------------------------------|\n| `value` | `string` | `required` | The content to generate QR code (e.g., link, text). |\n| `size` | `number` | `160` | QR code size (width = height, unit: px). |\n| `foregroundColor` | `string` | `--color-primary` | QR code block color (supports Tailwind class or hex/rgb). |\n| `backgroundColor` | `string` | `--color-background` | QR code background color. |\n| `errorCorrectionLevel` | `string` | `M` | Error correction level: `L`(7%), `M`(15%), `Q`(25%), `H`(30%). |\n| `logo` | `string` | `undefined` | Logo image URL (if provided, embed in the center). |\n| `logoSize` | `number` | `15` | Logo size ratio (15 = 15% of QR code size). |\n| `showDownloadButton`| `boolean` | `false` | Whether to show a default download button. |\n| `downloadName` | `string` | `qrcode` | File name when downloading (without extension). |\n\n### Usage Example (Pseudo-code)\n```vue\n\u003Ctemplate>\n \u003C!-- Basic usage -->\n \u003CUQRCode \n value=\"https://nuxt.com/ui\" \n size=\"200\"\n aria-label=\"QR code for Nuxt UI official website: https://nuxt.com/ui\"\n />\n\n \u003C!-- With logo and download button -->\n \u003CUQRCode \n value=\"https://github.com/nuxt/ui\"\n logo=\"https://nuxt.com/favicon.ico\"\n logoSize=\"20\"\n showDownloadButton\n downloadName=\"nuxt-ui-qrcode\"\n />\n\u003C/template>",[3187,3190,3193],{"name":3188,"color":3189},"enhancement","a2eeef",{"name":3191,"color":3192},"triage","ffffff",{"name":3194,"color":3195},"v4","49DCB8",4932,"[Component Request] Add QRCode component (support customization & accessibility)","2025-09-09T15:06:36Z","https://github.com/nuxt/ui/issues/4932",0.74594575,{"labels":3202,"number":3208,"owner":3155,"repository":3155,"state":3179,"title":3209,"updated_at":3210,"url":3211,"score":3212},[3203,3205],{"name":3188,"color":3204},"8DEF37",{"name":3206,"color":3207},"2.x","d4c5f9",6534,"Have PostCSS take into account global CSS","2023-11-09T05:59:38Z","https://github.com/nuxt/nuxt/issues/6534",0.74609137,{"description":3214,"labels":3215,"number":3219,"owner":3155,"repository":3169,"state":3179,"title":3220,"updated_at":3221,"url":3222,"score":3223},"### Description\n\nIn the vertical pill variant I want the background of the active item to be white. It's not clear how to achieve this through the `ui` prop\n\n\n\n```\n\u003CUNavigationMenu\n orientation=\"vertical\"\n variant=\"pill\"\n :items=\"items\"\n\n :ui=\"{\n variants: {\n compoundVariants: [\n {\n variant: 'pill',\n active: true,\n highlight: false,\n class: {\n link: 'before:bg-white' // tried this but it's not working\n }\n }\n ]\n }\n }\"\n/>\n```",[3216,3217],{"name":3166,"color":3167},{"name":3218,"color":3195},"v3",3517,"How To Style NavigationMenu items","2025-05-10T11:36:22Z","https://github.com/nuxt/ui/issues/3517",0.74628145,{"description":3225,"labels":3226,"number":3229,"owner":3155,"repository":3169,"state":3179,"title":3230,"updated_at":3231,"url":3232,"score":3233},"### Environment\n\n------------------------------\n- Operating System: Windows_NT\n- Node Version: v20.9.0\n- Nuxt Version: 3.13.1\n- CLI Version: 3.13.1\n- Nitro Version: 2.9.7\n- Package Manager: npm@10.9.0\n- Builder: -\n- User Config: devtools, modules, css, ui, colorMode, compatibilityDate, icon, sourcemap, experimental, nitro, future, pwa, routeRules, spaLoadingTemplate, runtimeConfig\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.9, @vueuse/nuxt@10.11.1, @nuxtjs/mdc@0.6.1, @formkit/auto-animate/nuxt@0.8.2, @vite-pwa/nuxt@0.10.5\n- Build Modules: -\n------------------------------\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`style tag`\n\n`Use`\n\n`debug`\n\n\n\n### Description\n\nSorry, I don't know if it's a bad configuration on my part, however the styles in which I use @apply don't work for me.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3227,3228],{"name":3146,"color":3147},{"name":3218,"color":3195},2763,"postcss style not applying","2024-12-05T13:48:59Z","https://github.com/nuxt/ui/issues/2763",0.7465422,{"description":3235,"labels":3236,"number":3239,"owner":3155,"repository":3169,"state":3179,"title":3240,"updated_at":3241,"url":3242,"score":3243},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v18.20.2`\n- Nuxt Version: `3.14.159`\n- CLI Version: `3.15.0`\n- Nitro Version: `2.10.4`\n- Package Manager: `pnpm@9.0.6`\n- Builder: `-`\n- User Config: `default`\n- Runtime Modules: `@nuxt/eslint@0.7.1`, `@nuxt/ui@3.0.0-alpha.7`\n- Build Modules: `-`\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.7\n\n### Reproduction\n\nhttps://github.com/juretopolak/nuxt-ui3-toasts\n\nhttps://codesandbox.io/p/github/juretopolak/nuxt-ui3-toasts/main\n\n### Description\n\nI’ve noticed an issue where toasts fail to render properly when multiple toasts are triggered in quick succession, such as within a loop. This leads to unexpected behavior, such as:\n\n\t•\tSome toasts not appearing at all.\n\t•\tOverlapping toasts.\n\nIn the reproduction, every time a button is clicked 2 toasts should appear.\n\n### Additional context\n\nhttps://github.com/user-attachments/assets/161918f9-7ab2-45d9-aebb-493977ebbc52\n\n\n### Logs\n\n```shell-script\n\n```",[3237,3238],{"name":3146,"color":3147},{"name":3218,"color":3195},2686,"Problem with multiple toasts in succession","2025-01-24T14:24:11Z","https://github.com/nuxt/ui/issues/2686",0.7472322,{"description":3245,"labels":3246,"number":3248,"owner":3155,"repository":3155,"state":3179,"title":3249,"updated_at":3250,"url":3251,"score":3252},"As of [this release](https://github.com/nuxt/nuxt.js/releases/tag/v1.0.0-rc5), PostCSS should be \"working everywhere\".\r\nAnd it is. Kind of…\r\n\r\nI'm using postcss-preset-env to use the new cool features of CSS. One of the new cool features is \"custom media queries\".\r\nAnd here's my problem.\r\n\r\nI my \"/assets/base.css\" i have declared variables and custom media queries. And if i use them in my \"base.css\" everything is a-ok!\r\n\r\nBut when i use the exact same custom media query, in my single file component (.vue), the media query is not resolved through postcss-preset-env. Other stuff like, nesting, variables and such is working fine…\r\n\r\n*Base.css*\r\n```css\r\n@custom-media --viewport-ms-max (max-width: 767px);\r\n\r\nbody {\r\n font-size: var(--base-font-size, 16px);\r\n\r\n @media (--viewport-lg-min) {\r\n font-size: 18px;\r\n }\r\n}\r\n```\r\nI've already tried not nesting the media query, in the .vue file, but it doesn't help :(\r\n\r\nUsing only the auto detected postcss.config.js and some plugins (NO nuxt.config.js postCss configuration), here's my postcss.config.js:\r\n\r\n```javascript\r\nmodule.exports = {\r\n plugins: {\r\n stylelint: {},\r\n 'postcss-partial-import': {},\r\n 'postcss-nested': {},\r\n 'postcss-preset-env': {\r\n browsers: [\r\n 'last 2 versions',\r\n 'ie >= 11',\r\n ],\r\n stage: 0,\r\n },\r\n 'postcss-reporter': {\r\n clearReportedMessages: true,\r\n },\r\n },\r\n};\r\n```\r\n\r\nCan anybody help me how to resolve the media queries in my .vue single file components?\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c7517\">#c7517\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3247],{"name":3206,"color":3207},3657,"PostCss: Custom media queries in vue files","2023-01-18T16:26:28Z","https://github.com/nuxt/nuxt/issues/3657",0.74807686,{"description":3254,"labels":3255,"number":3257,"owner":3155,"repository":3155,"state":3179,"title":3258,"updated_at":3259,"url":3260,"score":3261},"Hi, i can't make postcss working with Nuxt 2. I know that is supports postcss OOTB by adding the plugins, but it does do nothig.\r\n\r\nI just added a `postcss.config.js` file (tried also with nuxt.config.js) to the project root:\r\n```js\r\nmodule.exports = {\r\n syntax: require('postcss-syntax'),\r\n plugins: {\r\n stylelint: {\r\n options: {\r\n configFile: './.stylelintrc'\r\n }\r\n },\r\n 'postcss-easy-import': {\r\n extensions: '.pcss'\r\n },\r\n 'postcss-preset-env': {\r\n stage: 0,\r\n autoprefixer: {\r\n grid: true\r\n },\r\n insertBefore: {\r\n 'nesting-rules': require('postcss-mixins')()\r\n }\r\n },\r\n cssnano: { preset: 'advanced' },\r\n 'postcss-reporter': { clearReportedMessages: true }\r\n }\r\n}\r\n```\r\n\r\nThen my `vue` component looks like this:\r\n\r\n```html\r\n\u003Ctemplate>\r\n \u003Cnav role=\"navigation\">\r\n \u003Ca class=\"NagivationItem\" href=\"#\">\r\n LINK\r\n \u003Csup>Soon\u003C/sup>\r\n \u003C/a>\r\n \u003C/nav>\r\n\u003C/template>\r\n\r\n\u003Cstyle scoped lang=\"postcss\">\r\n .NagivationItem {\r\n color: var(--foregroundColor, #000);\r\n text-decoration: none;\r\n\r\n & sup {\r\n margin-left: 90px;\r\n }\r\n }\r\n\u003C/style>\r\n```\r\n\r\n\r\nAnd nothig happens. The css output is:\r\n```css\r\n.NagivationItem {\r\n color: var(--foregroundColor, #000);\r\n text-decoration: none;\r\n\r\n & .c {\r\n margin-left: 90px;\r\n }\r\n}\r\n\r\n/* It should be .NavigationItem .c {} */\r\n```\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c7823\">#c7823\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3256],{"name":3206,"color":3207},3960,"Cant make postcss working","2023-01-18T16:26:49Z","https://github.com/nuxt/nuxt/issues/3960",0.74944496,["Reactive",3263],{},["Set"],["ShallowReactive",3266],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fhTjLjuluuMrQBj_s-4WH8-VRHMcpwYbD_rbUMyhGJxg":-1},"/nuxt/nuxt.com/1540"]