\n\n\n## Summary\nI would like to request the addition of a `header` slot to the Accordion component in Nuxt UI. This would provide more flexibility for customizing the accordion header content beyond the current available slots.\n\n## Current Behavior\nThe Accordion component currently supports the following slots:\n- `body`\n- `content` \n- `default`\n- `leading`\n- `trailing`\n\n## Proposed Enhancement\nAdd a new `header` slot that allows developers to completely customize the header content of each accordion item.\n\n## Use Case\nI need to display additional information in the accordion title when it's in a collapsed state. The current slots (`leading`, `trailing`) provide some customization, but a dedicated `header` slot would allow for more complex layouts and better control over the entire header area.\n\nFor example, I want to show:\n- Custom formatted titles\n- Additional metadata or status indicators\n- Complex layouts that go beyond simple leading/trailing elements\n\n## Implementation Suggestion\nMy idea is to position the `header` slot **below the existing header area** as a supplementary display zone. This would:\n- Preserve the current header functionality (title, leading/trailing slots, toggle button)\n- Add an additional customizable area underneath for extra information\n- Maintain visual hierarchy while providing more space for content\n\n## Expected API\n```vue\n\u003CUAccordion :items=\"items\">\n\u003Ctemplate #header=\"{ item, index, open }\">\n \u003Cdiv class=\"supplementary-header-info\">\n \u003Cspan class=\"status-badge\">{{ item.status }}\u003C/span>\n \u003Cp class=\"description\">{{ item.summary }}\u003C/p>\n \u003C/div>\n\u003C/template>\n\u003C/UAccordion>\n```\n\n**Visual Layout:**\n```\n┌─────────────────────────────────────┐\n│ [Leading] Title Text [Trailing] ▼│ ← Existing header\n├─────────────────────────────────────┤\n│ Custom Header Slot Content │ ← New header slot\n└─────────────────────────────────────┘\n```\n\n## Benefits\n1. **Enhanced Flexibility**: Developers can create more sophisticated header layouts\n2. **Better UX**: Ability to show contextual information when accordion items are collapsed\n3. **Consistency**: Aligns with the existing slot-based architecture of other Nuxt UI components\n4. **Backward Compatibility**: Would not break existing implementations\n5. **Non-intrusive**: Positioned below existing header, maintaining current functionality\n\n## Additional Context\nThis feature would be particularly useful for:\n- Dashboard interfaces where accordion headers need to show status information\n- Form sections that display validation states in headers\n- Data tables collapsed into accordion format with summary information\n- Preview content or metadata display without expanding the full accordion\n\nThank you for considering this enhancement!\n\n### Additional context\n\n_No response_",[3151,3154,3157],{"name":3152,"color":3153},"enhancement","a2eeef",{"name":3155,"color":3156},"v3","49DCB8",{"name":3158,"color":3159},"triage","ffffff",4782,"nuxt","ui","open","Feature Request: Add Header Slot to Accordion Component","2025-08-21T18:07:41Z","https://github.com/nuxt/ui/issues/4782",0.7427953,{"description":3169,"labels":3170,"number":3179,"owner":3161,"repository":3161,"state":3163,"title":3180,"updated_at":3181,"url":3182,"score":3183},"### Describe the feature\n\nHello,\r\n\r\nIt could help modules authors to have helps for adding things to the head.\r\n\r\nhttps://nuxt.com/docs/api/nuxt-config#head\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).",[3171,3173,3176],{"name":3152,"color":3172},"8DEF37",{"name":3174,"color":3175},"good first issue","fbca04",{"name":3177,"color":3178},"🍰 p2-nice-to-have","0E8A16",25469,"Add Nuxt Kit helpers for `app.head`","2025-02-03T11:53:20Z","https://github.com/nuxt/nuxt/issues/25469",0.75705504,{"description":3185,"labels":3186,"number":3191,"owner":3161,"repository":3162,"state":3163,"title":3192,"updated_at":3193,"url":3194,"score":3195},"### Description\n\nWhat can we do if we have to use custom content using slot in vertical orientation NavigationMenu?\n\nExample code:\n```\n\u003Ctemplate>\n \u003CUNavigationMenu\n :items=\"items\"\n orientation=\"vertical\"\n class=\"w-full justify-center\"\n >\n \u003Ctemplate #docs-content>\n \u003CDocs />\n \u003C/template>\n \u003Ctemplate #components-content>\n \u003CComponents />\n \u003C/template>\n \u003C/UNavigationMenu>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport type { NavigationMenuItem } from '@nuxt/ui'\n\nimport Docs from '@/components/common/header/Docs.vue'\nimport Components from '@/components/common/header/Components.vue'\n\nconst items = [\n {\n label: 'Docs',\n icon: 'i-lucide-book-open',\n slot: 'docs' as const,\n },\n {\n label: 'Components',\n icon: 'i-lucide-box',\n slot: 'components' as const,\n },\n {\n label: 'GitHub',\n icon: 'i-simple-icons-github'\n }\n] satisfies NavigationMenuItem[]\n\u003C/script>\n```\n",[3187,3190],{"name":3188,"color":3189},"question","d876e3",{"name":3155,"color":3156},4616,"custom content slot in vertical orientation NavigationMenu","2025-07-28T05:42:41Z","https://github.com/nuxt/ui/issues/4616",0.75990736,{"description":3197,"labels":3198,"number":3199,"owner":3161,"repository":3200,"state":3201,"title":3202,"updated_at":3203,"url":3204,"score":3205},"",[],1050,"nuxt.com","closed","[Code] Changelog","2023-10-10T14:45:04Z","https://github.com/nuxt/nuxt.com/issues/1050",0.46405244,{"description":3207,"labels":3208,"number":3212,"owner":3161,"repository":3162,"state":3201,"title":3213,"updated_at":3214,"url":3215,"score":3216},"### Environment\r\n\r\n- Operating System: Darwin\r\n- Node Version: v22.6.0\r\n- Nuxt Version: 3.12.4\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.7\r\n- Package Manager: npm@10.8.2\r\n- Builder: -\r\n- User Config: devtools, modules, compatibilityDate, imports\r\n- Runtime Modules: @nuxt/ui@2.18.4, @vueuse/nuxt@11.0.3\r\n- Build Modules: -\r\n\r\n### Version\r\n\r\nlatest\r\n\r\n### Reproduction\r\n\r\nDoes not occur on Nuxt UI docs, as that component is out of sync with the real one in the examples. However, any project using the copyable component from the DatePicker docs will experience this.\r\n\r\n### Description\r\n\r\nThe source-provided DatePicker component in the docs is broken, and always shows the Range UI. This is because it checks to see if the date is an object (which it is no matter what), rather than checking if it has a start and end attribute like in the component actually used in the example. The two components should be brought in sync (I would do this but I'm unsure how many of the modifications are for displaying in docs.)\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_\r\n",[3209],{"name":3210,"color":3211},"bug","d73a4a",2082,"Date picker broken","2024-11-07T14:11:51Z","https://github.com/nuxt/ui/issues/2082",0.6684989,{"description":3218,"labels":3219,"number":3223,"owner":3161,"repository":3161,"state":3201,"title":3224,"updated_at":3225,"url":3226,"score":3227},"### Describe the feature\n\nTeleports suck cause they're not SSR friendly, but there's no other way to allow a page to fill in multiple separate areas (slots) defined by the layout. A classic example is that the main slot is for the main page content and then a second named slot could be used for the sidebar.\n\n### Additional information\n\n- [x] Would you be willing to help implement this feature?\n- [x] 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).",[3220],{"name":3221,"color":3222},"pending triage","E99695",30563,"Named slots in layouts","2025-01-13T13:54:08Z","https://github.com/nuxt/nuxt/issues/30563",0.73634446,{"labels":3229,"number":3238,"owner":3161,"repository":3161,"state":3201,"title":3239,"updated_at":3240,"url":3241,"score":3242},[3230,3231,3234,3237],{"name":3152,"color":3172},{"name":3232,"color":3233},"discussion","538de2",{"name":3235,"color":3236},"3.x","29bc7f",{"name":3177,"color":3178},14329,"Config alias `theme` to `extends`","2023-01-19T17:33:54Z","https://github.com/nuxt/nuxt/issues/14329",0.7432015,{"description":3244,"labels":3245,"number":3249,"owner":3161,"repository":3161,"state":3201,"title":3250,"updated_at":3251,"url":3252,"score":3253},"### Describe the feature\n\nWhen trying to setup my metadata, I need to inject some JS (GTM stuff), so I did use the \u003CScript> tag, but was surprised to see, that you are required to use the children prob and cant use the textContent/default slot, is there any reason for that?\r\n\r\nI tested locally that adding \r\n```js\r\n setup: setupForUseMeta((props, { slots }) => {\r\n const script = { ...props };\r\n const textContent = (slots.default?.() || []).filter(({ children }) => children).map(({ children }) => children).join(\"\");\r\n if (textContent) {\r\n script.children = textContent;\r\n }\r\n return {\r\n script: [script]\r\n };\r\n })\r\n```\r\ninto the setup function of the script component (https://github.com/nuxt/framework/blob/2e080c259fc5068fcc71e3790b4f5b75cef83eea/packages/nuxt/src/head/runtime/components.ts#L94, similarly to the noscript or style tags below) works just fine, so I would PR that as a solution if this feature request is accepted, but I want to hear your thoughts first before I setup a workspace.\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://v3.nuxtjs.org/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/framework/discussions) and [issues](https://github.com/nuxt/framework/issues).",[3246,3247,3248],{"name":3152,"color":3172},{"name":3235,"color":3236},{"name":3177,"color":3178},15033,"Support using textContent of \u003CScript> head component","2023-01-19T17:44:04Z","https://github.com/nuxt/nuxt/issues/15033",0.7443208,{"description":3255,"labels":3256,"number":3259,"owner":3161,"repository":3162,"state":3201,"title":3260,"updated_at":3261,"url":3262,"score":3263},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v21.5.0\n- Nuxt Version: -\n- CLI Version: 3.16.0\n- Nitro Version: -\n- Package Manager: npm@10.2.4\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0-alpha.10\n\n### Reproduction\n\nNo production link yet\n\n### Description\n\nThe `title` slot should return the item's title instead of active item's title.\n\nUsage:\n```javascript\n\u003CUStepper\n ref=\"stepper\"\n v-model=\"activeStep\"\n :items=\"items\"\n >\n \u003Ctemplate #title=\"{ item }\">\n \u003Ch2>{{ item.title }}\u003C/h2>\n \u003C/template>\n.....\n\u003C/UStepper>\n```\n\n\n\n### Additional context\n\nInstead of `Project` to be returned in every steps, I would like to display each item's title.\n\n\n\n\n### Logs\n\n```shell-script\n\n```",[3257,3258],{"name":3210,"color":3211},{"name":3155,"color":3156},2888,"UStepper - \"title\" slot is returning the active step's title instead of item's title","2024-12-12T23:04:45Z","https://github.com/nuxt/ui/issues/2888",0.7445875,{"description":3265,"labels":3266,"number":3269,"owner":3161,"repository":3161,"state":3201,"title":3270,"updated_at":3271,"url":3272,"score":3273},"### Describe the feature\n\nOnly home is a different layout, all the internals of the site are the same, so I would like to use: \u003CNuxtLayout name=\"home\"> for initial, but in the internals I would like to use the default layout.\r\n\r\nBut it doesn't work:\r\n\r\n```\r\n\u003Ctemplate #preContent>\r\n \u003Cdiv class=\"sum-class\">\r\n SomeContent here\r\n \u003C/div>\r\n \u003C/template>\r\n```\r\n\r\nIf this functionality already exists, I haven't found it in the documentation.\r\n```\r\n\r\n------------------------------\r\n- Operating System: `Linux`\r\n- Node Version: `v18.13.0`\r\n- Nuxt Version: `3.3.1`\r\n- Nitro Version: `2.3.1`\r\n- Package Manager: `yarn@1.22.19`\r\n- Builder: `vite`\r\n- User Config: `directus`, `modules`, `app`, `imports`\r\n- Runtime Modules: `@nuxtjs/tailwindcss@6.6.3`, `nuxt-icon@0.3.3`, `nuxt-directus@5.1.1`, `@pinia/nuxt@0.4.7`\r\n- Build Modules: `-`\r\n------------------------------\r\n\r\n```\r\n\n\n### Additional information\n\n- [ ] 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).",[3267,3268],{"name":3235,"color":3236},{"name":3221,"color":3222},19859,"Use the named slot templates with default layout","2023-03-22T15:39:14Z","https://github.com/nuxt/nuxt/issues/19859",0.7507036,["Reactive",3275],{},["Set"],["ShallowReactive",3278],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fESrUuXS492SzKnArPoaMdF2klDa2BiTJFXWSS2c6zvU":-1},"/nuxt/test-utils/1050"]