\n\nBrowser: `Google Chrome Version 134.0.6998.89 (Official Build) (arm64)`\n\nAlso reproduced on `Safari Version 18.3.1 (20620.2.4.11.6)`\n\n### Description\n\nUser may want to copy the text in the query input of a `select-menu` component by moving cursor around text, now it's unable to do it without a keyboard (`Shift + left/right arrow` or `Cmd/Ctrl + A` to select all).\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[1984,1987],{"name":1985,"color":1986},"bug","d73a4a",{"name":1988,"color":1989},"triage","ffffff",3583,"nuxt","ui","open","Accessibility: unable to select text in the query input of a select-menu","2025-03-17T00:34:07Z","https://github.com/nuxt/ui/issues/3583",0.64890766,{"description":1999,"labels":2000,"number":2010,"owner":1991,"repository":2011,"state":1993,"title":2012,"updated_at":2013,"url":2014,"score":2015},"Hey, firstly thank you for making this plugin, it looks very useful :)\r\n\r\nRunning this module seems to run the whole nuxt environment, including the plugins, and we have a plugin that makes a api call. We normally just mock the module where we import the api function but it doesn't seem to work in this case. For example:\r\n```\r\n// somePlugin.ts\r\nimport { fetchProducts } from \"~/service/products\";\r\n\r\nexport default defineNuxtPlugin(async () => {\r\n const products = fetchProducts();\r\n // do something with the products\r\n});\r\n```\r\n\r\n```\r\n// SomeComponent.nuxt.spec.js\r\nimport { describe, it, expect, vi } from \"vitest\";\r\nimport { shallowMount } from \"@vue/test-utils\";\r\nimport SomeComponent from \"../SomeComponent.vue\";\r\n\r\n// trying to mock the products service so that the real api doesn't get called during the plugins\r\nvi.mock(\"~/service/products\");\r\n\r\ndescribe(\"SomeComponent\", async () => {\r\n it(\"Is a Vue instance\", () => {\r\n const wrapper = shallowMount(SomeComponent);\r\n expect(wrapper.vm).toBeTruthy();\r\n });\r\n});\r\n```\r\n\r\nI assume these mocks only work for the component that we are testing and not for the plugins in the nuxt environment for example. Do you have a suggestion about how to solve this?",[2001,2004,2007],{"name":2002,"color":2003},"documentation","0075ca",{"name":2005,"color":2006},"enhancement","a2eeef",{"name":2008,"color":2009},"vitest-environment","b60205",544,"test-utils","mocking plugins used within nuxt","2024-07-23T12:17:21Z","https://github.com/nuxt/test-utils/issues/544",0.6619541,{"description":2017,"labels":2018,"number":2019,"owner":1991,"repository":2020,"state":1993,"title":2021,"updated_at":2022,"url":2023,"score":2024},"It would be nice if you could alias and entire collection instead of just an icon.\n\nRight now I do it this way.\n```ts\nconst createIconAliases = (newPrefix: string, iconifyJson: IconifyJSON) => {\n const exisitngPrefix = iconifyJson.prefix;\n const icons = Object.keys(iconifyJson.icons);\n\n return icons.reduce(\n (object, value) => {\n object[`${newPrefix}:${value}`] = `${exisitngPrefix}:${value}`;\n return object;\n },\n {} as Record\u003Cstring, string>,\n );\n};\n```",[],362,"icon","[feature request] Allow aliasing entire collection","2025-02-21T20:10:51Z","https://github.com/nuxt/icon/issues/362",0.6684602,{"description":2026,"labels":2027,"number":2030,"owner":1991,"repository":1992,"state":1993,"title":2031,"updated_at":2032,"url":2033,"score":2034},"### Environment\n\n- Operating System: Linux\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: npm@10.9.1\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@2.19.2, @sidebase/nuxt-auth@0.9.4, @nuxt/image@1.8.1\n- Build Modules: -\n\n\n### Version\n\nv2.19.2\n\n### Reproduction\n\nhttps://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io\n\n\n### Description\n\nThis is the code from stackblitz, but it illustrates the problem (preview above). Basically, I am following the instructions for setting certain columns to have a maximum width, but UTable doesn't seem to be following them. If it's an implementation issue on my part, my apologies, but I've stared at this for a couple of days and I can't find any reason why I can't get the cell data to wrap.\n\n\u003Ctemplate>\n \u003CUContainer class=\"min-h-screen flex items-center\">\n \u003CUCard\n class=\"flex-1\"\n :ui=\"{\n background: 'bg-gray-50 dark:bg-gray-800/50',\n ring: 'ring-1 ring-gray-300 dark:ring-gray-700',\n divide: 'divide-y divide-gray-300 dark:divide-gray-700',\n header: { base: 'font-bold' },\n }\"\n >\n \u003Ctemplate #header> Welcome to the playground! \u003C/template>\n\n \u003Cp class=\"text-gray-500 dark:text-gray-400\">Try your components here!\u003C/p>\n \u003C/UCard>\n \u003CUTable :rows=\"data\" :columns=\"columns\">\n \u003C/UTable>\n \u003C/UContainer>\n\u003C/template>\n\n\u003Cscript setup>\nconst columns = [\n {\n key: \"name\",\n label: \"Name\",\n sortable: true,\n },\n {\n key: \"address\",\n label: \"Address\",\n rowClass: \"max-w-[200px] whitespace-normal break-word\",\n width: 200\n },\n {\n key: \"description\",\n label: \"Description\",\n rowClass: \"max-w-[200px] whitespace-normal break-word\",\n width: 200\n },];\n\n const data = [\n {\n name: \"Line 1 Name\",\n address: \"Line 1 - 123 Sesame Street, Anytown USA\",\n description: \"This is a relatively short description, but should probably wrap in any case.\"\n },\n {\n name: \"Line 2 Name\",\n address: \"Line 2 - a really really really really really really really really really really Loong address\",\n description: \"This is a really really really really really really really really really really really really really long description, and needs to be wrapped.\"\n}\n ]\n\u003C/script>\n\n\u003Cstyle>\nbody {\n @apply antialiased font-sans text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-900;\n}\n\u003C/style>\n\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2028,2029],{"name":1985,"color":1986},{"name":1988,"color":1989},2856,"UTable cell content refuses to wrap","2024-12-06T23:25:36Z","https://github.com/nuxt/ui/issues/2856",0.67810196,{"description":2036,"labels":2037,"number":2038,"owner":1991,"repository":2039,"state":1993,"title":2040,"updated_at":2041,"url":2042,"score":2043},"The current example [deployment](https://nuxt.com/deploy/github-pages) script generates warnings due to the actions using deprecated versions.\r\n\r\nI also use `pnpm` locally, so an example of how to get started with `pnpm` as well as `npm` would be nice.\r\n\r\nI'm not sure what the preset does in `npx nuxt build --preset github_pages` and if that's the same as the [Nitro preset](https://nitro.unjs.io/deploy/providers/github-pages)?\r\n\r\nMy own static page could be deployed using `pnpm generate` with this `deploy.yaml` script:\r\n\r\n```yaml\r\n# https://github.com/actions/deploy-pages#usage\r\nname: Deploy to GitHub Pages\r\n\r\non:\r\n push:\r\n branches: [main]\r\n\r\n workflow_dispatch:\r\n\r\n# Grant GITHUB_TOKEN the permissions required to make a Pages deployment\r\npermissions:\r\n contents: read\r\n pages: write # to deploy to Pages\r\n id-token: write # to verify the deployment originates from an appropriate source\r\n\r\njobs:\r\n build:\r\n runs-on: ubuntu-latest\r\n steps:\r\n - name: Checkout\r\n uses: actions/checkout@v4\r\n - name: Setup PNPM\r\n uses: pnpm/action-setup@v3\r\n with:\r\n version: 9.0.x\r\n - name: Setup Node\r\n uses: actions/setup-node@v4\r\n with:\r\n node-version: \"20\"\r\n # Pick your own package manager and build script\r\n - name: Install dependencies\r\n run: pnpm install\r\n - name: Build nuxt\r\n run: pnpm generate\r\n - name: Upload artifact\r\n uses: actions/upload-pages-artifact@v3\r\n with:\r\n path: ./.output/public\r\n\r\n # Deployment job\r\n deploy:\r\n environment:\r\n name: github_pages\r\n url: ${{ steps.deployment.outputs.page_url }}\r\n needs: build\r\n runs-on: ubuntu-latest\r\n steps:\r\n - name: Deploy to GitHub Pages\r\n id: deployment\r\n uses: actions/deploy-pages@v4\r\n```\r\n\r\nI'm hesitant to update the docs with this example myself when I don't fully understand it all yet, but maybe this could be useful as a starter to someone with more knowledge then me (or future me).\r\n\r\nI took some inspiration from the [Vitepress](https://vitepress.dev/guide/deploy#github-pages) example, which is why a couple of things have been moved or reformatted slightly.\r\n\r\n---\r\n\r\nEdit: remove `- run: corepack enable` as I don't think its necessary.",[],1578,"nuxt.com","PNPM Deployment to GitHub Pages","2024-09-26T14:12:35Z","https://github.com/nuxt/nuxt.com/issues/1578",0.6823483,{"description":2045,"labels":2046,"number":2053,"owner":1991,"repository":1992,"state":2054,"title":2055,"updated_at":2056,"url":2057,"score":2058},"### 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```",[2047,2050],{"name":2048,"color":2049},"question","d876e3",{"name":2051,"color":2052},"v3","49DCB8",2772,"closed","@apply Tailwind CSS class in a component's `\u003Cstyle>` tag","2024-12-09T11:14:28Z","https://github.com/nuxt/ui/issues/2772",0.610648,{"description":2060,"labels":2061,"number":2064,"owner":1991,"repository":1992,"state":2054,"title":2065,"updated_at":2066,"url":2067,"score":2068},"### Environment\n\n\n\nI get this error anytime I try and use \u003CUInput /> even without any other code.\n\n### Version\n\nv3.0.0-alpha.5\n\n### Reproduction\n\n`\u003Ctemplate>\n \u003CUContainer>\n \u003CUForm :schema=\"schema\" :state=\"state\" class=\"space-y-4\" @submit=\"onSubmit\">\n \u003CUFormField label=\"Code\" name=\"Code\"\n >\u003CUInput v-model=\"state.code\" />\n \u003C/UFormField>\n \u003C/UForm>\n \u003C/UContainer>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport { z } from 'zod';\nimport type { FormSubmitEvent } from '#ui/types';\n\nconst supabase = useSupabaseClient();\nconst toast = useToast();\n\n//Form\nconst schema = z.object({\n code: z.string().min(3),\n});\n\ntype Schema = z.output\u003Ctypeof schema>;\n\nconst state = reactive\u003CPartial\u003CSchema>>({\n code: undefined,\n});\n\nasync function onSubmit(event: FormSubmitEvent\u003CSchema>) {\n toast.add({\n title: 'Success',\n description: 'The form has been submitted.',\n color: 'success',\n });\n console.log(event.data);\n}\n\u003C/script>\n`\n\n### Description\n\nUInput causes an error\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2062,2063],{"name":1985,"color":1986},{"name":2051,"color":2052},2349,"UInput causes error","2024-10-10T14:15:25Z","https://github.com/nuxt/ui/issues/2349",0.6229022,{"description":2070,"labels":2071,"number":2074,"owner":1991,"repository":1992,"state":2054,"title":2075,"updated_at":2076,"url":2077,"score":2078},"### Environment\n\n-\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.16.0\n\n### Reproduction\n\n- \n\n### Description\n\nUpgraded all deps to the latest and bam Nuxt 3.16.0 is added. We get errors now as Nuxt UI 3 still ships with\n\n`'@unhead/vue': 1.11.20(vue@3.5.13(typescript@5.8.2))\n`\n\nAs of Nuxt 3.16.0 ships with @unhead2:\nhttps://nuxt.com/blog/v3-16#unhead-v2\n\nActual error:\n`[@nuxt/scripts 9:42:20 PM] ERROR Nuxt Scripts requires Unhead >= 2, you are using v1.11.20. Please run nuxi upgrade --clean to upgrade...`\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2072,2073],{"name":1985,"color":1986},{"name":2051,"color":2052},3513,"Nuxt 3.16.0 - ships with @unhead2","2025-03-10T08:49:36Z","https://github.com/nuxt/ui/issues/3513",0.62437373,{"description":2080,"labels":2081,"number":2085,"owner":1991,"repository":1992,"state":2054,"title":2086,"updated_at":2087,"url":2088,"score":2089},"### Description\n\nBreadcrumb uses Link (and LinkBase) to implement the item rendering and navigation. Link (through LinkBase) in itself supports `onClick` event/prop. Now, passing `onClick` to the breadcrumb item does not go all the way through to the LinkBase, and thus prevents the fine-grained control of the Breadcrumb component.\n\nThe usage would look something like this:\n```\n\u003Ctemplate>\n \u003CUBreadcrumb :items=\"items\" />\n\u003C/template>\n\u003Cscript setup>\nconst items = [\n { label: \"click for one\", onClick: () => alert(\"1\"), to: \"/one\" },\n { label: \"click for two\", onClick: () => alert(\"2\"), to: \"/two\" },\n]\n\u003C/script>\n```\n\nMy need is to have some secondary effects happening besides the navigation when the user clicks on a breadcrumb item.\n\n### Additional context\n\n_No response_",[2082,2083,2084],{"name":2005,"color":2006},{"name":2051,"color":2052},{"name":1988,"color":1989},3631,"Support for `onClick` event on Breadcrumb items","2025-03-24T18:08:16Z","https://github.com/nuxt/ui/issues/3631",0.6574262,{"description":2091,"labels":2092,"number":2097,"owner":1991,"repository":2098,"state":2054,"title":2099,"updated_at":2100,"url":2101,"score":2102},"I've explored other font providers, looks like `fontsource` is also quite promising.\r\n\r\nCurrently most of its fonts are from Google Fonts, along with some icons and some other fonts. It's also the service that Cloudflare Fonts is fetching from.\r\n\r\n@danielroe Would you like to include this font provider? If so, I'd like to work on it.\r\n\r\nDocs: https://fontsource.org/docs",[2093,2094],{"name":2005,"color":2006},{"name":2095,"color":2096},"provider","1161A4",65,"fonts","feat: fontsource provider","2024-03-20T13:12:12Z","https://github.com/nuxt/fonts/issues/65",0.6697282,["Reactive",2104],{},["Set"],["ShallowReactive",2107],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"Lfj3QWhQZ4lUOydvn6d0PU-kFNpa4oBHV5cEzks9J6M":-1},"/nuxt/ui/3579"]