[{"data":1,"prerenderedAt":2670},["ShallowReactive",2],{"navigation":3,"-docs-getting-started-ai-mcp":958,"-docs-getting-started-ai-mcp-description":2660},[4],{"title":5,"path":6,"stem":7,"children":8,"page":36},"Docs","\u002Fdocs","docs",[9,163,816,857],{"title":10,"path":11,"stem":12,"children":13,"framework":16,"category":16,"description":16,"icon":30},"Get Started","\u002Fdocs\u002Fgetting-started","docs\u002F1.getting-started\u002F1.index",[14,19,37,47,53,76,141],{"title":15,"path":11,"stem":12,"framework":16,"category":16,"description":17,"icon":18},"Introduction",null,"Nuxt UI is a comprehensive Vue UI component library (Nuxt optional), offering 125+ accessible, Tailwind CSS components for building modern web applications.","i-lucide-house",{"title":20,"framework":16,"category":16,"description":16,"shadow":21,"path":22,"stem":23,"children":24,"page":36},"Installation",true,"\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002F1.getting-started\u002F2.installation",[25,31],{"title":20,"path":26,"stem":27,"framework":28,"category":16,"description":29,"icon":30},"\u002Fdocs\u002Fgetting-started\u002Finstallation\u002Fnuxt","docs\u002F1.getting-started\u002F2.installation\u002F1.nuxt","nuxt","Learn how to install and configure Nuxt UI in your Nuxt application.","i-lucide-square-play",{"title":20,"path":32,"stem":33,"framework":34,"category":16,"description":35,"icon":30},"\u002Fdocs\u002Fgetting-started\u002Finstallation\u002Fvue","docs\u002F1.getting-started\u002F2.installation\u002F2.vue","vue","Learn how to install and configure Nuxt UI in your Vue application, compatible with both plain Vite and Inertia.",false,{"title":38,"framework":16,"category":16,"description":16,"icon":39,"shadow":21,"path":40,"stem":41,"children":42,"page":36},"Migration","i-lucide-arrow-right-left","\u002Fdocs\u002Fgetting-started\u002Fmigration","docs\u002F1.getting-started\u002F3.migration",[43],{"title":38,"path":44,"stem":45,"framework":16,"category":16,"description":46,"icon":39},"\u002Fdocs\u002Fgetting-started\u002Fmigration\u002Fv4","docs\u002F1.getting-started\u002F3.migration\u002F1.v4","A comprehensive guide to migrate your application from Nuxt UI v3 to Nuxt UI v4.",{"title":48,"path":49,"stem":50,"framework":16,"category":16,"description":51,"icon":52},"Contribution","\u002Fdocs\u002Fgetting-started\u002Fcontribution","docs\u002F1.getting-started\u002F4.contribution","A comprehensive guide on contributing to Nuxt UI, including project structure, development workflow, and best practices.","i-lucide-handshake",{"title":54,"path":55,"stem":56,"children":57,"page":36},"Theme","\u002Fdocs\u002Fgetting-started\u002Ftheme","docs\u002F1.getting-started\u002F5.theme",[58,64,70],{"title":59,"path":60,"stem":61,"framework":16,"category":16,"description":62,"icon":63},"Design System","\u002Fdocs\u002Fgetting-started\u002Ftheme\u002Fdesign-system","docs\u002F1.getting-started\u002F5.theme\u002F1.design-system","Nuxt UI's design system uses Tailwind CSS for simple theming and easy customization.","i-lucide-palette",{"title":65,"path":66,"stem":67,"framework":16,"category":16,"description":68,"icon":69},"CSS Variables","\u002Fdocs\u002Fgetting-started\u002Ftheme\u002Fcss-variables","docs\u002F1.getting-started\u002F5.theme\u002F2.css-variables","Nuxt UI uses CSS variables as design tokens for flexible, consistent theming with built-in light and dark mode support.","i-lucide-swatch-book",{"title":71,"path":72,"stem":73,"framework":16,"category":16,"description":74,"icon":75},"Components","\u002Fdocs\u002Fgetting-started\u002Ftheme\u002Fcomponents","docs\u002F1.getting-started\u002F5.theme\u002F3.components","Learn how to customize Nuxt UI components with the Tailwind Variants API for advanced, flexible, and maintainable styling.","i-lucide-layout-grid",{"title":77,"framework":16,"category":16,"description":16,"path":78,"stem":79,"children":80,"page":36},"Integrations","\u002Fdocs\u002Fgetting-started\u002Fintegrations","docs\u002F1.getting-started\u002F6.integrations",[81,95,101,115,129,135],{"title":82,"framework":16,"category":16,"description":16,"shadow":21,"path":83,"stem":84,"children":85,"page":36},"Icons","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ficons","docs\u002F1.getting-started\u002F6.integrations\u002F1.icons",[86,91],{"title":82,"path":87,"stem":88,"framework":28,"category":16,"description":89,"icon":90},"\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ficons\u002Fnuxt","docs\u002F1.getting-started\u002F6.integrations\u002F1.icons\u002F1.nuxt","Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.","i-lucide-smile",{"title":82,"path":92,"stem":93,"framework":34,"category":16,"description":94,"icon":90},"\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ficons\u002Fvue","docs\u002F1.getting-started\u002F6.integrations\u002F1.icons\u002F2.vue","Nuxt UI integrates with Iconify to access over 200,000+ icons.",{"title":96,"path":97,"stem":98,"framework":28,"category":16,"description":99,"icon":100},"Fonts","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ffonts","docs\u002F1.getting-started\u002F6.integrations\u002F2.fonts","Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.","i-lucide-a-large-small",{"title":102,"framework":16,"category":16,"description":16,"shadow":21,"path":103,"stem":104,"children":105,"page":36},"Color Mode","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fcolor-mode","docs\u002F1.getting-started\u002F6.integrations\u002F3.color-mode",[106,111],{"title":102,"path":107,"stem":108,"framework":28,"category":16,"description":109,"icon":110},"\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fcolor-mode\u002Fnuxt","docs\u002F1.getting-started\u002F6.integrations\u002F3.color-mode\u002F1.nuxt","Nuxt UI integrates with Nuxt Color Mode to allow for easy switching between light and dark themes.","i-lucide-sun-moon",{"title":102,"path":112,"stem":113,"framework":34,"category":16,"description":114,"icon":110},"\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fcolor-mode\u002Fvue","docs\u002F1.getting-started\u002F6.integrations\u002F3.color-mode\u002F2.vue","Nuxt UI integrates with VueUse to allow for easy switching between light and dark themes.",{"title":116,"framework":16,"category":16,"description":16,"shadow":21,"path":117,"stem":118,"children":119,"page":36},"I18n","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fi18n","docs\u002F1.getting-started\u002F6.integrations\u002F4.i18n",[120,126],{"title":121,"path":122,"stem":123,"framework":28,"category":16,"description":124,"icon":125},"Internationalization (i18n)","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fi18n\u002Fnuxt","docs\u002F1.getting-started\u002F6.integrations\u002F4.i18n\u002F1.nuxt","Nuxt UI supports 50+ locales and multi-directional (LTR\u002FRTL) internationalization.","i-lucide-languages",{"title":121,"path":127,"stem":128,"framework":34,"category":16,"description":124,"icon":125},"\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fi18n\u002Fvue","docs\u002F1.getting-started\u002F6.integrations\u002F4.i18n\u002F2.vue",{"title":130,"path":131,"stem":132,"framework":28,"category":16,"description":133,"icon":134},"Content","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fcontent","docs\u002F1.getting-started\u002F6.integrations\u002F5.content","Nuxt UI integrates with Nuxt Content to deliver beautiful typography and consistent component styling.","i-simple-icons-markdown",{"title":136,"path":137,"stem":138,"framework":34,"category":16,"description":139,"icon":140},"SSR","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fssr","docs\u002F1.getting-started\u002F6.integrations\u002F6.ssr","Nuxt UI has first-party support for Vue SSR. This guide will help you have it fully enabled.","i-lucide-server",{"title":142,"framework":16,"category":16,"description":16,"path":143,"stem":144,"children":145,"page":36},"Agents","\u002Fdocs\u002Fgetting-started\u002Fai","docs\u002F1.getting-started\u002F7.ai",[146,151,157],{"title":147,"path":148,"stem":149,"framework":16,"category":16,"description":150,"icon":140},"MCP Server","\u002Fdocs\u002Fgetting-started\u002Fai\u002Fmcp","docs\u002F1.getting-started\u002F7.ai\u002F1.mcp","Use Nuxt UI components in your AI assistants with Model Context Protocol support.",{"title":152,"path":153,"stem":154,"framework":16,"category":16,"description":155,"icon":156},"LLMs.txt","\u002Fdocs\u002Fgetting-started\u002Fai\u002Fllms-txt","docs\u002F1.getting-started\u002F7.ai\u002F2.llms-txt","How to get AI tools like Cursor, Windsurf, GitHub Copilot, ChatGPT, and Claude to understand Nuxt UI components, theming, and best practices.","i-lucide-bot",{"title":158,"path":159,"stem":160,"framework":16,"category":16,"description":161,"icon":162},"Skills","\u002Fdocs\u002Fgetting-started\u002Fai\u002Fskills","docs\u002F1.getting-started\u002F7.ai\u002F3.skills","Install Nuxt UI skills to give AI coding agents deep knowledge of components, theming, and best practices.","i-lucide-sparkles",{"title":71,"framework":16,"category":16,"description":16,"icon":164,"path":165,"stem":166,"children":167,"page":36},"i-lucide-square-code","\u002Fdocs\u002Fcomponents","docs\u002F2.components",[168,174,180,186,192,197,202,207,212,217,222,228,233,238,243,248,253,258,264,269,274,279,284,289,295,300,305,311,316,321,326,332,337,342,347,352,357,362,367,373,378,383,388,393,399,405,410,415,420,425,430,435,440,445,450,455,460,466,471,476,481,486,491,496,501,506,511,516,521,526,531,536,541,546,551,556,561,566,571,576,581,587,592,597,602,607,612,617,622,627,632,637,642,647,652,657,662,667,672,677,682,687,692,697,702,707,712,717,722,727,732,737,742,747,752,757,762,767,772,777,782,787,791,796,801,806,811],{"title":169,"path":170,"stem":171,"framework":16,"category":172,"description":173},"Accordion","\u002Fdocs\u002Fcomponents\u002Faccordion","docs\u002F2.components\u002Faccordion","data","A stacked set of collapsible panels.",{"title":175,"path":176,"stem":177,"framework":16,"category":178,"description":179},"Alert","\u002Fdocs\u002Fcomponents\u002Falert","docs\u002F2.components\u002Falert","element","A callout to draw user's attention.",{"title":181,"path":182,"stem":183,"framework":16,"category":184,"description":185},"App","\u002Fdocs\u002Fcomponents\u002Fapp","docs\u002F2.components\u002Fapp","layout","Wraps your app to provide global configurations and more.",{"title":187,"path":188,"stem":189,"framework":16,"category":190,"description":191},"AuthForm","\u002Fdocs\u002Fcomponents\u002Fauth-form","docs\u002F2.components\u002Fauth-form","page","A customizable Form to create login, register or password reset forms.",{"title":193,"path":194,"stem":195,"framework":16,"category":178,"description":196},"Avatar","\u002Fdocs\u002Fcomponents\u002Favatar","docs\u002F2.components\u002Favatar","An img element with fallback and Nuxt Image support.",{"title":198,"path":199,"stem":200,"framework":16,"category":178,"description":201},"AvatarGroup","\u002Fdocs\u002Fcomponents\u002Favatar-group","docs\u002F2.components\u002Favatar-group","Stack multiple avatars in a group.",{"title":203,"path":204,"stem":205,"framework":16,"category":178,"description":206},"Badge","\u002Fdocs\u002Fcomponents\u002Fbadge","docs\u002F2.components\u002Fbadge","A short text to represent a status or a category.",{"title":208,"path":209,"stem":210,"framework":16,"category":178,"description":211},"Banner","\u002Fdocs\u002Fcomponents\u002Fbanner","docs\u002F2.components\u002Fbanner","Display a banner at the top of your website to inform users about important information.",{"title":213,"path":214,"stem":215,"framework":16,"category":190,"description":216},"BlogPost","\u002Fdocs\u002Fcomponents\u002Fblog-post","docs\u002F2.components\u002Fblog-post","A customizable article to display in a blog page.",{"title":218,"path":219,"stem":220,"framework":16,"category":190,"description":221},"BlogPosts","\u002Fdocs\u002Fcomponents\u002Fblog-posts","docs\u002F2.components\u002Fblog-posts","Display a list of blog posts in a responsive grid layout.",{"title":223,"path":224,"stem":225,"framework":16,"category":226,"description":227},"Breadcrumb","\u002Fdocs\u002Fcomponents\u002Fbreadcrumb","docs\u002F2.components\u002Fbreadcrumb","navigation","A hierarchy of links to navigate through a website.",{"title":229,"path":230,"stem":231,"framework":16,"category":178,"description":232},"Button","\u002Fdocs\u002Fcomponents\u002Fbutton","docs\u002F2.components\u002Fbutton","A button element that can act as a link or trigger an action.",{"title":234,"path":235,"stem":236,"framework":16,"category":178,"description":237},"Calendar","\u002Fdocs\u002Fcomponents\u002Fcalendar","docs\u002F2.components\u002Fcalendar","A calendar component for selecting single dates, multiple dates or date ranges.",{"title":239,"path":240,"stem":241,"framework":16,"category":178,"description":242},"Card","\u002Fdocs\u002Fcomponents\u002Fcard","docs\u002F2.components\u002Fcard","Display content in a card with a header, body and footer.",{"title":244,"path":245,"stem":246,"framework":16,"category":172,"description":247},"Carousel","\u002Fdocs\u002Fcomponents\u002Fcarousel","docs\u002F2.components\u002Fcarousel","A carousel with motion and swipe built using Embla.",{"title":249,"path":250,"stem":251,"framework":16,"category":190,"description":252},"ChangelogVersion","\u002Fdocs\u002Fcomponents\u002Fchangelog-version","docs\u002F2.components\u002Fchangelog-version","A customizable article to display in a changelog.",{"title":254,"path":255,"stem":256,"framework":16,"category":190,"description":257},"ChangelogVersions","\u002Fdocs\u002Fcomponents\u002Fchangelog-versions","docs\u002F2.components\u002Fchangelog-versions","Display a list of changelog versions in a timeline.",{"title":259,"path":260,"stem":261,"framework":16,"category":262,"description":263},"Chat","\u002Fdocs\u002Fcomponents\u002Fchat","docs\u002F2.components\u002Fchat","chat","Build AI chat interfaces with streaming, reasoning, and tool calling.",{"title":265,"path":266,"stem":267,"framework":16,"category":262,"description":268},"ChatMessage","\u002Fdocs\u002Fcomponents\u002Fchat-message","docs\u002F2.components\u002Fchat-message","Display a chat message with icon, avatar, and actions.",{"title":270,"path":271,"stem":272,"framework":16,"category":262,"description":273},"ChatMessages","\u002Fdocs\u002Fcomponents\u002Fchat-messages","docs\u002F2.components\u002Fchat-messages","Display a list of chat messages, designed to work seamlessly with Vercel AI SDK.",{"title":275,"path":276,"stem":277,"framework":16,"category":262,"description":278},"ChatPalette","\u002Fdocs\u002Fcomponents\u002Fchat-palette","docs\u002F2.components\u002Fchat-palette","A chat palette to create a chatbot interface inside an overlay.",{"title":280,"path":281,"stem":282,"framework":16,"category":262,"description":283},"ChatPrompt","\u002Fdocs\u002Fcomponents\u002Fchat-prompt","docs\u002F2.components\u002Fchat-prompt","An enhanced Textarea for submitting prompts in AI chat interfaces.",{"title":285,"path":286,"stem":287,"framework":16,"category":262,"description":288},"ChatPromptSubmit","\u002Fdocs\u002Fcomponents\u002Fchat-prompt-submit","docs\u002F2.components\u002Fchat-prompt-submit","A Button for submitting chat prompts with automatic status handling.",{"title":290,"path":291,"stem":292,"framework":16,"category":262,"description":293,"badge":294},"ChatReasoning","\u002Fdocs\u002Fcomponents\u002Fchat-reasoning","docs\u002F2.components\u002Fchat-reasoning","Display a collapsible AI reasoning or thinking process.","New",{"title":296,"path":297,"stem":298,"framework":16,"category":262,"description":299,"badge":294},"ChatShimmer","\u002Fdocs\u002Fcomponents\u002Fchat-shimmer","docs\u002F2.components\u002Fchat-shimmer","Display a text shimmer animation effect.",{"title":301,"path":302,"stem":303,"framework":16,"category":262,"description":304,"badge":294},"ChatTool","\u002Fdocs\u002Fcomponents\u002Fchat-tool","docs\u002F2.components\u002Fchat-tool","Display a collapsible AI tool invocation status.",{"title":306,"path":307,"stem":308,"framework":16,"category":309,"description":310},"Checkbox","\u002Fdocs\u002Fcomponents\u002Fcheckbox","docs\u002F2.components\u002Fcheckbox","form","An input element to toggle between checked and unchecked states.",{"title":312,"path":313,"stem":314,"framework":16,"category":309,"description":315},"CheckboxGroup","\u002Fdocs\u002Fcomponents\u002Fcheckbox-group","docs\u002F2.components\u002Fcheckbox-group","A set of checklist buttons to select multiple option from a list.",{"title":317,"path":318,"stem":319,"framework":16,"category":178,"description":320},"Chip","\u002Fdocs\u002Fcomponents\u002Fchip","docs\u002F2.components\u002Fchip","An indicator of a numeric value or a state.",{"title":322,"path":323,"stem":324,"framework":16,"category":178,"description":325},"Collapsible","\u002Fdocs\u002Fcomponents\u002Fcollapsible","docs\u002F2.components\u002Fcollapsible","A collapsible element to toggle visibility of its content.",{"title":327,"path":328,"stem":329,"framework":16,"category":330,"description":331},"ColorModeAvatar","\u002Fdocs\u002Fcomponents\u002Fcolor-mode-avatar","docs\u002F2.components\u002Fcolor-mode-avatar","color-mode","An Avatar with a different source for light and dark mode.",{"title":333,"path":334,"stem":335,"framework":16,"category":330,"description":336},"ColorModeButton","\u002Fdocs\u002Fcomponents\u002Fcolor-mode-button","docs\u002F2.components\u002Fcolor-mode-button","A Button to switch between light and dark mode.",{"title":338,"path":339,"stem":340,"framework":16,"category":330,"description":341},"ColorModeImage","\u002Fdocs\u002Fcomponents\u002Fcolor-mode-image","docs\u002F2.components\u002Fcolor-mode-image","An image element with a different source for light and dark mode.",{"title":343,"path":344,"stem":345,"framework":16,"category":330,"description":346},"ColorModeSelect","\u002Fdocs\u002Fcomponents\u002Fcolor-mode-select","docs\u002F2.components\u002Fcolor-mode-select","A Select to switch between system, dark & light mode.",{"title":348,"path":349,"stem":350,"framework":16,"category":330,"description":351},"ColorModeSwitch","\u002Fdocs\u002Fcomponents\u002Fcolor-mode-switch","docs\u002F2.components\u002Fcolor-mode-switch","A switch to toggle between light and dark mode.",{"title":353,"path":354,"stem":355,"framework":16,"category":309,"description":356},"ColorPicker","\u002Fdocs\u002Fcomponents\u002Fcolor-picker","docs\u002F2.components\u002Fcolor-picker","A component to select a color.",{"title":358,"path":359,"stem":360,"framework":16,"category":226,"description":361},"CommandPalette","\u002Fdocs\u002Fcomponents\u002Fcommand-palette","docs\u002F2.components\u002Fcommand-palette","A command palette with full-text search powered by Fuse.js for efficient fuzzy matching.",{"title":363,"path":364,"stem":365,"framework":16,"category":184,"description":366},"Container","\u002Fdocs\u002Fcomponents\u002Fcontainer","docs\u002F2.components\u002Fcontainer","A container lets you center and constrain the width of your content.",{"title":368,"path":369,"stem":370,"framework":28,"category":371,"description":372},"ContentNavigation","\u002Fdocs\u002Fcomponents\u002Fcontent-navigation","docs\u002F2.components\u002Fcontent-navigation","content","An accordion-style navigation component for organizing page links.",{"title":374,"path":375,"stem":376,"framework":28,"category":371,"description":377},"ContentSearch","\u002Fdocs\u002Fcomponents\u002Fcontent-search","docs\u002F2.components\u002Fcontent-search","A ready to use CommandPalette to add to your documentation.",{"title":379,"path":380,"stem":381,"framework":28,"category":371,"description":382},"ContentSearchButton","\u002Fdocs\u002Fcomponents\u002Fcontent-search-button","docs\u002F2.components\u002Fcontent-search-button","A pre-styled Button to open the ContentSearch modal.",{"title":384,"path":385,"stem":386,"framework":28,"category":371,"description":387},"ContentSurround","\u002Fdocs\u002Fcomponents\u002Fcontent-surround","docs\u002F2.components\u002Fcontent-surround","A pair of prev and next links to navigate between pages.",{"title":389,"path":390,"stem":391,"framework":28,"category":371,"description":392},"ContentToc","\u002Fdocs\u002Fcomponents\u002Fcontent-toc","docs\u002F2.components\u002Fcontent-toc","A sticky Table of Contents with automatic active anchor link highlighting.",{"title":394,"path":395,"stem":396,"framework":16,"category":397,"description":398},"ContextMenu","\u002Fdocs\u002Fcomponents\u002Fcontext-menu","docs\u002F2.components\u002Fcontext-menu","overlay","A menu to display actions when right-clicking on an element.",{"title":400,"path":401,"stem":402,"framework":16,"category":403,"description":404},"DashboardGroup","\u002Fdocs\u002Fcomponents\u002Fdashboard-group","docs\u002F2.components\u002Fdashboard-group","dashboard","A fixed layout component that provides context for dashboard components with sidebar state management and persistence.",{"title":406,"path":407,"stem":408,"framework":16,"category":403,"description":409},"DashboardNavbar","\u002Fdocs\u002Fcomponents\u002Fdashboard-navbar","docs\u002F2.components\u002Fdashboard-navbar","A responsive navbar to display in a dashboard.",{"title":411,"path":412,"stem":413,"framework":16,"category":403,"description":414},"DashboardPanel","\u002Fdocs\u002Fcomponents\u002Fdashboard-panel","docs\u002F2.components\u002Fdashboard-panel","A resizable panel to display in a dashboard.",{"title":416,"path":417,"stem":418,"framework":16,"category":403,"description":419},"DashboardResizeHandle","\u002Fdocs\u002Fcomponents\u002Fdashboard-resize-handle","docs\u002F2.components\u002Fdashboard-resize-handle","A handle to resize a sidebar or panel.",{"title":421,"path":422,"stem":423,"framework":16,"category":403,"description":424},"DashboardSearch","\u002Fdocs\u002Fcomponents\u002Fdashboard-search","docs\u002F2.components\u002Fdashboard-search","A ready to use CommandPalette to add to your dashboard.",{"title":426,"path":427,"stem":428,"framework":16,"category":403,"description":429},"DashboardSearchButton","\u002Fdocs\u002Fcomponents\u002Fdashboard-search-button","docs\u002F2.components\u002Fdashboard-search-button","A pre-styled Button to open the DashboardSearch modal.",{"title":431,"path":432,"stem":433,"framework":16,"category":403,"description":434},"DashboardSidebar","\u002Fdocs\u002Fcomponents\u002Fdashboard-sidebar","docs\u002F2.components\u002Fdashboard-sidebar","A resizable and collapsible sidebar to display in a dashboard.",{"title":436,"path":437,"stem":438,"framework":16,"category":403,"description":439},"DashboardSidebarCollapse","\u002Fdocs\u002Fcomponents\u002Fdashboard-sidebar-collapse","docs\u002F2.components\u002Fdashboard-sidebar-collapse","A Button to collapse the sidebar on desktop.",{"title":441,"path":442,"stem":443,"framework":16,"category":403,"description":444},"DashboardSidebarToggle","\u002Fdocs\u002Fcomponents\u002Fdashboard-sidebar-toggle","docs\u002F2.components\u002Fdashboard-sidebar-toggle","A Button to toggle the sidebar on mobile.",{"title":446,"path":447,"stem":448,"framework":16,"category":403,"description":449},"DashboardToolbar","\u002Fdocs\u002Fcomponents\u002Fdashboard-toolbar","docs\u002F2.components\u002Fdashboard-toolbar","A toolbar to display under the navbar in a dashboard.",{"title":451,"path":452,"stem":453,"framework":16,"category":397,"description":454},"Drawer","\u002Fdocs\u002Fcomponents\u002Fdrawer","docs\u002F2.components\u002Fdrawer","A drawer that smoothly slides in & out of the screen.",{"title":456,"path":457,"stem":458,"framework":16,"category":397,"description":459},"DropdownMenu","\u002Fdocs\u002Fcomponents\u002Fdropdown-menu","docs\u002F2.components\u002Fdropdown-menu","A menu to display actions when clicking on an element.",{"title":461,"path":462,"stem":463,"framework":16,"category":464,"description":465},"Editor","\u002Fdocs\u002Fcomponents\u002Feditor","docs\u002F2.components\u002Feditor","editor","A rich text editor component based on TipTap with support for markdown, HTML, and JSON content types.",{"title":467,"path":468,"stem":469,"framework":16,"category":464,"description":470},"EditorDragHandle","\u002Fdocs\u002Fcomponents\u002Feditor-drag-handle","docs\u002F2.components\u002Feditor-drag-handle","A draggable handle for reordering and selecting blocks in the editor.",{"title":472,"path":473,"stem":474,"framework":16,"category":464,"description":475},"EditorEmojiMenu","\u002Fdocs\u002Fcomponents\u002Feditor-emoji-menu","docs\u002F2.components\u002Feditor-emoji-menu","An emoji picker menu that displays emoji suggestions when typing the : character in the editor.",{"title":477,"path":478,"stem":479,"framework":16,"category":464,"description":480},"EditorMentionMenu","\u002Fdocs\u002Fcomponents\u002Feditor-mention-menu","docs\u002F2.components\u002Feditor-mention-menu","A mention menu that displays user suggestions when typing a trigger character in the editor.",{"title":482,"path":483,"stem":484,"framework":16,"category":464,"description":485},"EditorSuggestionMenu","\u002Fdocs\u002Fcomponents\u002Feditor-suggestion-menu","docs\u002F2.components\u002Feditor-suggestion-menu","A command menu that displays formatting and action suggestions when typing the \u002F character in the editor.",{"title":487,"path":488,"stem":489,"framework":16,"category":464,"description":490},"EditorToolbar","\u002Fdocs\u002Fcomponents\u002Feditor-toolbar","docs\u002F2.components\u002Feditor-toolbar","A customizable toolbar for editor actions that can be displayed as fixed, bubble, or floating menu.",{"title":492,"path":493,"stem":494,"framework":16,"category":172,"description":495},"Empty","\u002Fdocs\u002Fcomponents\u002Fempty","docs\u002F2.components\u002Fempty","A component to display an empty state.",{"title":497,"path":498,"stem":499,"framework":16,"category":184,"description":500},"Error","\u002Fdocs\u002Fcomponents\u002Ferror","docs\u002F2.components\u002Ferror","A pre-built error component with NuxtError support.",{"title":502,"path":503,"stem":504,"framework":16,"category":178,"description":505},"FieldGroup","\u002Fdocs\u002Fcomponents\u002Ffield-group","docs\u002F2.components\u002Ffield-group","Group multiple button-like elements together.",{"title":507,"path":508,"stem":509,"framework":16,"category":309,"description":510},"FileUpload","\u002Fdocs\u002Fcomponents\u002Ffile-upload","docs\u002F2.components\u002Ffile-upload","An input element to upload files.",{"title":512,"path":513,"stem":514,"framework":16,"category":184,"description":515},"Footer","\u002Fdocs\u002Fcomponents\u002Ffooter","docs\u002F2.components\u002Ffooter","A responsive footer component.",{"title":517,"path":518,"stem":519,"framework":16,"category":226,"description":520},"FooterColumns","\u002Fdocs\u002Fcomponents\u002Ffooter-columns","docs\u002F2.components\u002Ffooter-columns","A list of links as columns to display in your Footer.",{"title":522,"path":523,"stem":524,"framework":16,"category":309,"description":525},"Form","\u002Fdocs\u002Fcomponents\u002Fform","docs\u002F2.components\u002Fform","A form component with built-in validation and submission handling.",{"title":527,"path":528,"stem":529,"framework":16,"category":309,"description":530},"FormField","\u002Fdocs\u002Fcomponents\u002Fform-field","docs\u002F2.components\u002Fform-field","A wrapper for form elements that provides validation and error handling.",{"title":532,"path":533,"stem":534,"framework":16,"category":184,"description":535},"Header","\u002Fdocs\u002Fcomponents\u002Fheader","docs\u002F2.components\u002Fheader","A responsive header component.",{"title":537,"path":538,"stem":539,"framework":16,"category":178,"description":540},"Icon","\u002Fdocs\u002Fcomponents\u002Ficon","docs\u002F2.components\u002Ficon","A component to display any icon from Iconify or another component.",{"title":542,"path":543,"stem":544,"framework":16,"category":309,"description":545},"Input","\u002Fdocs\u002Fcomponents\u002Finput","docs\u002F2.components\u002Finput","An input element to enter text.",{"title":547,"path":548,"stem":549,"framework":16,"category":309,"description":550},"InputDate","\u002Fdocs\u002Fcomponents\u002Finput-date","docs\u002F2.components\u002Finput-date","An input component for date selection.",{"title":552,"path":553,"stem":554,"framework":16,"category":309,"description":555},"InputMenu","\u002Fdocs\u002Fcomponents\u002Finput-menu","docs\u002F2.components\u002Finput-menu","An autocomplete input with real-time suggestions.",{"title":557,"path":558,"stem":559,"framework":16,"category":309,"description":560},"InputNumber","\u002Fdocs\u002Fcomponents\u002Finput-number","docs\u002F2.components\u002Finput-number","An input for numerical values with a customizable range.",{"title":562,"path":563,"stem":564,"framework":16,"category":309,"description":565},"InputTags","\u002Fdocs\u002Fcomponents\u002Finput-tags","docs\u002F2.components\u002Finput-tags","An input element that displays interactive tags.",{"title":567,"path":568,"stem":569,"framework":16,"category":309,"description":570},"InputTime","\u002Fdocs\u002Fcomponents\u002Finput-time","docs\u002F2.components\u002Finput-time","An input for selecting a time.",{"title":572,"path":573,"stem":574,"framework":16,"category":178,"description":575},"Kbd","\u002Fdocs\u002Fcomponents\u002Fkbd","docs\u002F2.components\u002Fkbd","A kbd element to display a keyboard key.",{"title":577,"path":578,"stem":579,"framework":16,"category":226,"description":580},"Link","\u002Fdocs\u002Fcomponents\u002Flink","docs\u002F2.components\u002Flink","A wrapper around \u003CNuxtLink> with extra props.",{"title":582,"path":583,"stem":584,"framework":16,"category":585,"description":586},"LocaleSelect","\u002Fdocs\u002Fcomponents\u002Flocale-select","docs\u002F2.components\u002Flocale-select","i18n","A Select to switch between locales.",{"title":588,"path":589,"stem":590,"framework":16,"category":184,"description":591},"Main","\u002Fdocs\u002Fcomponents\u002Fmain","docs\u002F2.components\u002Fmain","A main element that fills the available viewport height.",{"title":593,"path":594,"stem":595,"framework":16,"category":172,"description":596},"Marquee","\u002Fdocs\u002Fcomponents\u002Fmarquee","docs\u002F2.components\u002Fmarquee","A component to create infinite scrolling content.",{"title":598,"path":599,"stem":600,"framework":16,"category":397,"description":601},"Modal","\u002Fdocs\u002Fcomponents\u002Fmodal","docs\u002F2.components\u002Fmodal","A dialog window that can be used to display a message or request user input.",{"title":603,"path":604,"stem":605,"framework":16,"category":226,"description":606},"NavigationMenu","\u002Fdocs\u002Fcomponents\u002Fnavigation-menu","docs\u002F2.components\u002Fnavigation-menu","A list of links that can be displayed horizontally or vertically.",{"title":608,"path":609,"stem":610,"framework":16,"category":190,"description":611},"Page","\u002Fdocs\u002Fcomponents\u002Fpage","docs\u002F2.components\u002Fpage","A grid layout for your pages with left and right columns.",{"title":613,"path":614,"stem":615,"framework":16,"category":190,"description":616},"PageAnchors","\u002Fdocs\u002Fcomponents\u002Fpage-anchors","docs\u002F2.components\u002Fpage-anchors","A list of anchors to be displayed in the page.",{"title":618,"path":619,"stem":620,"framework":16,"category":190,"description":621},"PageAside","\u002Fdocs\u002Fcomponents\u002Fpage-aside","docs\u002F2.components\u002Fpage-aside","A sticky aside to display your page navigation.",{"title":623,"path":624,"stem":625,"framework":16,"category":190,"description":626},"PageBody","\u002Fdocs\u002Fcomponents\u002Fpage-body","docs\u002F2.components\u002Fpage-body","The main content of your page.",{"title":628,"path":629,"stem":630,"framework":16,"category":190,"description":631},"PageCard","\u002Fdocs\u002Fcomponents\u002Fpage-card","docs\u002F2.components\u002Fpage-card","A pre-styled card component that displays a title, description and optional link.",{"title":633,"path":634,"stem":635,"framework":16,"category":190,"description":636},"PageColumns","\u002Fdocs\u002Fcomponents\u002Fpage-columns","docs\u002F2.components\u002Fpage-columns","A responsive multi-column layout system for organizing content side-by-side.",{"title":638,"path":639,"stem":640,"framework":16,"category":190,"description":641},"PageCTA","\u002Fdocs\u002Fcomponents\u002Fpage-cta","docs\u002F2.components\u002Fpage-cta","A call to action section to display in your pages.",{"title":643,"path":644,"stem":645,"framework":16,"category":190,"description":646},"PageFeature","\u002Fdocs\u002Fcomponents\u002Fpage-feature","docs\u002F2.components\u002Fpage-feature","A component to showcase key features of your application.",{"title":648,"path":649,"stem":650,"framework":16,"category":190,"description":651},"PageGrid","\u002Fdocs\u002Fcomponents\u002Fpage-grid","docs\u002F2.components\u002Fpage-grid","A responsive grid system for displaying content in a flexible layout.",{"title":653,"path":654,"stem":655,"framework":16,"category":190,"description":656},"PageHeader","\u002Fdocs\u002Fcomponents\u002Fpage-header","docs\u002F2.components\u002Fpage-header","A responsive header for your pages.",{"title":658,"path":659,"stem":660,"framework":16,"category":190,"description":661},"PageHero","\u002Fdocs\u002Fcomponents\u002Fpage-hero","docs\u002F2.components\u002Fpage-hero","A responsive hero for your pages.",{"title":663,"path":664,"stem":665,"framework":16,"category":190,"description":666},"PageLinks","\u002Fdocs\u002Fcomponents\u002Fpage-links","docs\u002F2.components\u002Fpage-links","A list of links to be displayed in the page.",{"title":668,"path":669,"stem":670,"framework":16,"category":190,"description":671},"PageList","\u002Fdocs\u002Fcomponents\u002Fpage-list","docs\u002F2.components\u002Fpage-list","A vertical list layout for displaying content in a stacked format.",{"title":673,"path":674,"stem":675,"framework":16,"category":190,"description":676},"PageLogos","\u002Fdocs\u002Fcomponents\u002Fpage-logos","docs\u002F2.components\u002Fpage-logos","A list of logos or images to display on your pages.",{"title":678,"path":679,"stem":680,"framework":16,"category":190,"description":681},"PageSection","\u002Fdocs\u002Fcomponents\u002Fpage-section","docs\u002F2.components\u002Fpage-section","A responsive section for your pages.",{"title":683,"path":684,"stem":685,"framework":16,"category":226,"description":686},"Pagination","\u002Fdocs\u002Fcomponents\u002Fpagination","docs\u002F2.components\u002Fpagination","A list of buttons or links to navigate through pages.",{"title":688,"path":689,"stem":690,"framework":16,"category":309,"description":691},"PinInput","\u002Fdocs\u002Fcomponents\u002Fpin-input","docs\u002F2.components\u002Fpin-input","An input element to enter a pin.",{"title":693,"path":694,"stem":695,"framework":16,"category":397,"description":696},"Popover","\u002Fdocs\u002Fcomponents\u002Fpopover","docs\u002F2.components\u002Fpopover","A non-modal dialog that floats around a trigger element.",{"title":698,"path":699,"stem":700,"framework":16,"category":190,"description":701},"PricingPlan","\u002Fdocs\u002Fcomponents\u002Fpricing-plan","docs\u002F2.components\u002Fpricing-plan","A customizable pricing plan to display in a pricing page.",{"title":703,"path":704,"stem":705,"framework":16,"category":190,"description":706},"PricingPlans","\u002Fdocs\u002Fcomponents\u002Fpricing-plans","docs\u002F2.components\u002Fpricing-plans","Display a list of pricing plans in a responsive grid layout.",{"title":708,"path":709,"stem":710,"framework":16,"category":190,"description":711},"PricingTable","\u002Fdocs\u002Fcomponents\u002Fpricing-table","docs\u002F2.components\u002Fpricing-table","A responsive pricing table component that displays tiered pricing plans with feature comparisons.",{"title":713,"path":714,"stem":715,"framework":16,"category":178,"description":716},"Progress","\u002Fdocs\u002Fcomponents\u002Fprogress","docs\u002F2.components\u002Fprogress","An indicator showing the progress of a task.",{"title":718,"path":719,"stem":720,"framework":16,"category":309,"description":721},"RadioGroup","\u002Fdocs\u002Fcomponents\u002Fradio-group","docs\u002F2.components\u002Fradio-group","A set of radio buttons to select a single option from a list.",{"title":723,"path":724,"stem":725,"framework":16,"category":172,"description":726},"ScrollArea","\u002Fdocs\u002Fcomponents\u002Fscroll-area","docs\u002F2.components\u002Fscroll-area","A flexible scroll container with virtualization support.",{"title":728,"path":729,"stem":730,"framework":16,"category":309,"description":731},"Select","\u002Fdocs\u002Fcomponents\u002Fselect","docs\u002F2.components\u002Fselect","A select element to choose from a list of options.",{"title":733,"path":734,"stem":735,"framework":16,"category":309,"description":736},"SelectMenu","\u002Fdocs\u002Fcomponents\u002Fselect-menu","docs\u002F2.components\u002Fselect-menu","An advanced searchable select element.",{"title":738,"path":739,"stem":740,"framework":16,"category":178,"description":741},"Separator","\u002Fdocs\u002Fcomponents\u002Fseparator","docs\u002F2.components\u002Fseparator","Separates content horizontally or vertically.",{"title":743,"path":744,"stem":745,"framework":16,"category":184,"description":746,"badge":294},"Sidebar","\u002Fdocs\u002Fcomponents\u002Fsidebar","docs\u002F2.components\u002Fsidebar","A collapsible sidebar with multiple visual variants.",{"title":748,"path":749,"stem":750,"framework":16,"category":178,"description":751},"Skeleton","\u002Fdocs\u002Fcomponents\u002Fskeleton","docs\u002F2.components\u002Fskeleton","A placeholder to show while content is loading.",{"title":753,"path":754,"stem":755,"framework":16,"category":397,"description":756},"Slideover","\u002Fdocs\u002Fcomponents\u002Fslideover","docs\u002F2.components\u002Fslideover","A dialog that slides in from any side of the screen.",{"title":758,"path":759,"stem":760,"framework":16,"category":309,"description":761},"Slider","\u002Fdocs\u002Fcomponents\u002Fslider","docs\u002F2.components\u002Fslider","An input to select a numeric value within a range.",{"title":763,"path":764,"stem":765,"framework":16,"category":226,"description":766},"Stepper","\u002Fdocs\u002Fcomponents\u002Fstepper","docs\u002F2.components\u002Fstepper","A set of steps that are used to indicate progress through a multi-step process.",{"title":768,"path":769,"stem":770,"framework":16,"category":309,"description":771},"Switch","\u002Fdocs\u002Fcomponents\u002Fswitch","docs\u002F2.components\u002Fswitch","A control that toggles between two states.",{"title":773,"path":774,"stem":775,"framework":16,"category":172,"description":776},"Table","\u002Fdocs\u002Fcomponents\u002Ftable","docs\u002F2.components\u002Ftable","A responsive table element to display data in rows and columns.",{"title":778,"path":779,"stem":780,"framework":16,"category":226,"description":781},"Tabs","\u002Fdocs\u002Fcomponents\u002Ftabs","docs\u002F2.components\u002Ftabs","A set of tab panels that are displayed one at a time.",{"title":783,"path":784,"stem":785,"framework":16,"category":309,"description":786},"Textarea","\u002Fdocs\u002Fcomponents\u002Ftextarea","docs\u002F2.components\u002Ftextarea","A textarea element to input multi-line text.",{"title":54,"path":788,"stem":789,"framework":16,"category":184,"description":790},"\u002Fdocs\u002Fcomponents\u002Ftheme","docs\u002F2.components\u002Ftheme","A headless component to theme child components.",{"title":792,"path":793,"stem":794,"framework":16,"category":172,"description":795},"Timeline","\u002Fdocs\u002Fcomponents\u002Ftimeline","docs\u002F2.components\u002Ftimeline","A component that displays a sequence of events with dates, titles, icons or avatars.",{"title":797,"path":798,"stem":799,"framework":16,"category":397,"description":800},"Toast","\u002Fdocs\u002Fcomponents\u002Ftoast","docs\u002F2.components\u002Ftoast","A succinct message to provide information or feedback to the user.",{"title":802,"path":803,"stem":804,"framework":16,"category":397,"description":805},"Tooltip","\u002Fdocs\u002Fcomponents\u002Ftooltip","docs\u002F2.components\u002Ftooltip","A popup that reveals information when hovering over an element.",{"title":807,"path":808,"stem":809,"framework":16,"category":172,"description":810},"Tree","\u002Fdocs\u002Fcomponents\u002Ftree","docs\u002F2.components\u002Ftree","A tree view component to display and interact with hierarchical data structures.",{"title":812,"path":813,"stem":814,"framework":16,"category":172,"description":815},"User","\u002Fdocs\u002Fcomponents\u002Fuser","docs\u002F2.components\u002Fuser","Display user information with name, description and avatar.",{"title":817,"framework":16,"category":16,"description":16,"icon":818,"path":819,"stem":820,"children":821,"page":36},"Composables","i-lucide-square-function","\u002Fdocs\u002Fcomposables","docs\u002F3.composables",[822,827,832,837,842,847,852],{"title":823,"path":824,"stem":825,"framework":16,"category":16,"description":826},"defineLocale","\u002Fdocs\u002Fcomposables\u002Fdefine-locale","docs\u002F3.composables\u002Fdefine-locale","A utility to create a custom locale for your app.",{"title":828,"path":829,"stem":830,"framework":16,"category":16,"description":831},"defineShortcuts","\u002Fdocs\u002Fcomposables\u002Fdefine-shortcuts","docs\u002F3.composables\u002Fdefine-shortcuts","A composable to define keyboard shortcuts in your app.",{"title":833,"path":834,"stem":835,"framework":16,"category":16,"description":836},"extendLocale","\u002Fdocs\u002Fcomposables\u002Fextend-locale","docs\u002F3.composables\u002Fextend-locale","A utility to extend an existing locale with custom translations.",{"title":838,"path":839,"stem":840,"framework":16,"category":16,"description":841},"extractShortcuts","\u002Fdocs\u002Fcomposables\u002Fextract-shortcuts","docs\u002F3.composables\u002Fextract-shortcuts","A utility to extract keyboard shortcuts from menu items.",{"title":843,"path":844,"stem":845,"framework":16,"category":16,"description":846},"useOverlay","\u002Fdocs\u002Fcomposables\u002Fuse-overlay","docs\u002F3.composables\u002Fuse-overlay","A composable to programmatically control overlays.",{"title":848,"path":849,"stem":850,"framework":16,"category":16,"description":851,"badge":294},"useScrollShadow","\u002Fdocs\u002Fcomposables\u002Fuse-scroll-shadow","docs\u002F3.composables\u002Fuse-scroll-shadow","A composable to apply scroll shadow effects on any scrollable element.",{"title":853,"path":854,"stem":855,"framework":16,"category":16,"description":856},"useToast","\u002Fdocs\u002Fcomposables\u002Fuse-toast","docs\u002F3.composables\u002Fuse-toast","A composable to display toast notifications in your app.",{"title":858,"path":859,"stem":860,"children":861,"framework":28,"category":16,"description":16,"icon":957},"Typography","\u002Fdocs\u002Ftypography","docs\u002F4.typography\u002F1.index",[862,864,869,874,879,884,889,893,898,902,907,912,917,922,927,931,936,940,944,948,953],{"title":15,"path":859,"stem":860,"framework":28,"category":16,"description":863},"Beautiful typography components and utilities to style your content with Nuxt UI.",{"title":865,"path":866,"stem":867,"framework":28,"category":16,"description":868},"Headers and text","\u002Fdocs\u002Ftypography\u002Fheaders-and-text","docs\u002F4.typography\u002F2.headers-and-text","Beautifully styled headings, paragraphs, text formatting, and links for optimal readability.",{"title":870,"path":871,"stem":872,"framework":28,"category":16,"description":873},"Lists and tables","\u002Fdocs\u002Ftypography\u002Flists-and-tables","docs\u002F4.typography\u002F3.lists-and-tables","Organize information with styled lists and responsive tables for clear, consistent readability.",{"title":875,"path":876,"stem":877,"framework":28,"category":16,"description":878},"Images and embeds","\u002Fdocs\u002Ftypography\u002Fimages-and-embeds","docs\u002F4.typography\u002F4.images-and-embeds","Responsive images, videos, and rich media embeds to enhance and illustrate your documentation.",{"title":880,"path":881,"stem":882,"framework":28,"category":16,"description":883},"Code","\u002Fdocs\u002Ftypography\u002Fcode","docs\u002F4.typography\u002F5.code","Display inline code and syntax-highlighted code blocks with copy-to-clipboard support.",{"title":169,"path":885,"stem":886,"framework":28,"category":887,"description":888},"\u002Fdocs\u002Ftypography\u002Faccordion","docs\u002F4.typography\u002Faccordion","components","Create expandable content sections for better information organization.",{"title":203,"path":890,"stem":891,"framework":28,"category":887,"description":892},"\u002Fdocs\u002Ftypography\u002Fbadge","docs\u002F4.typography\u002Fbadge","Display version numbers, status labels, and tags within your content.",{"title":894,"path":895,"stem":896,"framework":28,"category":887,"description":897},"Callout","\u002Fdocs\u002Ftypography\u002Fcallout","docs\u002F4.typography\u002Fcallout","Highlight important information with eye-catching colored boxes and icons.",{"title":239,"path":899,"stem":900,"framework":28,"category":887,"description":901},"\u002Fdocs\u002Ftypography\u002Fcard","docs\u002F4.typography\u002Fcard","Create highlighted content blocks with optional links and navigation.",{"title":903,"path":904,"stem":905,"framework":28,"category":887,"description":906},"CardGroup","\u002Fdocs\u002Ftypography\u002Fcard-group","docs\u002F4.typography\u002Fcard-group","Organize multiple cards in responsive grid layouts for better content presentation.",{"title":908,"path":909,"stem":910,"framework":28,"category":887,"description":911},"CodeCollapse","\u002Fdocs\u002Ftypography\u002Fcode-collapse","docs\u002F4.typography\u002Fcode-collapse","Make long code blocks collapsible to save space and improve readability.",{"title":913,"path":914,"stem":915,"framework":28,"category":887,"description":916},"CodeGroup","\u002Fdocs\u002Ftypography\u002Fcode-group","docs\u002F4.typography\u002Fcode-group","Group multiple code examples in tabbed interfaces for easy comparison.",{"title":918,"path":919,"stem":920,"framework":28,"category":887,"description":921},"CodePreview","\u002Fdocs\u002Ftypography\u002Fcode-preview","docs\u002F4.typography\u002Fcode-preview","Display code examples with a preview and their source for clearer documentation.",{"title":923,"path":924,"stem":925,"framework":28,"category":887,"description":926},"CodeTree","\u002Fdocs\u002Ftypography\u002Fcode-tree","docs\u002F4.typography\u002Fcode-tree","Visualize file and folder structures with syntax-highlighted code.",{"title":322,"path":928,"stem":929,"framework":28,"category":887,"description":930},"\u002Fdocs\u002Ftypography\u002Fcollapsible","docs\u002F4.typography\u002Fcollapsible","Toggle content visibility with smooth expand and collapse animations.",{"title":932,"path":933,"stem":934,"framework":28,"category":887,"description":935},"Field","\u002Fdocs\u002Ftypography\u002Ffield","docs\u002F4.typography\u002Ffield","Document API parameters, props, and configuration options clearly.",{"title":502,"path":937,"stem":938,"framework":28,"category":887,"description":939},"\u002Fdocs\u002Ftypography\u002Ffield-group","docs\u002F4.typography\u002Ffield-group","Group related fields together for comprehensive API documentation.",{"title":537,"path":941,"stem":942,"framework":28,"category":887,"description":943},"\u002Fdocs\u002Ftypography\u002Ficon","docs\u002F4.typography\u002Ficon","Display icons from popular icon libraries to enhance your content.",{"title":572,"path":945,"stem":946,"framework":28,"category":887,"description":947},"\u002Fdocs\u002Ftypography\u002Fkbd","docs\u002F4.typography\u002Fkbd","Display keyboard shortcuts and key combinations with proper styling.",{"title":949,"path":950,"stem":951,"framework":28,"category":887,"description":952},"Steps","\u002Fdocs\u002Ftypography\u002Fsteps","docs\u002F4.typography\u002Fsteps","Transform headings into numbered step-by-step guides and tutorials.",{"title":778,"path":954,"stem":955,"framework":28,"category":887,"description":956},"\u002Fdocs\u002Ftypography\u002Ftabs","docs\u002F4.typography\u002Ftabs","Organize related content in interactive tabbed interfaces.","i-lucide-square-pilcrow",{"id":959,"title":147,"body":960,"category":16,"description":150,"extension":2655,"framework":16,"index":36,"links":16,"meta":2656,"navigation":2657,"path":148,"seo":2658,"stem":149,"__hash__":2659},"docs\u002Fdocs\u002F1.getting-started\u002F7.ai\u002F1.mcp.md",{"type":961,"value":962,"toc":2627},"minimark",[963,968,972,975,979,982,1028,1035,1039,1042,1047,1110,1114,1132,1136,1169,1173,1191,1195,1205,1209,1212,1238,1243,1247,1250,1254,1264,1267,1315,1318,1322,1338,1341,1378,1382,1387,1402,1536,1541,1545,1549,1552,1559,1563,1571,1578,1660,1664,1667,1684,1746,1751,1755,1758,1766,1827,1832,1836,1839,1863,1867,1887,1890,1912,1993,1997,2000,2011,2090,2094,2097,2108,2238,2242,2245,2256,2373,2377,2385,2398,2401,2429,2532,2537,2541,2544,2561,2569,2573,2576,2611,2614,2623],[964,965,967],"h2",{"id":966},"what-is-mcp","What is MCP?",[969,970,971],"p",{},"MCP (Model Context Protocol) is a standardized protocol that enables AI assistants to access external data sources and tools. Nuxt UI provides an MCP server that allows AI assistants like Claude Code, Cursor, and Windsurf to access component information, source code, and usage examples directly.",[969,973,974],{},"The MCP server provides structured access to our component library, making it easy for AI tools to understand and assist with Nuxt UI development.",[964,976,978],{"id":977},"available-resources","Available Resources",[969,980,981],{},"The Nuxt UI MCP server provides the following resources for discovery:",[983,984,985,996,1004,1012,1020],"ul",{},[986,987,988,995],"li",{},[989,990,991],"strong",{},[992,993,994],"code",{},"resource:\u002F\u002Fnuxt-ui\u002Fcomponents",": Browse all available components with categories",[986,997,998,1003],{},[989,999,1000],{},[992,1001,1002],{},"resource:\u002F\u002Fnuxt-ui\u002Fcomposables",": Browse all available composables with categories",[986,1005,1006,1011],{},[989,1007,1008],{},[992,1009,1010],{},"resource:\u002F\u002Fnuxt-ui\u002Fexamples",": Browse all available code examples",[986,1013,1014,1019],{},[989,1015,1016],{},[992,1017,1018],{},"resource:\u002F\u002Fnuxt-ui\u002Ftemplates",": Browse all available project templates",[986,1021,1022,1027],{},[989,1023,1024],{},[992,1025,1026],{},"resource:\u002F\u002Fnuxt-ui\u002Fdocumentation-pages",": Browse all available documentation pages",[969,1029,1030,1031,1034],{},"You're able to access these resources with tools like Claude Code by using ",[992,1032,1033],{},"@",".",[964,1036,1038],{"id":1037},"available-tools","Available Tools",[969,1040,1041],{},"The Nuxt UI MCP server provides the following tools organized by category:",[1043,1044,1046],"h3",{"id":1045},"component-tools","Component Tools",[983,1048,1049,1057,1065,1094,1102],{},[986,1050,1051,1056],{},[989,1052,1053],{},[992,1054,1055],{},"list_components",": Lists all available Nuxt UI components with their categories and basic information",[986,1058,1059,1064],{},[989,1060,1061],{},[992,1062,1063],{},"list_composables",": Lists all available Nuxt UI composables with their categories and basic information",[986,1066,1067,1072,1073,1076,1077,1080,1081,1080,1084,1080,1087,1080,1090,1093],{},[989,1068,1069],{},[992,1070,1071],{},"get_component",": Retrieves component documentation and details. Supports a ",[992,1074,1075],{},"sections"," parameter (",[992,1078,1079],{},"usage",", ",[992,1082,1083],{},"examples",[992,1085,1086],{},"api",[992,1088,1089],{},"theme",[992,1091,1092],{},"changelog",") to fetch only specific parts and reduce response size",[986,1095,1096,1101],{},[989,1097,1098],{},[992,1099,1100],{},"get_component_metadata",": Retrieves detailed metadata for a component including props, slots, and events (lightweight, no documentation content)",[986,1103,1104,1109],{},[989,1105,1106],{},[992,1107,1108],{},"search_components_by_category",": Searches components by category or text filter",[1043,1111,1113],{"id":1112},"template-tools","Template Tools",[983,1115,1116,1124],{},[986,1117,1118,1123],{},[989,1119,1120],{},[992,1121,1122],{},"list_templates",": Lists all available Nuxt UI templates with optional category filtering",[986,1125,1126,1131],{},[989,1127,1128],{},[992,1129,1130],{},"get_template",": Retrieves template details and setup instructions",[1043,1133,1135],{"id":1134},"documentation-tools","Documentation Tools",[983,1137,1138,1146,1161],{},[986,1139,1140,1145],{},[989,1141,1142],{},[992,1143,1144],{},"list_documentation_pages",": Lists all documentation pages",[986,1147,1148,1153,1154,1156,1157,1160],{},[989,1149,1150],{},[992,1151,1152],{},"get_documentation_page",": Retrieves documentation page content by URL path. Supports a ",[992,1155,1075],{}," parameter to fetch only specific h2 sections (e.g., ",[992,1158,1159],{},"[\"Usage\", \"API\"]",") and reduce response size",[986,1162,1163,1168],{},[989,1164,1165],{},[992,1166,1167],{},"list_getting_started_guides",": Lists all getting started guides and installation instructions",[1043,1170,1172],{"id":1171},"example-tools","Example Tools",[983,1174,1175,1183],{},[986,1176,1177,1182],{},[989,1178,1179],{},[992,1180,1181],{},"list_examples",": Lists all available UI examples and code demonstrations",[986,1184,1185,1190],{},[989,1186,1187],{},[992,1188,1189],{},"get_example",": Retrieves specific UI example implementation code and details",[1043,1192,1194],{"id":1193},"migration-tools","Migration Tools",[983,1196,1197],{},[986,1198,1199,1204],{},[989,1200,1201],{},[992,1202,1203],{},"get_migration_guide",": Retrieves version-specific migration guides and upgrade instructions",[964,1206,1208],{"id":1207},"available-prompts","Available Prompts",[969,1210,1211],{},"The Nuxt UI MCP server provides guided prompts for common workflows:",[983,1213,1214,1222,1230],{},[986,1215,1216,1221],{},[989,1217,1218],{},[992,1219,1220],{},"find_component_for_usecase",": Find the best component for your specific use case",[986,1223,1224,1229],{},[989,1225,1226],{},[992,1227,1228],{},"implement_component_with_props",": Generate complete component implementation with proper props",[986,1231,1232,1237],{},[989,1233,1234],{},[992,1235,1236],{},"setup_project_with_template",": Get guided setup instructions for project templates",[969,1239,1030,1240,1034],{},[992,1241,1242],{},"\u002F",[964,1244,1246],{"id":1245},"configuration","Configuration",[969,1248,1249],{},"The Nuxt UI MCP server uses HTTP transport and can be configured in different AI assistants.",[1043,1251,1253],{"id":1252},"chatgpt","ChatGPT",[1255,1256,1258],"note",{"icon":1257},"i-lucide-info",[969,1259,1260,1263],{},[989,1261,1262],{},"Custom connectors using MCP are available on ChatGPT for Pro and Plus accounts."," Accessible on the web.",[969,1265,1266],{},"Follow these steps to set up Nuxt UI as a connector within ChatGPT:",[1268,1269,1270,1280,1285,1310],"ol",{},[986,1271,1272,1275],{},[989,1273,1274],{},"Enable Developer mode:",[983,1276,1277],{},[986,1278,1279],{},"Go to \"Settings\" > \"Connectors\" > \"Advanced settings\" > \"Developer mode\"",[986,1281,1282],{},[989,1283,1284],{},"Open ChatGPT settings",[986,1286,1287,1290],{},[989,1288,1289],{},"In the Connectors tab, create a new connector:",[983,1291,1292,1298,1304],{},[986,1293,1294,1295],{},"Give it a name: ",[992,1296,1297],{},"Nuxt UI",[986,1299,1300,1301],{},"MCP server URL: ",[992,1302,1303],{},"https:\u002F\u002Fui.nuxt.com\u002Fmcp",[986,1305,1306,1307],{},"Authentication: ",[992,1308,1309],{},"None",[986,1311,1312],{},[989,1313,1314],{},"Click Create",[969,1316,1317],{},"The Nuxt UI connector will appear in the composer's \"Developer mode\" tool later during conversations.",[1043,1319,1321],{"id":1320},"claude-code","Claude Code",[1255,1323,1324],{"icon":1257},[969,1325,1326,1329,1330,1337],{},[989,1327,1328],{},"Ensure Claude Code is installed."," Visit ",[1331,1332,1336],"a",{"href":1333,"rel":1334},"https:\u002F\u002Fdocs.anthropic.com\u002Fen\u002Fdocs\u002Fclaude-code\u002Fquickstart",[1335],"nofollow","Anthropic's documentation"," for installation instructions.",[969,1339,1340],{},"Add the server using the CLI command:",[1342,1343,1348],"pre",{"className":1344,"code":1345,"language":1346,"meta":1347,"style":1347},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","claude mcp add --transport http nuxt-ui-remote https:\u002F\u002Fui.nuxt.com\u002Fmcp\n","bash","",[992,1349,1350],{"__ignoreMap":1347},[1351,1352,1355,1359,1363,1366,1369,1372,1375],"span",{"class":1353,"line":1354},"line",1,[1351,1356,1358],{"class":1357},"sBMFI","claude",[1351,1360,1362],{"class":1361},"sfazB"," mcp",[1351,1364,1365],{"class":1361}," add",[1351,1367,1368],{"class":1361}," --transport",[1351,1370,1371],{"class":1361}," http",[1351,1373,1374],{"class":1361}," nuxt-ui-remote",[1351,1376,1377],{"class":1361}," https:\u002F\u002Fui.nuxt.com\u002Fmcp\n",[1043,1379,1381],{"id":1380},"claude-desktop","Claude Desktop",[1383,1384,1386],"h4",{"id":1385},"setup-instructions","Setup Instructions:",[1268,1388,1389,1392,1395],{},[986,1390,1391],{},"Open Claude Desktop and navigate to \"Settings\" > \"Developer\".",[986,1393,1394],{},"Click on \"Edit Config\". This will open the local Claude directory.",[986,1396,1397,1398,1401],{},"Modify the ",[992,1399,1400],{},"claude_desktop_config.json"," file with your custom MCP server configuration.",[1342,1403,1407],{"className":1404,"code":1405,"filename":1400,"language":1406,"meta":1347,"style":1347},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"mcpServers\": {\n    \"nuxt-ui\": {\n      \"command\": \"npx\",\n      \"args\": [\n        \"mcp-remote\",\n        \"https:\u002F\u002Fui.nuxt.com\u002Fmcp\"\n      ]\n    }\n  }\n}\n","json",[992,1408,1409,1415,1434,1449,1474,1489,1502,1512,1518,1524,1530],{"__ignoreMap":1347},[1351,1410,1411],{"class":1353,"line":1354},[1351,1412,1414],{"class":1413},"sMK4o","{\n",[1351,1416,1418,1421,1425,1428,1431],{"class":1353,"line":1417},2,[1351,1419,1420],{"class":1413},"  \"",[1351,1422,1424],{"class":1423},"spNyl","mcpServers",[1351,1426,1427],{"class":1413},"\"",[1351,1429,1430],{"class":1413},":",[1351,1432,1433],{"class":1413}," {\n",[1351,1435,1437,1440,1443,1445,1447],{"class":1353,"line":1436},3,[1351,1438,1439],{"class":1413},"    \"",[1351,1441,1442],{"class":1357},"nuxt-ui",[1351,1444,1427],{"class":1413},[1351,1446,1430],{"class":1413},[1351,1448,1433],{"class":1413},[1351,1450,1452,1455,1459,1461,1463,1466,1469,1471],{"class":1353,"line":1451},4,[1351,1453,1454],{"class":1413},"      \"",[1351,1456,1458],{"class":1457},"sbssI","command",[1351,1460,1427],{"class":1413},[1351,1462,1430],{"class":1413},[1351,1464,1465],{"class":1413}," \"",[1351,1467,1468],{"class":1361},"npx",[1351,1470,1427],{"class":1413},[1351,1472,1473],{"class":1413},",\n",[1351,1475,1477,1479,1482,1484,1486],{"class":1353,"line":1476},5,[1351,1478,1454],{"class":1413},[1351,1480,1481],{"class":1457},"args",[1351,1483,1427],{"class":1413},[1351,1485,1430],{"class":1413},[1351,1487,1488],{"class":1413}," [\n",[1351,1490,1492,1495,1498,1500],{"class":1353,"line":1491},6,[1351,1493,1494],{"class":1413},"        \"",[1351,1496,1497],{"class":1361},"mcp-remote",[1351,1499,1427],{"class":1413},[1351,1501,1473],{"class":1413},[1351,1503,1505,1507,1509],{"class":1353,"line":1504},7,[1351,1506,1494],{"class":1413},[1351,1508,1303],{"class":1361},[1351,1510,1511],{"class":1413},"\"\n",[1351,1513,1515],{"class":1353,"line":1514},8,[1351,1516,1517],{"class":1413},"      ]\n",[1351,1519,1521],{"class":1353,"line":1520},9,[1351,1522,1523],{"class":1413},"    }\n",[1351,1525,1527],{"class":1353,"line":1526},10,[1351,1528,1529],{"class":1413},"  }\n",[1351,1531,1533],{"class":1353,"line":1532},11,[1351,1534,1535],{"class":1413},"}\n",[1268,1537,1538],{"start":1451},[986,1539,1540],{},"Restart Claude Desktop app. The Nuxt UI MCP server should now be registered.",[1043,1542,1544],{"id":1543},"cursor","Cursor",[1383,1546,1548],{"id":1547},"quick-install","Quick Install",[969,1550,1551],{},"Click the button below to install the Nuxt UI MCP server directly in Cursor:",[1553,1554],"u-button",{"color":1555,"icon":1556,"label":1557,"to":1558},"neutral","i-custom-cursor","Install MCP Server","cursor:\u002F\u002Fanysphere.cursor-deeplink\u002Fmcp\u002Finstall?name=nuxt-ui&config=eyJ0eXBlIjoiaHR0cCIsInVybCI6Imh0dHBzOi8vdWkubnV4dC5jb20vbWNwIn0%3D",[1383,1560,1562],{"id":1561},"manual-setup-instructions","Manual Setup Instructions:",[1268,1564,1565,1568],{},[986,1566,1567],{},"Open Cursor and go to \"Settings\" > \"Tools & MCP\"",[986,1569,1570],{},"Add the Nuxt UI MCP server configuration",[969,1572,1573,1574,1577],{},"Or manually create\u002Fupdate ",[992,1575,1576],{},".cursor\u002Fmcp.json"," in your project root:",[1342,1579,1581],{"className":1404,"code":1580,"filename":1576,"language":1406,"meta":1347,"style":1347},"{\n  \"mcpServers\": {\n    \"nuxt-ui\": {\n      \"type\": \"http\",\n      \"url\": \"https:\u002F\u002Fui.nuxt.com\u002Fmcp\"\n    }\n  }\n}\n",[992,1582,1583,1587,1599,1611,1631,1648,1652,1656],{"__ignoreMap":1347},[1351,1584,1585],{"class":1353,"line":1354},[1351,1586,1414],{"class":1413},[1351,1588,1589,1591,1593,1595,1597],{"class":1353,"line":1417},[1351,1590,1420],{"class":1413},[1351,1592,1424],{"class":1423},[1351,1594,1427],{"class":1413},[1351,1596,1430],{"class":1413},[1351,1598,1433],{"class":1413},[1351,1600,1601,1603,1605,1607,1609],{"class":1353,"line":1436},[1351,1602,1439],{"class":1413},[1351,1604,1442],{"class":1357},[1351,1606,1427],{"class":1413},[1351,1608,1430],{"class":1413},[1351,1610,1433],{"class":1413},[1351,1612,1613,1615,1618,1620,1622,1624,1627,1629],{"class":1353,"line":1451},[1351,1614,1454],{"class":1413},[1351,1616,1617],{"class":1457},"type",[1351,1619,1427],{"class":1413},[1351,1621,1430],{"class":1413},[1351,1623,1465],{"class":1413},[1351,1625,1626],{"class":1361},"http",[1351,1628,1427],{"class":1413},[1351,1630,1473],{"class":1413},[1351,1632,1633,1635,1638,1640,1642,1644,1646],{"class":1353,"line":1476},[1351,1634,1454],{"class":1413},[1351,1636,1637],{"class":1457},"url",[1351,1639,1427],{"class":1413},[1351,1641,1430],{"class":1413},[1351,1643,1465],{"class":1413},[1351,1645,1303],{"class":1361},[1351,1647,1511],{"class":1413},[1351,1649,1650],{"class":1353,"line":1491},[1351,1651,1523],{"class":1413},[1351,1653,1654],{"class":1353,"line":1504},[1351,1655,1529],{"class":1413},[1351,1657,1658],{"class":1353,"line":1514},[1351,1659,1535],{"class":1413},[1043,1661,1663],{"id":1662},"google-antigravity","Google Antigravity",[1383,1665,1386],{"id":1666},"setup-instructions-1",[1268,1668,1669,1672,1675,1678],{},[986,1670,1671],{},"Open the MCP store via the \"...\" dropdown at the top of the editor's agent panel.",[986,1673,1674],{},"Click on \"Manage MCP Servers\"",[986,1676,1677],{},"Click on \"View raw config\"",[986,1679,1397,1680,1683],{},[992,1681,1682],{},"mcp_config.json"," with your custom MCP server configuration:",[1342,1685,1687],{"className":1404,"code":1686,"language":1406,"meta":1347,"style":1347},"{\n  \"mcpServers\": {\n    \"nuxt-ui\": {\n      \"serverUrl\": \"https:\u002F\u002Fui.nuxt.com\u002Fmcp\"\n    }\n  }\n}\n",[992,1688,1689,1693,1705,1717,1734,1738,1742],{"__ignoreMap":1347},[1351,1690,1691],{"class":1353,"line":1354},[1351,1692,1414],{"class":1413},[1351,1694,1695,1697,1699,1701,1703],{"class":1353,"line":1417},[1351,1696,1420],{"class":1413},[1351,1698,1424],{"class":1423},[1351,1700,1427],{"class":1413},[1351,1702,1430],{"class":1413},[1351,1704,1433],{"class":1413},[1351,1706,1707,1709,1711,1713,1715],{"class":1353,"line":1436},[1351,1708,1439],{"class":1413},[1351,1710,1442],{"class":1357},[1351,1712,1427],{"class":1413},[1351,1714,1430],{"class":1413},[1351,1716,1433],{"class":1413},[1351,1718,1719,1721,1724,1726,1728,1730,1732],{"class":1353,"line":1451},[1351,1720,1454],{"class":1413},[1351,1722,1723],{"class":1457},"serverUrl",[1351,1725,1427],{"class":1413},[1351,1727,1430],{"class":1413},[1351,1729,1465],{"class":1413},[1351,1731,1303],{"class":1361},[1351,1733,1511],{"class":1413},[1351,1735,1736],{"class":1353,"line":1476},[1351,1737,1523],{"class":1413},[1351,1739,1740],{"class":1353,"line":1491},[1351,1741,1529],{"class":1413},[1351,1743,1744],{"class":1353,"line":1504},[1351,1745,1535],{"class":1413},[1268,1747,1748],{"start":1476},[986,1749,1750],{},"Return to the \"Manage MCP Servers\" tab and click \"Refresh\". The Nuxt UI MCP server should now appear.",[1043,1752,1754],{"id":1753},"gemini-cli","Gemini CLI",[1383,1756,1386],{"id":1757},"setup-instructions-2",[1268,1759,1760,1763],{},[986,1761,1762],{},"Locate your Gemini CLI configuration file (usually ~\u002F.gemini\u002Fsettings.json or as specified in your environment).",[986,1764,1765],{},"Add the following configuration to your mcpServers object:",[1342,1767,1769],{"className":1404,"code":1768,"language":1406,"meta":1347,"style":1347},"{\n  \"mcpServers\": {\n    \"nuxt-ui\": {\n      \"url\": \"https:\u002F\u002Fui.nuxt.com\u002Fmcp\"\n    }\n  }\n}\n",[992,1770,1771,1775,1787,1799,1815,1819,1823],{"__ignoreMap":1347},[1351,1772,1773],{"class":1353,"line":1354},[1351,1774,1414],{"class":1413},[1351,1776,1777,1779,1781,1783,1785],{"class":1353,"line":1417},[1351,1778,1420],{"class":1413},[1351,1780,1424],{"class":1423},[1351,1782,1427],{"class":1413},[1351,1784,1430],{"class":1413},[1351,1786,1433],{"class":1413},[1351,1788,1789,1791,1793,1795,1797],{"class":1353,"line":1436},[1351,1790,1439],{"class":1413},[1351,1792,1442],{"class":1357},[1351,1794,1427],{"class":1413},[1351,1796,1430],{"class":1413},[1351,1798,1433],{"class":1413},[1351,1800,1801,1803,1805,1807,1809,1811,1813],{"class":1353,"line":1451},[1351,1802,1454],{"class":1413},[1351,1804,1637],{"class":1457},[1351,1806,1427],{"class":1413},[1351,1808,1430],{"class":1413},[1351,1810,1465],{"class":1413},[1351,1812,1303],{"class":1361},[1351,1814,1511],{"class":1413},[1351,1816,1817],{"class":1353,"line":1476},[1351,1818,1523],{"class":1413},[1351,1820,1821],{"class":1353,"line":1491},[1351,1822,1529],{"class":1413},[1351,1824,1825],{"class":1353,"line":1504},[1351,1826,1535],{"class":1413},[1268,1828,1829],{"start":1436},[986,1830,1831],{},"Restart your terminal session or reload the CLI. The Nuxt UI MCP server tools will now be available for use.",[1043,1833,1835],{"id":1834},"le-chat-mistral","Le Chat Mistral",[1383,1837,1386],{"id":1838},"setup-instructions-3",[1268,1840,1841,1844,1847],{},[986,1842,1843],{},"Navigate to \"Intelligence\" > \"Connectors\"",[986,1845,1846],{},"Click on \"Add Connector\" button, then select \"Custom MCP Connector\"",[986,1848,1849,1850],{},"Create your Custom MCP Connector:\n",[983,1851,1852,1858],{},[986,1853,1854,1855],{},"Connector Name: ",[992,1856,1857],{},"NuxtUI",[986,1859,1860,1861],{},"Connector Server: ",[992,1862,1303],{},[1043,1864,1866],{"id":1865},"visual-studio-code","Visual Studio Code",[1255,1868,1869],{"icon":1257},[969,1870,1871,1874,1875,1880,1881,1886],{},[989,1872,1873],{},"Install required extensions."," Ensure you have ",[1331,1876,1879],{"href":1877,"rel":1878},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=GitHub.copilot",[1335],"GitHub Copilot"," and ",[1331,1882,1885],{"href":1883,"rel":1884},"https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=GitHub.copilot-chat",[1335],"GitHub Copilot Chat"," extensions installed.",[1383,1888,1386],{"id":1889},"setup-instructions-4",[1268,1891,1892,1895,1898,1905],{},[986,1893,1894],{},"Open VS Code and access the Command Palette (Ctrl\u002FCmd + Shift + P)",[986,1896,1897],{},"Type \"Preferences: Open Workspace Settings (JSON)\" and select it",[986,1899,1900,1901,1904],{},"Navigate to your project's ",[992,1902,1903],{},".vscode"," folder or create one if it doesn't exist",[986,1906,1907,1908,1911],{},"Create or edit the ",[992,1909,1910],{},"mcp.json"," file with the following configuration:",[1342,1913,1916],{"className":1404,"code":1914,"filename":1915,"language":1406,"meta":1347,"style":1347},"{\n  \"servers\": {\n    \"nuxt-ui\": {\n      \"type\": \"http\",\n      \"url\": \"https:\u002F\u002Fui.nuxt.com\u002Fmcp\"\n    }\n  }\n}\n",".vscode\u002Fmcp.json",[992,1917,1918,1922,1935,1947,1965,1981,1985,1989],{"__ignoreMap":1347},[1351,1919,1920],{"class":1353,"line":1354},[1351,1921,1414],{"class":1413},[1351,1923,1924,1926,1929,1931,1933],{"class":1353,"line":1417},[1351,1925,1420],{"class":1413},[1351,1927,1928],{"class":1423},"servers",[1351,1930,1427],{"class":1413},[1351,1932,1430],{"class":1413},[1351,1934,1433],{"class":1413},[1351,1936,1937,1939,1941,1943,1945],{"class":1353,"line":1436},[1351,1938,1439],{"class":1413},[1351,1940,1442],{"class":1357},[1351,1942,1427],{"class":1413},[1351,1944,1430],{"class":1413},[1351,1946,1433],{"class":1413},[1351,1948,1949,1951,1953,1955,1957,1959,1961,1963],{"class":1353,"line":1451},[1351,1950,1454],{"class":1413},[1351,1952,1617],{"class":1457},[1351,1954,1427],{"class":1413},[1351,1956,1430],{"class":1413},[1351,1958,1465],{"class":1413},[1351,1960,1626],{"class":1361},[1351,1962,1427],{"class":1413},[1351,1964,1473],{"class":1413},[1351,1966,1967,1969,1971,1973,1975,1977,1979],{"class":1353,"line":1476},[1351,1968,1454],{"class":1413},[1351,1970,1637],{"class":1457},[1351,1972,1427],{"class":1413},[1351,1974,1430],{"class":1413},[1351,1976,1465],{"class":1413},[1351,1978,1303],{"class":1361},[1351,1980,1511],{"class":1413},[1351,1982,1983],{"class":1353,"line":1491},[1351,1984,1523],{"class":1413},[1351,1986,1987],{"class":1353,"line":1504},[1351,1988,1529],{"class":1413},[1351,1990,1991],{"class":1353,"line":1514},[1351,1992,1535],{"class":1413},[1043,1994,1996],{"id":1995},"windsurf","Windsurf",[1383,1998,1386],{"id":1999},"setup-instructions-5",[1268,2001,2002,2005,2008],{},[986,2003,2004],{},"Open Windsurf and navigate to \"Settings\" > \"Windsurf Settings\" > \"Cascade\"",[986,2006,2007],{},"Click the \"Manage MCPs\" button, then select the \"View raw config\" option",[986,2009,2010],{},"Add the following configuration to your MCP settings:",[1342,2012,2014],{"className":1404,"code":1580,"filename":2013,"language":1406,"meta":1347,"style":1347},".codeium\u002Fwindsurf\u002Fmcp_config.json",[992,2015,2016,2020,2032,2044,2062,2078,2082,2086],{"__ignoreMap":1347},[1351,2017,2018],{"class":1353,"line":1354},[1351,2019,1414],{"class":1413},[1351,2021,2022,2024,2026,2028,2030],{"class":1353,"line":1417},[1351,2023,1420],{"class":1413},[1351,2025,1424],{"class":1423},[1351,2027,1427],{"class":1413},[1351,2029,1430],{"class":1413},[1351,2031,1433],{"class":1413},[1351,2033,2034,2036,2038,2040,2042],{"class":1353,"line":1436},[1351,2035,1439],{"class":1413},[1351,2037,1442],{"class":1357},[1351,2039,1427],{"class":1413},[1351,2041,1430],{"class":1413},[1351,2043,1433],{"class":1413},[1351,2045,2046,2048,2050,2052,2054,2056,2058,2060],{"class":1353,"line":1451},[1351,2047,1454],{"class":1413},[1351,2049,1617],{"class":1457},[1351,2051,1427],{"class":1413},[1351,2053,1430],{"class":1413},[1351,2055,1465],{"class":1413},[1351,2057,1626],{"class":1361},[1351,2059,1427],{"class":1413},[1351,2061,1473],{"class":1413},[1351,2063,2064,2066,2068,2070,2072,2074,2076],{"class":1353,"line":1476},[1351,2065,1454],{"class":1413},[1351,2067,1637],{"class":1457},[1351,2069,1427],{"class":1413},[1351,2071,1430],{"class":1413},[1351,2073,1465],{"class":1413},[1351,2075,1303],{"class":1361},[1351,2077,1511],{"class":1413},[1351,2079,2080],{"class":1353,"line":1491},[1351,2081,1523],{"class":1413},[1351,2083,2084],{"class":1353,"line":1504},[1351,2085,1529],{"class":1413},[1351,2087,2088],{"class":1353,"line":1514},[1351,2089,1535],{"class":1413},[1043,2091,2093],{"id":2092},"zed","Zed",[1383,2095,1386],{"id":2096},"setup-instructions-6",[1268,2098,2099,2102,2105],{},[986,2100,2101],{},"Open Zed and go to \"Settings\" > \"Open Settings\"",[986,2103,2104],{},"Navigate to the JSON settings file",[986,2106,2107],{},"Add the following context server configuration to your settings:",[1342,2109,2112],{"className":1404,"code":2110,"filename":2111,"language":1406,"meta":1347,"style":1347},"{\n  \"context_servers\": {\n    \"nuxt-ui\": {\n      \"source\": \"custom\",\n      \"command\": \"npx\",\n      \"args\": [\"mcp-remote\", \"https:\u002F\u002Fui.nuxt.com\u002Fmcp\"],\n      \"env\": {}\n    }\n  }\n}\n",".config\u002Fzed\u002Fsettings.json",[992,2113,2114,2118,2131,2143,2163,2181,2212,2226,2230,2234],{"__ignoreMap":1347},[1351,2115,2116],{"class":1353,"line":1354},[1351,2117,1414],{"class":1413},[1351,2119,2120,2122,2125,2127,2129],{"class":1353,"line":1417},[1351,2121,1420],{"class":1413},[1351,2123,2124],{"class":1423},"context_servers",[1351,2126,1427],{"class":1413},[1351,2128,1430],{"class":1413},[1351,2130,1433],{"class":1413},[1351,2132,2133,2135,2137,2139,2141],{"class":1353,"line":1436},[1351,2134,1439],{"class":1413},[1351,2136,1442],{"class":1357},[1351,2138,1427],{"class":1413},[1351,2140,1430],{"class":1413},[1351,2142,1433],{"class":1413},[1351,2144,2145,2147,2150,2152,2154,2156,2159,2161],{"class":1353,"line":1451},[1351,2146,1454],{"class":1413},[1351,2148,2149],{"class":1457},"source",[1351,2151,1427],{"class":1413},[1351,2153,1430],{"class":1413},[1351,2155,1465],{"class":1413},[1351,2157,2158],{"class":1361},"custom",[1351,2160,1427],{"class":1413},[1351,2162,1473],{"class":1413},[1351,2164,2165,2167,2169,2171,2173,2175,2177,2179],{"class":1353,"line":1476},[1351,2166,1454],{"class":1413},[1351,2168,1458],{"class":1457},[1351,2170,1427],{"class":1413},[1351,2172,1430],{"class":1413},[1351,2174,1465],{"class":1413},[1351,2176,1468],{"class":1361},[1351,2178,1427],{"class":1413},[1351,2180,1473],{"class":1413},[1351,2182,2183,2185,2187,2189,2191,2194,2196,2198,2200,2203,2205,2207,2209],{"class":1353,"line":1491},[1351,2184,1454],{"class":1413},[1351,2186,1481],{"class":1457},[1351,2188,1427],{"class":1413},[1351,2190,1430],{"class":1413},[1351,2192,2193],{"class":1413}," [",[1351,2195,1427],{"class":1413},[1351,2197,1497],{"class":1361},[1351,2199,1427],{"class":1413},[1351,2201,2202],{"class":1413},",",[1351,2204,1465],{"class":1413},[1351,2206,1303],{"class":1361},[1351,2208,1427],{"class":1413},[1351,2210,2211],{"class":1413},"],\n",[1351,2213,2214,2216,2219,2221,2223],{"class":1353,"line":1504},[1351,2215,1454],{"class":1413},[1351,2217,2218],{"class":1457},"env",[1351,2220,1427],{"class":1413},[1351,2222,1430],{"class":1413},[1351,2224,2225],{"class":1413}," {}\n",[1351,2227,2228],{"class":1353,"line":1514},[1351,2229,1523],{"class":1413},[1351,2231,2232],{"class":1353,"line":1520},[1351,2233,1529],{"class":1413},[1351,2235,2236],{"class":1353,"line":1526},[1351,2237,1535],{"class":1413},[1043,2239,2241],{"id":2240},"opencode","Opencode",[1383,2243,1386],{"id":2244},"setup-instructions-7",[1268,2246,2247,2253],{},[986,2248,2249,2250],{},"In your project root, create ",[992,2251,2252],{},"opencode.json",[986,2254,2255],{},"Add the following configuration:",[1342,2257,2259],{"className":1404,"code":2258,"language":1406,"meta":1347,"style":1347},"{\n  \"$schema\": \"https:\u002F\u002Fopencode.ai\u002Fconfig.json\",\n  \"mcp\": {\n    \"nuxt-ui\": {\n      \"type\": \"remote\",\n      \"url\": \"https:\u002F\u002Fui.nuxt.com\u002Fmcp\",\n      \"enabled\": true\n    }\n  }\n}\n",[992,2260,2261,2265,2285,2298,2310,2329,2347,2361,2365,2369],{"__ignoreMap":1347},[1351,2262,2263],{"class":1353,"line":1354},[1351,2264,1414],{"class":1413},[1351,2266,2267,2269,2272,2274,2276,2278,2281,2283],{"class":1353,"line":1417},[1351,2268,1420],{"class":1413},[1351,2270,2271],{"class":1423},"$schema",[1351,2273,1427],{"class":1413},[1351,2275,1430],{"class":1413},[1351,2277,1465],{"class":1413},[1351,2279,2280],{"class":1361},"https:\u002F\u002Fopencode.ai\u002Fconfig.json",[1351,2282,1427],{"class":1413},[1351,2284,1473],{"class":1413},[1351,2286,2287,2289,2292,2294,2296],{"class":1353,"line":1436},[1351,2288,1420],{"class":1413},[1351,2290,2291],{"class":1423},"mcp",[1351,2293,1427],{"class":1413},[1351,2295,1430],{"class":1413},[1351,2297,1433],{"class":1413},[1351,2299,2300,2302,2304,2306,2308],{"class":1353,"line":1451},[1351,2301,1439],{"class":1413},[1351,2303,1442],{"class":1357},[1351,2305,1427],{"class":1413},[1351,2307,1430],{"class":1413},[1351,2309,1433],{"class":1413},[1351,2311,2312,2314,2316,2318,2320,2322,2325,2327],{"class":1353,"line":1476},[1351,2313,1454],{"class":1413},[1351,2315,1617],{"class":1457},[1351,2317,1427],{"class":1413},[1351,2319,1430],{"class":1413},[1351,2321,1465],{"class":1413},[1351,2323,2324],{"class":1361},"remote",[1351,2326,1427],{"class":1413},[1351,2328,1473],{"class":1413},[1351,2330,2331,2333,2335,2337,2339,2341,2343,2345],{"class":1353,"line":1491},[1351,2332,1454],{"class":1413},[1351,2334,1637],{"class":1457},[1351,2336,1427],{"class":1413},[1351,2338,1430],{"class":1413},[1351,2340,1465],{"class":1413},[1351,2342,1303],{"class":1361},[1351,2344,1427],{"class":1413},[1351,2346,1473],{"class":1413},[1351,2348,2349,2351,2354,2356,2358],{"class":1353,"line":1504},[1351,2350,1454],{"class":1413},[1351,2352,2353],{"class":1457},"enabled",[1351,2355,1427],{"class":1413},[1351,2357,1430],{"class":1413},[1351,2359,2360],{"class":1413}," true\n",[1351,2362,2363],{"class":1353,"line":1514},[1351,2364,1523],{"class":1413},[1351,2366,2367],{"class":1353,"line":1520},[1351,2368,1529],{"class":1413},[1351,2370,2371],{"class":1353,"line":1526},[1351,2372,1535],{"class":1413},[1043,2374,2376],{"id":2375},"github-copilot-agent","GitHub Copilot Agent",[1255,2378,2379],{"icon":1257},[969,2380,2381,2384],{},[989,2382,2383],{},"Repository administrator access required."," This is needed to configure MCP servers for GitHub Copilot coding agent.",[969,2386,2387,2388,2390,2391,2393,2394,2397],{},"If you have already configured MCP servers in VS Code (replace the ",[992,2389,1928],{}," key with ",[992,2392,1424],{}," for GitHub Copilot Agent), you can leverage a similar configuration for GitHub Copilot coding agent. You will need to add a ",[992,2395,2396],{},"tools"," key specifying which tools are available to Copilot.",[1383,2399,1386],{"id":2400},"setup-instructions-8",[1268,2402,2403,2406,2422],{},[986,2404,2405],{},"Navigate to your GitHub repository",[986,2407,2408,2409,2412,2413,2412,2416,2412,2419],{},"Go to ",[989,2410,2411],{},"Settings"," > ",[989,2414,2415],{},"Code & automation",[989,2417,2418],{},"Copilot",[989,2420,2421],{},"Coding agent",[986,2423,2424,2425,2428],{},"In the ",[989,2426,2427],{},"MCP configuration"," section, add the following configuration:",[1342,2430,2432],{"className":1404,"code":2431,"language":1406,"meta":1347,"style":1347},"{\n  \"mcpServers\": {\n    \"nuxt-ui\": {\n      \"type\": \"http\",\n      \"url\": \"https:\u002F\u002Fui.nuxt.com\u002Fmcp\",\n      \"tools\": [\"*\"]\n    }\n  }\n}\n",[992,2433,2434,2438,2450,2462,2480,2498,2520,2524,2528],{"__ignoreMap":1347},[1351,2435,2436],{"class":1353,"line":1354},[1351,2437,1414],{"class":1413},[1351,2439,2440,2442,2444,2446,2448],{"class":1353,"line":1417},[1351,2441,1420],{"class":1413},[1351,2443,1424],{"class":1423},[1351,2445,1427],{"class":1413},[1351,2447,1430],{"class":1413},[1351,2449,1433],{"class":1413},[1351,2451,2452,2454,2456,2458,2460],{"class":1353,"line":1436},[1351,2453,1439],{"class":1413},[1351,2455,1442],{"class":1357},[1351,2457,1427],{"class":1413},[1351,2459,1430],{"class":1413},[1351,2461,1433],{"class":1413},[1351,2463,2464,2466,2468,2470,2472,2474,2476,2478],{"class":1353,"line":1451},[1351,2465,1454],{"class":1413},[1351,2467,1617],{"class":1457},[1351,2469,1427],{"class":1413},[1351,2471,1430],{"class":1413},[1351,2473,1465],{"class":1413},[1351,2475,1626],{"class":1361},[1351,2477,1427],{"class":1413},[1351,2479,1473],{"class":1413},[1351,2481,2482,2484,2486,2488,2490,2492,2494,2496],{"class":1353,"line":1476},[1351,2483,1454],{"class":1413},[1351,2485,1637],{"class":1457},[1351,2487,1427],{"class":1413},[1351,2489,1430],{"class":1413},[1351,2491,1465],{"class":1413},[1351,2493,1303],{"class":1361},[1351,2495,1427],{"class":1413},[1351,2497,1473],{"class":1413},[1351,2499,2500,2502,2504,2506,2508,2510,2512,2515,2517],{"class":1353,"line":1491},[1351,2501,1454],{"class":1413},[1351,2503,2396],{"class":1457},[1351,2505,1427],{"class":1413},[1351,2507,1430],{"class":1413},[1351,2509,2193],{"class":1413},[1351,2511,1427],{"class":1413},[1351,2513,2514],{"class":1361},"*",[1351,2516,1427],{"class":1413},[1351,2518,2519],{"class":1413},"]\n",[1351,2521,2522],{"class":1353,"line":1504},[1351,2523,1523],{"class":1413},[1351,2525,2526],{"class":1353,"line":1514},[1351,2527,1529],{"class":1413},[1351,2529,2530],{"class":1353,"line":1520},[1351,2531,1535],{"class":1413},[1268,2533,2534],{"start":1451},[986,2535,2536],{},"Click Save",[1043,2538,2540],{"id":2539},"validating-the-configuration","Validating the Configuration",[969,2542,2543],{},"To verify the MCP server is configured correctly:",[1268,2545,2546,2549,2552,2555,2558],{},[986,2547,2548],{},"Create an issue in your repository and assign it to Copilot",[986,2550,2551],{},"Wait for Copilot to create a pull request",[986,2553,2554],{},"In the pull request, click View session in the \"Copilot started work\" timeline event",[986,2556,2557],{},"Click the ellipsis button (...) at the top right, then click Copilot in the sidebar",[986,2559,2560],{},"Expand the Start MCP Servers step to see the configured Nuxt tools",[969,2562,2563,2564,1034],{},"For more information on using MCP with GitHub Copilot coding agent, see ",[1331,2565,2568],{"href":2566,"rel":2567},"https:\u002F\u002Fdocs.github.com\u002Fen\u002Fcopilot\u002Fhow-tos\u002Fuse-copilot-agents\u002Fcoding-agent\u002Fextend-coding-agent-with-mcp",[1335],"Extend coding agent with MCP",[964,2570,2572],{"id":2571},"usage-examples","Usage Examples",[969,2574,2575],{},"Once configured, you can ask your AI assistant questions like:",[983,2577,2578,2581,2584,2587,2590,2593,2596,2599,2602,2605,2608],{},[986,2579,2580],{},"\"List all available Nuxt UI components\"",[986,2582,2583],{},"\"Get Button component documentation\"",[986,2585,2586],{},"\"Show me just the Button usage examples\"",[986,2588,2589],{},"\"What props does Input accept?\"",[986,2591,2592],{},"\"Find form-related components\"",[986,2594,2595],{},"\"List dashboard templates\"",[986,2597,2598],{},"\"Get template setup instructions\"",[986,2600,2601],{},"\"Show installation guide\"",[986,2603,2604],{},"\"Get v4 migration guide\"",[986,2606,2607],{},"\"List all examples\"",[986,2609,2610],{},"\"Get ContactForm example code\"",[969,2612,2613],{},"The AI assistant will use the MCP server to fetch structured JSON data and provide guided assistance for Nuxt UI during development.",[2615,2616,2617],"tip",{},[969,2618,2619,2620,2622],{},"For large documentation pages, the AI can use the ",[992,2621,1075],{}," parameter to fetch only relevant parts (like \"Usage\" or \"API\"), reducing response size and improving performance.",[2624,2625,2626],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":1347,"searchDepth":1417,"depth":1417,"links":2628},[2629,2630,2631,2638,2639,2654],{"id":966,"depth":1417,"text":967},{"id":977,"depth":1417,"text":978},{"id":1037,"depth":1417,"text":1038,"children":2632},[2633,2634,2635,2636,2637],{"id":1045,"depth":1436,"text":1046},{"id":1112,"depth":1436,"text":1113},{"id":1134,"depth":1436,"text":1135},{"id":1171,"depth":1436,"text":1172},{"id":1193,"depth":1436,"text":1194},{"id":1207,"depth":1417,"text":1208},{"id":1245,"depth":1417,"text":1246,"children":2640},[2641,2642,2643,2644,2645,2646,2647,2648,2649,2650,2651,2652,2653],{"id":1252,"depth":1436,"text":1253},{"id":1320,"depth":1436,"text":1321},{"id":1380,"depth":1436,"text":1381},{"id":1543,"depth":1436,"text":1544},{"id":1662,"depth":1436,"text":1663},{"id":1753,"depth":1436,"text":1754},{"id":1834,"depth":1436,"text":1835},{"id":1865,"depth":1436,"text":1866},{"id":1995,"depth":1436,"text":1996},{"id":2092,"depth":1436,"text":2093},{"id":2240,"depth":1436,"text":2241},{"id":2375,"depth":1436,"text":2376},{"id":2539,"depth":1436,"text":2540},{"id":2571,"depth":1417,"text":2572},"md",{},{"icon":140},{"title":147,"description":150},"ofr7qlCGOGKtLFwZhUM7nx-0s7Bi262UWPrsJ9Awo24",{"data":2661,"body":2662},{},{"type":2663,"children":2664},"root",[2665],{"type":178,"tag":969,"props":2666,"children":2667},{},[2668],{"type":2669,"value":150},"text",1774890225351]