\n```",[1984,1987],{"name":1985,"color":1986},"question","d876e3",{"name":1988,"color":1989},"v3","49DCB8",3517,"nuxt","ui","open","How To Style NavigationMenu items","2025-03-14T13:01:49Z","https://github.com/nuxt/ui/issues/3517",0.6925486,{"description":1999,"labels":2000,"number":2003,"owner":1991,"repository":1992,"state":1993,"title":2004,"updated_at":2005,"url":2006,"score":2007},"### Description\n\nHi there,\n\nI'm really curious about how Nuxt UI is handling trailing slashes. In the Nuxt Content repo I can see they are using `ufo` to remove the trailing slashes, but in the Nuxt UI repo I can't find how you get rid of it. Even tho I know you can do these things on Vercel and Netlify, I'm curious how you handle it in Nuxt UI.\n\nIn my case, route.path is returning a path with a trailing slash and breaks my `queryCollection`...\n\n```vue\nconst { data: page } = await useAsyncData(\n `${route.path}/.navigation`,\n async () => {\n return await queryCollection('content').path(route.path).first();\n }\n);\n```",[2001,2002],{"name":1985,"color":1986},{"name":1988,"color":1989},3285,"Trailing slashes","2025-02-10T13:25:12Z","https://github.com/nuxt/ui/issues/3285",0.6948944,{"description":2009,"labels":2010,"number":2013,"owner":1991,"repository":1992,"state":1993,"title":2014,"updated_at":2015,"url":2016,"score":2017},"### Description\n\n\nHow to set v-model type of UCalendar\n`\n \u003CUCalendar\n v-model=\"datePickerValue\"\n range\n size=\"lg\"\n color=\"error\"\n weekday-format=\"short\"\n >\n \u003Ctemplate #heading=\"{ value }\">\n \u003Cdiv class=\"custom-heading\">\n \u003Ch2 class=\"text-sm font-medium text-[#3f3f3f] leading-tight\">\n {{ formatMonthYear(value) }}\n \u003C/h2>\n \u003C/div>\n \u003C/template>\n\n \u003C!-- Day 커스터마이즈 -->\n \u003Ctemplate #day=\"{ day }\">\n \u003Cdiv class=\"custom-day\">\n \u003Cspan\n :class=\"{\n 'text-sm font-semibold': isDaySelected(day),\n 'text-sm font-normal': !isDaySelected(day),\n }\"\n >{{ extractDay(day) }}\u003C/span\n >\n \u003C/div>\n \u003C/template>\n\n \u003Ctemplate #week-day=\"{ day }\">\n \u003Cdiv class=\"custom-week-day bg-white border-none\">\n \u003Cspan class=\"font-medium text-xs text-[#7e7e7e]\">{{ day }}\u003C/span>\n \u003C!-- 예시: 요일을 간단하게 출력 -->\n \u003C/div>\n \u003C/template>\n \u003C/UCalendar>\n`\n\n`const datePickerValue = ref\u003C{ start: DateValue; end: DateValue }>({\n start: new CalendarDate(\n new Date().getFullYear(),\n new Date().getMonth() + 1,\n new Date().getDate()\n ) as DateValue,\n end: new CalendarDate(\n new Date().getFullYear(),\n new Date().getMonth() + 1,\n new Date().getDate()\n ) as DateValue,\n});`\n\nI put the above variable in v-model, but I get the following error. How should I declare the type?\n\n`'{ start: { readonly calendar: { identifier: string; fromJulianDay: (jd: number) => CalendarDate; toJulianDay: (date: AnyCalendarDate) => number; getDaysInMonth: (date: AnyCalendarDate) => number; ... 8 more ...; isInverseEra?: ((date: AnyCalendarDate) => boolean) | undefined; }; ... 11 more ...; compare: (b: AnyCale...' 형식은 'DateRange' 형식에 할당할 수 없습니다.\n 'start' 속성의 형식이 호환되지 않습니다.\n '{ readonly calendar: { identifier: string; fromJulianDay: (jd: number) => CalendarDate; toJulianDay: (date: AnyCalendarDate) => number; getDaysInMonth: (date: AnyCalendarDate) => number; ... 8 more ...; isInverseEra?: ((date: AnyCalendarDate) => boolean) | undefined; }; ... 11 more ...; compare: (b: AnyCalendarDate)...' 형식은 'DateValue | undefined' 형식에 할당할 수 없습니다.\n '{ readonly calendar: { identifier: string; fromJulianDay: (jd: number) => CalendarDate; toJulianDay: (date: AnyCalendarDate) => number; getDaysInMonth: (date: AnyCalendarDate) => number; ... 8 more ...; isInverseEra?: ((date: AnyCalendarDate) => boolean) | undefined; }; ... 11 more ...; compare: (b: AnyCalendarDate)...' 형식은 'DateValue | undefined' 형식에 할당할 수 없습니다.\n '{ readonly calendar: { identifier: string; fromJulianDay: (jd: number) => CalendarDate; toJulianDay: (date: AnyCalendarDate) => number; getDaysInMonth: (date: AnyCalendarDate) => number; ... 8 more ...; isInverseEra?: ((date: AnyCalendarDate) => boolean) | undefined; }; ... 11 more ...; compare: (b: AnyCalendarDate)...' 형식에 'ZonedDateTime' 형식의 #private, hour, minute, second 외 4개 속성이 없습니다.ts-plugin(2322)\nCalendar.vue(99, 3): 필요한 형식은 여기에서 '{ readonly \"onUpdate:modelValue\"?: ((date: DateRange | null) => any) | undefined; readonly \"onUpdate:placeholder\"?: ((...args: unknown[]) => any) | undefined; readonly \"onUpdate:startValue\"?: ((date: DateValue | undefined) => any) | undefined; ... 36 more ...; prevPage?: ((placeholder: DateValue) => DateValue) | und...' 형식에 선언된 'modelValue' 속성에서 가져옵니다.`",[2011,2012],{"name":1985,"color":1986},{"name":1988,"color":1989},3900,"How to set v-model type of UCalendar","2025-04-15T02:00:18Z","https://github.com/nuxt/ui/issues/3900",0.69553995,{"description":2019,"labels":2020,"number":2028,"owner":1991,"repository":1992,"state":1993,"title":2029,"updated_at":2030,"url":2031,"score":2032},"### Description\n\n### Feature Request: Add `variant` and `status-position` props to `UProgress` component\n\n#### Description\nI’m a junior developer, and I’ve been working on enhancing the flexibility of the `Progress` component by adding two new props: `variant` and `status-position`. These props allow for better customization, especially when using the `Progress` component in different design contexts.\n\n- **`variant`**: This prop allows you to choose between two styles for the progress bar: `linear` and `circular`. The `circular` variant provides a circular progress bar instead of the default linear style.\n \n- **`status-position`**: This prop controls the position of the progress status (the percentage or label) relative to the progress bar. The possible values are:\n - `inside`: The status is displayed inside the circle (for the `circular` variant).\n - `outside`: The status is displayed outside the circle.\n\n#### Motivation\nThis update would help in using the `Progress` component more flexibly across different layouts, providing options for both linear and circular progress indicators with customizable label placements.\n\n#### What I've Done\nI’m still a junior developer, so the implementation is not perfect, but a good portion of the work is done. I’ve added the `variant` and `status-position` props to the `Progress` component. I’d love to know if this is something you’d like to integrate into the main repository and whether I can open a pull request for it.\n\n#### Additional Notes\n- The `variant` prop accepts values `linear` or `circular`.\n- The `status-position` prop accepts values `inside` or `outside`.\n \nWould love to hear your thoughts on this approach!\n\n\n### Additional context\n\n[Reka UI : Progress Circular](https://reka-ui.com/examples/progress-circular)",[2021,2024,2025],{"name":2022,"color":2023},"enhancement","a2eeef",{"name":1988,"color":1989},{"name":2026,"color":2027},"triage","ffffff",3728,"[UProgress]: Add `variant` and `status-position` props","2025-03-29T14:31:22Z","https://github.com/nuxt/ui/issues/3728",0.69788677,{"description":2034,"labels":2035,"number":2038,"owner":1991,"repository":1992,"state":1993,"title":2039,"updated_at":2040,"url":2041,"score":2042},"### Description\n\nHi, I'm having a hard time applying transition to dark / light background.\n\nMy `main.css` file is as follows.\n\nChanging the background color from `slate` to `stone`, for example, works fine.\n\nThe problem is just for the light / dark theme transition.\n\n```\n:root {\n --ui-bg: var(--ui-color-neutral-100);\n}\n\n.dark {\n --ui-bg: var(--ui-color-neutral-900);\n}\n\n@layer base {\n body {\n @apply transition-colors duration-1000;\n }\n}\n```\n\nHere is the function that changes the theme:\n\n```\nconst isDark = computed({\n get() {\n return colorMode.value === 'dark';\n },\n set() {\n colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark';\n },\n});\n```\n\nAny help would be appreciated, thanks!\n",[2036,2037],{"name":1985,"color":1986},{"name":1988,"color":1989},3645,"Applying transition-colors to light / dark theme","2025-03-21T16:20:57Z","https://github.com/nuxt/ui/issues/3645",0.6983773,{"description":2044,"labels":2045,"number":2050,"owner":1991,"repository":1992,"state":1993,"title":2051,"updated_at":2052,"url":2053,"score":2054},"### Description\n\nHi there,\r\n\r\nI installed the project from scratch with the below commands:\r\nFor Nuxt:\r\n`bun x nuxi@latest init test`\r\n\r\nFor Nuxt UI:\r\n`npx nuxi@latest module add ui`\r\n\r\nWhen I run the project with `bun run dev`, I got the below warning:\r\n\r\n\r\nMy `package.json` is as follows:\r\n```\r\n\"dependencies\": {\r\n \"@nuxt/eslint\": \"^0.5.7\",\r\n \"@nuxt/ui\": \"^2.18.6\",\r\n \"@nuxtjs/tailwindcss\": \"^6.12.1\",\r\n \"@pinia/nuxt\": \"^0.5.4\",\r\n \"@vueuse/core\": \"^11.1.0\",\r\n \"@vueuse/nuxt\": \"^11.1.0\",\r\n \"nuxt\": \"^3.13.2\",\r\n \"vue\": \"latest\",\r\n \"vue-router\": \"latest\"\r\n },\r\n \"devDependencies\": {\r\n \"@nuxt/devtools\": \"^1.5.1\",\r\n \"ts-node\": \"^10.9.2\",\r\n \"typescript\": \"^5.6.2\",\r\n \"vue-tsc\": \"^2.1.6\"\r\n }\r\n```\r\n \r\n And my config is:\r\n```\r\nmodules: [\r\n '@nuxt/eslint',\r\n '@nuxtjs/tailwindcss',\r\n '@nuxt/ui',\r\n '@pinia/nuxt',\r\n '@vueuse/nuxt'\r\n ],\r\n vite: {\r\n server: {\r\n hmr: {\r\n clientPort: 3000\r\n }\r\n }\r\n },\r\n ui: {\r\n global: true\r\n }\r\n```\r\n\r\nI'm wondering why...\r\n1. I got the Nuxt 3.8.2 warning\r\n2. There's no auto-completion for Nuxt UI component (I installed Vue - Official extension)\r\n3. Using Nuxt UI components gives error\r\n\r\n\r\n\r\n\r\n",[2046,2047],{"name":1985,"color":1986},{"name":2048,"color":2049},"stale","ededed",2249,"Module @nuxt/ui is disabled due to incompatibility issues","2024-11-27T02:06:55Z","https://github.com/nuxt/ui/issues/2249",0.7047602,{"description":2056,"labels":2057,"number":2065,"owner":1991,"repository":1992,"state":2066,"title":2067,"updated_at":2068,"url":2069,"score":2070},"Related to https://github.com/nuxt/ui/pull/2650\n\nMight be fixed when `vaul-vue` will migrate to `reka-ui`.",[2058,2061,2062],{"name":2059,"color":2060},"bug","d73a4a",{"name":1988,"color":1989},{"name":2063,"color":2064},"reka-ui","56d799",2920,"closed","[Drawer] Closing when clicking on a Toast","2025-03-04T12:46:17Z","https://github.com/nuxt/ui/issues/2920",0.67953193,{"description":2072,"labels":2073,"number":2079,"owner":1991,"repository":1992,"state":2066,"title":2080,"updated_at":2081,"url":2082,"score":2083},"### Description\n\nIf you use the Checkbox like Vue states (https://vuejs.org/guide/essentials/forms#checkbox), you can use multiple checkboxes and have multiple values selected.\n\nBut it only toggles them all to true or false...\n\n\u003Cimg width=\"253\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/754fc93a-b16d-475c-8b29-9896a165b5f9\" />\n\n(true here displays the \"array\" value)\n\nReka has array support\n\nhttps://reka-ui.com/docs/components/checkbox#anatomy\n\nBut it seems not implemented, right?",[2074,2077,2078],{"name":2075,"color":2076},"duplicate","cfd3d7",{"name":1985,"color":1986},{"name":1988,"color":1989},3438,"Multiple checkboxes (like Vue form binding states)","2025-03-03T17:02:02Z","https://github.com/nuxt/ui/issues/3438",0.6818814,{"description":2085,"labels":2086,"number":2089,"owner":1991,"repository":1992,"state":2066,"title":2090,"updated_at":2091,"url":2092,"score":2093},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.11.1\n- Nuxt Version: 3.13.2\n- CLI Version: 3.14.0\n- Nitro Version: 2.9.7\n- Package Manager: bun@1.1.33\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Version\n\nv3.0.0-alpha.7\n\n### Reproduction\n\n```ts\nexport default defineAppConfig({\n ui: {\n colors: {\n neutral: \"zinc\",\n primary: \"rose\",\n },\n button: {\n compoundVariants: [\n {\n color: \"neutral\",\n variant: \"outline\",\n class:\n \"ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] hover:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg)] aria-disabled:bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]\",\n },\n ],\n },\n },\n});\n```\n\n```\nType '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]' is not assignable to type 'DeepPartial\u003C({ color: \"primary\"; variant: \"solid\"; class: string; size?: undefined; square?: undefined; loading?: undefined; leading?: undefined; trailing?: undefined; } | { color: \"secondary\"; variant: \"solid\"; ... 5 more ...; trailing?: undefined; } | ... 46 more ... | { ...; })[], string>'.\n Type '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]' is not assignable to type '{ [key: string]: string | TightMap\u003Cstring>; }'.\n Index signature for type 'string' is missing in type '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]'.ts(2322)\n```\n\n### Description\n\nHi :) I am getting type errors when using `compoundVariant`. \n\nFor example, here is my `app.config.ts`:\n\n```ts\nexport default defineAppConfig({\n ui: {\n colors: {\n neutral: \"zinc\",\n primary: \"rose\",\n },\n button: {\n compoundVariants: [\n {\n color: \"neutral\",\n variant: \"outline\",\n class:\n \"ring ring-inset ring-[var(--ui-border-accented)] text-[var(--ui-text)] bg-[var(--ui-bg)] hover:bg-[var(--ui-bg-elevated)] disabled:bg-[var(--ui-bg)] aria-disabled:bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)]\",\n },\n ],\n },\n },\n});\n```\n\nI am getting the following type error for `compoundVariants`:\n```\nType '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]' is not assignable to type 'DeepPartial\u003C({ color: \"primary\"; variant: \"solid\"; class: string; size?: undefined; square?: undefined; loading?: undefined; leading?: undefined; trailing?: undefined; } | { color: \"secondary\"; variant: \"solid\"; ... 5 more ...; trailing?: undefined; } | ... 46 more ... | { ...; })[], string>'.\n Type '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]' is not assignable to type '{ [key: string]: string | TightMap\u003Cstring>; }'.\n Index signature for type 'string' is missing in type '{ color: \"neutral\"; variant: \"outline\"; class: string; }[]'.ts(2322)\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2087,2088],{"name":2059,"color":2060},{"name":1988,"color":1989},2481,"Type error on `compoundVariants`","2024-10-28T21:43:49Z","https://github.com/nuxt/ui/issues/2481",0.6858227,{"description":2095,"labels":2096,"number":2099,"owner":1991,"repository":1992,"state":2066,"title":2100,"updated_at":2101,"url":2102,"score":2103},"### Environment\n\nNuxt 3.15.4\nNuxt UI https://pkg.pr.new/@nuxt/ui@e7e7585\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.15.4\n\n### Reproduction\n\n-\n\n### Description\n\nJust noticed the following components work as expected in a fieldForm\n\n```\n \u003CUFormField\n v-if=\"isVisible\"\n :name=\"fieldName\"\n :label=\"field['#title']\"\n :required=\"!!field['#required']\"\n >\n \u003Ctemplate\n v-if=\"descriptionContent && field['#type'] !== 'checkbox'\"\n #description\n >\n \u003Cspan v-html=\"cleanHTML(descriptionContent)\" />\n \u003C/template>\n\n \u003Ccomponent\n v-if=\"resolvedComponent\"\n :is=\"resolvedComponent\"\n :field=\"field\"\n :fieldName=\"fieldName\"\n :state=\"state\"\n />\n\n \u003Ctemplate v-if=\"helpContent\" #help>\n \u003Cspan v-html=\"cleanHTML(helpContent)\" />\n \u003C/template>\n \u003C/UFormField>\n```\n\n ```\n \u003CURadioGroup\n v-model=\"state[fieldName]\"\n :items=\"transformOptions(field['#options'] || {})\"\n orientation=\"horizontal\"\n class=\"w-full\"\n />\n```\n\n```\n \u003CUSelect\n v-model=\"state[fieldName]\"\n placeholder=\"Select\"\n :items=\"transformOptions(field['#options'] || {})\"\n class=\"w-full\"\n />\n\n```\nHowever when using a UCheckbox label and description have to be set here\n\n```\n \u003CUCheckbox\n v-model=\"checkboxValue\"\n :label=\"field['#title']\"\n :description=\"field['#description']\"\n class=\"w-full\"\n @update:model-value=\"props.state[fieldName] = $event\"\n />\n```\n\nSeems like this is a bug or maybe this is by design?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2097,2098],{"name":1985,"color":1986},{"name":1988,"color":1989},3294,"UCheckbox fieldform support","2025-02-12T19:23:36Z","https://github.com/nuxt/ui/issues/3294",0.68853503,["Reactive",2105],{},["Set"],["ShallowReactive",2108],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"OPIsjaeOazeOe8RhiqbXh71EasleJtXjiWsp8jwRvPY":-1},"/nuxt/ui/2425"]