[{"data":1,"prerenderedAt":301},["ShallowReactive",2],{"mobile-docs-navigation":3,"command-menu-docs":58,"navigation":81,"mobile-docs-page-meta":99,"docs-pages-category":115,"\u002Fdocs\u002Fcomponents\u002Fchat":127,"surround-\u002Fdocs\u002Fcomponents\u002Fchat":298},[4],{"title":5,"path":6,"stem":7,"children":8,"page":57},"Docs","\u002Fdocs","docs",[9,19],{"title":10,"path":11,"stem":12,"children":13},"Introduction","\u002Fdocs\u002Fgetting-started","docs\u002F1.getting-started\u002F1.index",[14,15],{"title":10,"path":11,"stem":12},{"title":16,"path":17,"stem":18},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002F1.getting-started\u002F2.installation",{"title":20,"path":21,"stem":22,"children":23},"Components","\u002Fdocs\u002Fcomponents","docs\u002F2.components\u002F0.index",[24,25,29,33,37,41,45,49,53],{"title":20,"path":21,"stem":22},{"title":26,"path":27,"stem":28},"Chat","\u002Fdocs\u002Fcomponents\u002Fchat","docs\u002F2.components\u002F1.chat",{"title":30,"path":31,"stem":32},"ChatMessage","\u002Fdocs\u002Fcomponents\u002Fchat-message","docs\u002F2.components\u002F2.chat-message",{"title":34,"path":35,"stem":36},"ChatMessages","\u002Fdocs\u002Fcomponents\u002Fchat-messages","docs\u002F2.components\u002F3.chat-messages",{"title":38,"path":39,"stem":40},"ChatPrompt","\u002Fdocs\u002Fcomponents\u002Fchat-prompt","docs\u002F2.components\u002F4.chat-prompt",{"title":42,"path":43,"stem":44},"ChatPromptSubmit","\u002Fdocs\u002Fcomponents\u002Fchat-prompt-submit","docs\u002F2.components\u002F5.chat-prompt-submit",{"title":46,"path":47,"stem":48},"DocsSearchModal","\u002Fdocs\u002Fcomponents\u002Fdocs-search-modal","docs\u002F2.components\u002F6.docs-search-modal",{"title":50,"path":51,"stem":52},"PricingPlans","\u002Fdocs\u002Fcomponents\u002Fpricing-plans","docs\u002F2.components\u002F7.pricing-plans",{"title":54,"path":55,"stem":56},"ReasoningDisclosure","\u002Fdocs\u002Fcomponents\u002Freasoning-disclosure","docs\u002F2.components\u002F8.reasoning-disclosure",false,[59,61,63,65,67,69,71,73,75,77,79],{"path":27,"title":26,"description":60},"Build Nuxt chat interfaces with installable shadcn-vue components you own and compose.",{"path":31,"title":30,"description":62},"Render an individual chat message bubble with AI SDK parts, actions, and layout control.",{"path":35,"title":34,"description":64},"Compose chat message lists with scrolling behavior, loading states, and action-ready assistant output.",{"path":39,"title":38,"description":66},"Build chat input flows with an auto-resizing prompt, keyboard shortcuts, and flexible slot composition.",{"path":43,"title":42,"description":68},"Handle chat submit, stop, and retry actions with a status-aware control for prompt workflows.",{"path":21,"title":20,"description":70},"Explore reusable components that complement Nuxt templates and real app workflows.",{"path":47,"title":46,"description":72},"Add a lightweight local search modal to Nuxt documentation interfaces.",{"path":17,"title":16,"description":74},"Start from templates or install individual components in your Nuxt project.",{"path":11,"title":10,"description":76},"Stackhacker UI is an open-source collection of Nuxt templates and components for the shadcn-vue community.",{"path":51,"title":50,"description":78},"Render a responsive pricing plan section from app-owned data.",{"path":55,"title":54,"description":80},"Show app-owned AI reasoning text in a compact collapsible disclosure.",[82],{"title":5,"path":6,"stem":7,"children":83,"page":57},[84,88],{"title":10,"path":11,"stem":12,"children":85},[86,87],{"title":10,"path":11,"stem":12},{"title":16,"path":17,"stem":18},{"title":20,"path":21,"stem":22,"children":89},[90,91,92,93,94,95,96,97,98],{"title":20,"path":21,"stem":22},{"title":26,"path":27,"stem":28},{"title":30,"path":31,"stem":32},{"title":34,"path":35,"stem":36},{"title":38,"path":39,"stem":40},{"title":42,"path":43,"stem":44},{"title":46,"path":47,"stem":48},{"title":50,"path":51,"stem":52},{"title":54,"path":55,"stem":56},[100,102,103,104,106,107,108,109,110,112,114],{"path":11,"category":101},"overview",{"path":17,"category":101},{"path":21,"category":101},{"path":27,"category":105},"chat",{"path":31,"category":105},{"path":35,"category":105},{"path":39,"category":105},{"path":43,"category":105},{"path":47,"category":111},"content",{"path":51,"category":113},"marketing",{"path":55,"category":105},[116,117,118,119,120,121,122,123,124,125,126],{"path":11,"category":101},{"path":17,"category":101},{"path":21,"category":101},{"path":27,"category":105},{"path":31,"category":105},{"path":35,"category":105},{"path":39,"category":105},{"path":43,"category":105},{"path":47,"category":111},{"path":51,"category":113},{"path":55,"category":105},{"id":128,"title":26,"body":129,"category":105,"description":60,"extension":293,"meta":294,"navigation":295,"path":27,"seo":296,"stem":28,"__hash__":297},"docs\u002Fdocs\u002F2.components\u002F1.chat.md",{"type":130,"value":131,"toc":286},"minimark",[132,136,139,143,209,213,220,230,233,239,242,248,252,260,264,267,283],[133,134,135],"p",{},"Stackhacker UI Chat is a starter kit for adding chat UI pieces to a shadcn-vue Nuxt project.",[133,137,138],{},"Unlike an integrated UI module, these registry items are installed as source code in your app. You can read them, change them, and compose them with your own AI SDK state, server endpoints, markdown rendering, files, tools, and auth.",[140,141,20],"h2",{"id":142},"components",[144,145,146,159],"table",{},[147,148,149],"thead",{},[150,151,152,156],"tr",{},[153,154,155],"th",{},"Component",[153,157,158],{},"Description",[160,161,162,173,182,191,200],"tbody",{},[150,163,164,170],{},[165,166,167],"td",{},[168,169,34],"a",{"href":35},[165,171,172],{},"Message list component with loading state, optional auto-scroll, and assistant actions.",[150,174,175,179],{},[165,176,177],{},[168,178,30],{"href":31},[165,180,181],{},"Individual message bubble component with content slots, leading content, and action buttons.",[150,183,184,188],{},[165,185,186],{},[168,187,38],{"href":39},[165,189,190],{},"Prompt input wrapper for composing text areas, errors, and footer controls.",[150,192,193,197],{},[165,194,195],{},[168,196,42],{"href":43},[165,198,199],{},"Status-aware submit, stop, and retry button for prompt workflows.",[150,201,202,206],{},[165,203,204],{},[168,205,54],{"href":55},[165,207,208],{},"Collapsible disclosure for app-owned AI reasoning text.",[140,210,212],{"id":211},"install","Install",[133,214,215,216,219],{},"Install the message list when you want the primary display surface. It also installs ",[217,218,30],"code",{}," because the list composes individual messages.",[221,222,228],"pre",{"className":223,"code":225,"language":226,"meta":227},[224],"language-bash","npx shadcn-vue@latest add \"https:\u002F\u002Fui.stackhacker.io\u002Fr\u002Fchat-messages.json\"\n","bash","",[217,229,225],{"__ignoreMap":227},[133,231,232],{},"Install prompt pieces when you want the input surface.",[221,234,237],{"className":235,"code":236,"language":226,"meta":227},[224],"npx shadcn-vue@latest add \"https:\u002F\u002Fui.stackhacker.io\u002Fr\u002Fchat-prompt.json\"\nnpx shadcn-vue@latest add \"https:\u002F\u002Fui.stackhacker.io\u002Fr\u002Fchat-prompt-submit.json\"\n",[217,238,236],{"__ignoreMap":227},[133,240,241],{},"Install reasoning disclosure when you want to show app-owned reasoning text.",[221,243,246],{"className":244,"code":245,"language":226,"meta":227},[224],"npx shadcn-vue@latest add \"https:\u002F\u002Fui.stackhacker.io\u002Fr\u002Freasoning-disclosure.json\"\n",[217,247,245],{"__ignoreMap":227},[140,249,251],{"id":250},"basic-composition","Basic Composition",[221,253,258],{"className":254,"code":256,"language":257,"meta":227},[255],"language-vue","\u003Cscript setup lang=\"ts\">\nimport { ChatMessages } from '@\u002Fcomponents\u002Fchat-messages'\nimport { ChatPrompt } from '@\u002Fcomponents\u002Fchat-prompt'\nimport { ChatPromptSubmit } from '@\u002Fcomponents\u002Fchat-prompt-submit'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"flex min-h-0 flex-1 flex-col gap-4\">\n    \u003CChatMessages :messages=\"messages\" :status=\"status\" should-auto-scroll \u002F>\n\n    \u003CChatPrompt v-model=\"input\" @submit=\"sendMessage\">\n      \u003Ctemplate #footer>\n        \u003CChatPromptSubmit :status=\"status\" @stop=\"stop\" @reload=\"reload\" \u002F>\n      \u003C\u002Ftemplate>\n    \u003C\u002FChatPrompt>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue",[217,259,256],{"__ignoreMap":227},[140,261,263],{"id":262},"app-responsibilities","App Responsibilities",[133,265,266],{},"The registry items handle the UI boundaries. Your Nuxt app still owns the chat runtime:",[268,269,270,274,277,280],"ul",{},[271,272,273],"li",{},"AI SDK client state and message sending.",[271,275,276],{},"Server API endpoints and model provider setup.",[271,278,279],{},"Markdown, reasoning, tool, and file rendering.",[271,281,282],{},"Auth, persistence, layout, and deployment behavior.",[133,284,285],{},"Use the component slots to connect those app-level concerns without turning the registry components into a full chat framework.",{"title":227,"searchDepth":287,"depth":287,"links":288},2,[289,290,291,292],{"id":142,"depth":287,"text":20},{"id":211,"depth":287,"text":212},{"id":250,"depth":287,"text":251},{"id":262,"depth":287,"text":263},"md",{},true,{"title":26,"description":60},"ER97oqH9NQ3slP2Ptah436LfV61-26LG7duMpaTaPrw",[299,300],{"title":20,"path":21,"stem":22,"children":-1},{"title":30,"path":31,"stem":32,"children":-1},1782364164322]