\n```",[2924,2927],{"name":2925,"color":2926},"question","d876e3",{"name":2928,"color":2929},"v3","49DCB8",3517,"How To Style NavigationMenu items","2025-05-10T11:36:22Z","https://github.com/nuxt/ui/issues/3517",0.74628145,{"description":2936,"labels":2937,"number":2940,"owner":2862,"repository":2877,"state":2903,"title":2941,"updated_at":2942,"url":2943,"score":2944},"### 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```",[2938,2939],{"name":2853,"color":2854},{"name":2928,"color":2929},2763,"postcss style not applying","2024-12-05T13:48:59Z","https://github.com/nuxt/ui/issues/2763",0.7465422,{"description":2946,"labels":2947,"number":2950,"owner":2862,"repository":2877,"state":2903,"title":2951,"updated_at":2952,"url":2953,"score":2954},"### 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```",[2948,2949],{"name":2853,"color":2854},{"name":2928,"color":2929},2686,"Problem with multiple toasts in succession","2025-01-24T14:24:11Z","https://github.com/nuxt/ui/issues/2686",0.7472322,{"description":2956,"labels":2957,"number":2959,"owner":2862,"repository":2862,"state":2903,"title":2960,"updated_at":2961,"url":2962,"score":2963},"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>",[2958],{"name":2914,"color":2915},3657,"PostCss: Custom media queries in vue files","2023-01-18T16:26:28Z","https://github.com/nuxt/nuxt/issues/3657",0.74807686,{"description":2965,"labels":2966,"number":2968,"owner":2862,"repository":2862,"state":2903,"title":2969,"updated_at":2970,"url":2971,"score":2972},"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>",[2967],{"name":2914,"color":2915},3960,"Cant make postcss working","2023-01-18T16:26:49Z","https://github.com/nuxt/nuxt/issues/3960",0.74944496,["Reactive",2974],{},["Set"],["ShallowReactive",2977],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fhTjLjuluuMrQBj_s-4WH8-VRHMcpwYbD_rbUMyhGJxg":-1},"/nuxt/nuxt.com/1540"]