\n\n// In dev and production when baseURL = '/subfolder/'\n\u003Cimg src=\"/subfolder/images/foo.png />\n```\n\nThe automatic transformation is not applied when using variables in template.\n\n```\nconst imgSrc = '/images/foo.png';\n\n// In SFC Template\n\u003Cimg :src=\"imgSrc\" />\n\n// In dev and production when baseURL = '/subfolder/'\n\u003Cimg src=\"/images/foo.png />\n// No transformation applied!\n``` \n\n### Workaround\n\nOne way to handle it is to manually retrieve `baseURL` from runtime config and add it to url:\n\n```\nconst runtimeConfig = useRuntimeConfig();\nconst imgSrc = runtimeConfig.app.baseURL + 'images/foo.png';\n\n\u003Cimg :src=\"imgSrc\" />\n```\n\n### Solution\n\nTo improve DX I think Nuxt should provide a composable `useMaybeAbsolutePath`, which returns a function that automatically adds `baseURL` to all paths that start with `/` and does not touch any other paths:\n\n```ts\nexport default useMaybeAbsolutePath()\n{\n const runtimeConfig = useRuntimeConfig();\n return (path: string) => {\n if (path.startsWith('/')) return runtimeConfig.app.baseURL + path.substring(1);\n else return path; // Do not edit relative paths and external links\n }\n}\n```\n\nUsage:\n\n```vue\n\u003Cscript lang=\"ts\" setup>\nconst maybeAbsolutePath = useMaybeAbsolutePath();\nconst imgSrc = '/images/foo.png';\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cimg :src=\"maybeAbsolutePath(imgSrc)\" />\n\u003C/template>\n```\n\n### Additional information\n\n- [x] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [x] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [x] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2902,2903],{"name":2868,"color":2869},{"name":2904,"color":2905},"discussion","538de2",30850,"`useMaybeAbsolutePath` for triggering automatic `baseURL` treatment","2025-02-12T10:28:59Z","https://github.com/nuxt/nuxt/issues/30850",0.769251,{"description":2912,"labels":2913,"number":2922,"owner":2877,"repository":2923,"state":2924,"title":2925,"updated_at":2926,"url":2927,"score":2928},"### Environment\n\n------------------------------\n- Operating System: Windows_NT\n- Node Version: v20.10.0\n- Nuxt Version: 3.13.2\n- CLI Version: 3.16.0\n- Nitro Version: 2.9.7\n- Package Manager: yarn@4.5.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/content@2.13.4, @nuxt/ui-pro@3.0.0-alpha.9, @pinia/nuxt@0.5.5, @nuxt/image@1.8.1, @nuxt/test-utils/module@3.14.4, @nuxtjs/i18n@9.1.0, @nuxtjs/seo@2.0.2, @nuxtjs/turnstile@0.9.11, nuxt-security@2.1.4, @nuxt/scripts@0.9.5\n- Build Modules: -\n------------------------------\n\n### Version\n\nv3.x\n\n### Reproduction\n\n```vue\n\u003CUButton v-show=\"true\" />\n```\n\n### Description\n\nAssuming it's because of the primitives, using v-show triggers a warning for every Nuxt UI (and Nuxt UI Pro) component, stating a runtime directive was used on a component with a non-element root node. This makes it impossible to apply conditional display unless using v-if, which doesn't cover the use cases that v-show does.\n\n### Additional context\n\n_No response_\n\n### Logs\n\nExample from my project of a button:\n```shell-script\n[Vue warn]: Runtime directive used on component with non-element root node. The directives will not function as intended. \n at \u003CNuxtLink class=\"inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors gap-1.5 hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-4 text-lg max-w-md w-full mx-auto rounded-lg bg-primary shadow-lg text-black font-semibold justify-center\" raw=true custom=\"\" > \n at \u003CLink type=\"button\" disabled=false class=\"inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors gap-1.5 hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] p-4 text-lg max-w-md w-full mx-auto rounded-lg bg-primary shadow-lg text-black font-semibold justify-center\" ... > \n at \u003CButton type=\"button\" loading=false class=\"p-4 text-lg max-w-md w-full mx-auto rounded-lg bg-primary shadow-lg text-black font-semibold justify-center\" ... > \n at \u003CIndex onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \n at \u003CAnonymous key=\"/\" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/', hash: '', query: {…}, name: 'index', path: '/', …} ... > \n at \u003CRouterView name=undefined route=undefined > \n at \u003CNuxtPage> \n at \u003CDefault ref=Ref\u003C undefined > > \n at \u003CLayoutLoader key=\"default\" layoutProps= {ref: RefImpl} name=\"default\" > \n at \u003CNuxtLayoutProvider layoutProps= {ref: RefImpl} key=\"default\" name=\"default\" ... > \n at \u003CNuxtLayout> \n at \u003CToastProvider swipe-direction=\"right\" duration=5000 > \n at \u003CToaster key=0 > \n at \u003CTooltipProvider> \n at \u003CConfigProvider use-id=fn\u003Cuse-id> dir=\"ltr\" > \n at \u003CApp> \n at \u003CApp key=4 > \n at \u003CNuxtRoot>\n```",[2914,2917,2920],{"name":2915,"color":2916},"bug","d73a4a",{"name":2918,"color":2919},"v3","49DCB8",{"name":2891,"color":2921},"78bddb",2866,"ui","closed","[v3]: v-show causes a runtime warning and breaks","2025-03-24T17:58:14Z","https://github.com/nuxt/ui/issues/2866",0.71130997,{"description":2930,"labels":2931,"number":2938,"owner":2877,"repository":2923,"state":2924,"title":2939,"updated_at":2940,"url":2941,"score":2942},"### Description\n\nI'm basically trying to display the week day full name in the Calendar header slot.\n\nInstead of having `S - M - T - W - T - F -S` as week day headers, I'd like to show `Sunday - Monday - Tuesday - Wednesday - ...`\n\nThe `#week-day` slot only provides the day's letter, so there's no way to reformat it.\n\n```\n\u003Ctemplate #week-day=\"item\">\n {{ item }}\n\u003C/template>\n```\n\nIt simply displays \n```\n{\n \"day\": \"M\"\n}\n```\nWhich is not super helpful\n\nWould it be possible to have, like, the weekday number (0 to 6) ? \n\nSuggestion:\n```\n{\n \"day\": \"M\",\n \"dayNumber\": \"1\",\n}\n```\n\n### Additional context\n\n_No response_",[2932,2934,2935],{"name":2868,"color":2933},"a2eeef",{"name":2918,"color":2919},{"name":2936,"color":2937},"triage","ffffff",3714,"Pass more complete data to Calendar week-day slots","2025-04-01T11:52:50Z","https://github.com/nuxt/ui/issues/3714",0.71317244,{"description":2944,"labels":2945,"number":2950,"owner":2877,"repository":2923,"state":2924,"title":2951,"updated_at":2952,"url":2953,"score":2954},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nI know you guys are working hard on V3, but I really like to see this feature still in V2. We all know that not everybody will move over to V3 right away.\n\nI have to set my `strategy` to `override`, because tailwind-merge doesn't know about my custom tailwind extends. This is quite a pain in the ass, since this is causing other issues as well. Take the [Pro LandingGird](https://ui.nuxt.com/pro/components/landing-grid) as example. Classes are added to the grid items to set the right cols. By doing this with `strategy` set to `override`, all other classes will be overridden.\n\nI saw some sort of solution in [#925 ](https://github.com/nuxt/ui/issues/925#issuecomment-1857910586), but that didn't work. It's also not documented and can't find it in the module either.\n\nI know have to create my own merge config, but that will not work for Nuxt UI.\n\n\n### Additional context\n\nYou may wonder why I need this. Thats because I'm also using Tailwind Fluid, and try to replicate a design library that uses different spacings etc.\n\n",[2946,2949],{"name":2947,"color":2948},"duplicate","cfd3d7",{"name":2868,"color":2933},2893,"Extend tailwind-merge configuration","2024-12-13T15:04:57Z","https://github.com/nuxt/ui/issues/2893",0.7521753,{"description":2956,"labels":2957,"number":2958,"owner":2877,"repository":2959,"state":2924,"title":2960,"updated_at":2961,"url":2962,"score":2963},"On the new blog post [Nuxt 3.15](https://nuxt.com/blog/v3-15), the link to vite 6 changelog is missing ([here](https://nuxt.com/blog/v3-15#%EF%B8%8F-vite-6-included)).\nIf this is missing, I send a PR with this issue fixing that, otherwise you can discard both, hope that helps.",[],1744,"nuxt.com","Missing vite 6 changelog link","2024-12-27T17:05:05Z","https://github.com/nuxt/nuxt.com/issues/1744",0.75302964,{"description":2965,"labels":2966,"number":2970,"owner":2877,"repository":2877,"state":2924,"title":2971,"updated_at":2972,"url":2973,"score":2974},"**🚧 Work in progress 🚧**\r\n\r\n| Name | Description | Nuxt 2 | Nuxt 3 | Migration steps required |\r\n| --------------------- | ------------------ | ------ | ------ | -------------------------------------------------------------------------------------------------------------------- |\r\n| `app.vue` | | ❌ | ✅ | Move `layouts/default.vue` (if present) to `~/app.vue` and rename the `\u003Cnuxt />` component to `\u003Cnuxt-page />` |\r\n| Assets | | ✅ | ✅ | |\r\n| Components | Auto-import | ✅ | ✅ | |\r\n| Layouts | `layout: 'custom'` | ✅ | ✅ | |\r\n| Modules | | ✅ | 🚧 | Module authors should migrate to using [`@nuxt/kit`](/modules/kit). [See below](#modules-compatibility) for details. |\r\n| Pages | | ✅ | ✅ | |\r\n| Pages: dynamic params | | ✅ | ✅ | Rename `_id.vue` style parameters to `[id].vue` style parameters. |\r\n| Pages: _.vue | Catch-all routes | ✅ | ✅ | Rename `_.vue` to `[...params].vue` (or similar) |\r\n| Plugins | | ✅ | ✅ | The `plugins/` directory is now auto-imported so individual plugins can be removed from `nuxt.config`. |\r\n| Static | | ✅ | ✅ | Rename `static/` to `public/` |\r\n| Store | | ✅ | 🚧 | |\r\n\r\n\r\n\r\nhttps://www.notion.so/nuxt/Nuxt-2vs3-930e72eecb4643f6885f97540b9053df",[2967],{"name":2968,"color":2969},"3.x","29bc7f",11061,"Compatibility Progress","2023-01-19T14:46:54Z","https://github.com/nuxt/nuxt/issues/11061",0.75927144,{"labels":2976,"number":2981,"owner":2877,"repository":2877,"state":2924,"title":2982,"updated_at":2983,"url":2984,"score":2985},[2977,2978],{"name":2968,"color":2969},{"name":2979,"color":2980},"refactor","173A12",11799,"refactor `WebpackBundler` and `PostcssConfig`","2023-01-19T15:43:41Z","https://github.com/nuxt/nuxt/issues/11799",0.7599291,{"description":2987,"labels":2988,"number":2992,"owner":2877,"repository":2923,"state":2924,"title":2993,"updated_at":2994,"url":2995,"score":2996},"### Description\n\nI’d like to import Zod schemas for all built-in Nuxt UI components from the `@nuxt/ui` package so that my frontmatter validation in `content.config.ts` is accurate, DRY, and immediately usable.\n\n**Use case**\n\n- **Accurate frontmatter validation** for Nuxt Studio\n Pull in ready-to-use schemas for:\n\n - **Enums** like button `variant` or `color`\n - **Common elements** such as `Image`\n - **Complex components** like `PageSection`\n\n**Alternatives considered**\n\n* Manually recreating every enum, element, and component shape in custom Zod files (error-prone and high maintenance).\n *See a manual example here:*\n [https://github.com/nuxt-ui-pro/saas/blob/main/content.config.ts](https://github.com/nuxt-ui-pro/saas/blob/main/content.config.ts)\n\n**Proposed solution**\n\n- Publish each component’s Zod schema under `@nuxt/ui/schemas/{ComponentName}.ts` (e.g. `@nuxt/ui/schemas/PageSection.ts`)\n- Provide a barrel file for easy imports:\n\n ```ts\n import {\n colorEnum \n createImageSchema,\n createLinkSchema,\n createPageSectionSchema,\n } from '@nuxt/ui'\n ```\n\n### Additional context\n\n_No response_",[2989,2990,2991],{"name":2868,"color":2933},{"name":2918,"color":2919},{"name":2936,"color":2937},4161,"Export Zod schemas for Nuxt UI component props for use in content.config.ts","2025-05-28T13:02:08Z","https://github.com/nuxt/ui/issues/4161",0.7644007,["Reactive",2998],{},["Set"],["ShallowReactive",3001],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fPPn1bKTUASuZWgrwruycW0IsIaxaRq8L-f4g6L5mp8U":-1},"/nuxt/ui/3747"]