[{"data":1,"prerenderedAt":1162},["ShallowReactive",2],{"locale-alternates":3,"docs-nav-en":124,"api-none":352,"page-en-\u002Fguides\u002Finertia":353},{"\u002Fit\u002Fcomponenti\u002Fbb-accordion":4,"\u002Fen\u002Fcomponents\u002Fbb-accordion":5,"\u002Fit\u002Fcomponenti\u002Fbb-alert":6,"\u002Fen\u002Fcomponents\u002Fbb-alert":7,"\u002Fit\u002Fcomponenti\u002Fbb-asterisk":8,"\u002Fen\u002Fcomponents\u002Fbb-asterisk":9,"\u002Fit\u002Fcomponenti\u002Fbb-avatar":10,"\u002Fen\u002Fcomponents\u002Fbb-avatar":11,"\u002Fit\u002Fcomponenti\u002Fbb-badge":12,"\u002Fen\u002Fcomponents\u002Fbb-badge":13,"\u002Fit\u002Fcomponenti\u002Fbb-base-button":14,"\u002Fen\u002Fcomponents\u002Fbb-base-button":15,"\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs":16,"\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs":17,"\u002Fit\u002Fcomponenti\u002Fbb-button":18,"\u002Fen\u002Fcomponents\u002Fbb-button":19,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox":20,"\u002Fen\u002Fcomponents\u002Fbb-checkbox":21,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group":22,"\u002Fen\u002Fcomponents\u002Fbb-checkbox-group":23,"\u002Fit\u002Fcomponenti\u002Fbb-collapsible":24,"\u002Fen\u002Fcomponents\u002Fbb-collapsible":25,"\u002Fit\u002Fcomponenti\u002Fbb-color-input":26,"\u002Fen\u002Fcomponents\u002Fbb-color-input":27,"\u002Fit\u002Fcomponenti\u002Fbb-color-palette":28,"\u002Fen\u002Fcomponents\u002Fbb-color-palette":29,"\u002Fit\u002Fcomponenti\u002Fbb-confirm":30,"\u002Fen\u002Fcomponents\u002Fbb-confirm":31,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker":32,"\u002Fen\u002Fcomponents\u002Fbb-date-picker":33,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input":34,"\u002Fen\u002Fcomponents\u002Fbb-date-picker-input":35,"\u002Fit\u002Fcomponenti\u002Fbb-dialog":36,"\u002Fen\u002Fcomponents\u002Fbb-dialog":37,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown":38,"\u002Fen\u002Fcomponents\u002Fbb-dropdown":39,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button":40,"\u002Fen\u002Fcomponents\u002Fbb-dropdown-button":41,"\u002Fit\u002Fcomponenti\u002Fbb-dropzone":42,"\u002Fen\u002Fcomponents\u002Fbb-dropzone":43,"\u002Fit\u002Fcomponenti\u002Fbb-form":44,"\u002Fen\u002Fcomponents\u002Fbb-form":45,"\u002Fit\u002Fcomponenti\u002Fbb-icon":46,"\u002Fen\u002Fcomponents\u002Fbb-icon":47,"\u002Fit\u002Fcomponenti\u002Fbb-indicator":48,"\u002Fen\u002Fcomponents\u002Fbb-indicator":49,"\u002Fit\u002Fcomponenti\u002Fbb-number-input":50,"\u002Fen\u002Fcomponents\u002Fbb-number-input":51,"\u002Fit\u002Fcomponenti\u002Fbb-off-canvas":52,"\u002Fen\u002Fcomponents\u002Fbb-off-canvas":53,"\u002Fit\u002Fcomponenti\u002Fbb-pagination":54,"\u002Fen\u002Fcomponents\u002Fbb-pagination":55,"\u002Fit\u002Fcomponenti\u002Fbb-popover":56,"\u002Fen\u002Fcomponents\u002Fbb-popover":57,"\u002Fit\u002Fcomponenti\u002Fbb-progress":58,"\u002Fen\u002Fcomponents\u002Fbb-progress":59,"\u002Fit\u002Fcomponenti\u002Fbb-radio":60,"\u002Fen\u002Fcomponents\u002Fbb-radio":61,"\u002Fit\u002Fcomponenti\u002Fbb-radio-group":62,"\u002Fen\u002Fcomponents\u002Fbb-radio-group":63,"\u002Fit\u002Fcomponenti\u002Fbb-rating":64,"\u002Fen\u002Fcomponents\u002Fbb-rating":65,"\u002Fit\u002Fcomponenti\u002Fbb-select":66,"\u002Fen\u002Fcomponents\u002Fbb-select":67,"\u002Fit\u002Fcomponenti\u002Fbb-select-popover":68,"\u002Fen\u002Fcomponents\u002Fbb-select-popover":69,"\u002Fit\u002Fcomponenti\u002Fbb-slider":70,"\u002Fen\u002Fcomponents\u002Fbb-slider":71,"\u002Fit\u002Fcomponenti\u002Fbb-smooth-height":72,"\u002Fen\u002Fcomponents\u002Fbb-smooth-height":73,"\u002Fit\u002Fcomponenti\u002Fbb-spinner":74,"\u002Fen\u002Fcomponents\u002Fbb-spinner":75,"\u002Fit\u002Fcomponenti\u002Fbb-switch":76,"\u002Fen\u002Fcomponents\u002Fbb-switch":77,"\u002Fit\u002Fcomponenti\u002Fbb-switch-group":78,"\u002Fen\u002Fcomponents\u002Fbb-switch-group":79,"\u002Fit\u002Fcomponenti\u002Fbb-table":80,"\u002Fen\u002Fcomponents\u002Fbb-table":81,"\u002Fit\u002Fcomponenti\u002Fbb-tabs":82,"\u002Fen\u002Fcomponents\u002Fbb-tabs":83,"\u002Fit\u002Fcomponenti\u002Fbb-tag":84,"\u002Fen\u002Fcomponents\u002Fbb-tag":85,"\u002Fit\u002Fcomponenti\u002Fbb-text-input":86,"\u002Fen\u002Fcomponents\u002Fbb-text-input":87,"\u002Fit\u002Fcomponenti\u002Fbb-textarea":88,"\u002Fen\u002Fcomponents\u002Fbb-textarea":89,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker":90,"\u002Fen\u002Fcomponents\u002Fbb-time-picker":91,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input":92,"\u002Fen\u002Fcomponents\u002Fbb-time-picker-input":93,"\u002Fit\u002Fcomponenti\u002Fbb-toast":94,"\u002Fen\u002Fcomponents\u002Fbb-toast":95,"\u002Fit\u002Fcomponenti\u002Fbb-tooltip":96,"\u002Fen\u002Fcomponents\u002Fbb-tooltip":97,"\u002Fit\u002Fcomponenti\u002Fbb-tree":98,"\u002Fen\u002Fcomponents\u002Fbb-tree":99,"\u002Fit\u002Fguide\u002Fai-agents":100,"\u002Fen\u002Fguides\u002Fai-agents":101,"\u002Fit\u002Fguide\u002Fcoherence":102,"\u002Fen\u002Fguides\u002Fcoherence":103,"\u002Fit\u002Fguide\u002Fdesign-language":104,"\u002Fen\u002Fguides\u002Fdesign-language":105,"\u002Fit\u002Fguide\u002Fdesign-tokens":106,"\u002Fen\u002Fguides\u002Fdesign-tokens":107,"\u002Fit\u002Fguide\u002Ffetching-data":108,"\u002Fen\u002Fguides\u002Ffetching-data":109,"\u002Fit\u002Fguide\u002Ficons":110,"\u002Fen\u002Fguides\u002Ficons":111,"\u002Fit\u002Fguide\u002Finertia":112,"\u002Fen\u002Fguides\u002Finertia":113,"\u002Fit\u002Fguide\u002Finstallation":114,"\u002Fen\u002Fguides\u002Finstallation":115,"\u002Fit\u002Fguide\u002Fmigration":116,"\u002Fen\u002Fguides\u002Fmigration":117,"\u002Fit\u002Fguide\u002Fnuxt":118,"\u002Fen\u002Fguides\u002Fnuxt":119,"\u002Fit\u002Fguide\u002Foptions-and-items":120,"\u002Fen\u002Fguides\u002Foptions-and-items":121,"\u002Fit\u002Fguide\u002Fvalidated-forms":122,"\u002Fen\u002Fguides\u002Fvalidated-forms":123},"\u002Fen\u002Fcomponents\u002Fbb-accordion","\u002Fit\u002Fcomponenti\u002Fbb-accordion","\u002Fen\u002Fcomponents\u002Fbb-alert","\u002Fit\u002Fcomponenti\u002Fbb-alert","\u002Fen\u002Fcomponents\u002Fbb-asterisk","\u002Fit\u002Fcomponenti\u002Fbb-asterisk","\u002Fen\u002Fcomponents\u002Fbb-avatar","\u002Fit\u002Fcomponenti\u002Fbb-avatar","\u002Fen\u002Fcomponents\u002Fbb-badge","\u002Fit\u002Fcomponenti\u002Fbb-badge","\u002Fen\u002Fcomponents\u002Fbb-base-button","\u002Fit\u002Fcomponenti\u002Fbb-base-button","\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs","\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs","\u002Fen\u002Fcomponents\u002Fbb-button","\u002Fit\u002Fcomponenti\u002Fbb-button","\u002Fen\u002Fcomponents\u002Fbb-checkbox","\u002Fit\u002Fcomponenti\u002Fbb-checkbox","\u002Fen\u002Fcomponents\u002Fbb-checkbox-group","\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group","\u002Fen\u002Fcomponents\u002Fbb-collapsible","\u002Fit\u002Fcomponenti\u002Fbb-collapsible","\u002Fen\u002Fcomponents\u002Fbb-color-input","\u002Fit\u002Fcomponenti\u002Fbb-color-input","\u002Fen\u002Fcomponents\u002Fbb-color-palette","\u002Fit\u002Fcomponenti\u002Fbb-color-palette","\u002Fen\u002Fcomponents\u002Fbb-confirm","\u002Fit\u002Fcomponenti\u002Fbb-confirm","\u002Fen\u002Fcomponents\u002Fbb-date-picker","\u002Fit\u002Fcomponenti\u002Fbb-date-picker","\u002Fen\u002Fcomponents\u002Fbb-date-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input","\u002Fen\u002Fcomponents\u002Fbb-dialog","\u002Fit\u002Fcomponenti\u002Fbb-dialog","\u002Fen\u002Fcomponents\u002Fbb-dropdown","\u002Fit\u002Fcomponenti\u002Fbb-dropdown","\u002Fen\u002Fcomponents\u002Fbb-dropdown-button","\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button","\u002Fen\u002Fcomponents\u002Fbb-dropzone","\u002Fit\u002Fcomponenti\u002Fbb-dropzone","\u002Fen\u002Fcomponents\u002Fbb-form","\u002Fit\u002Fcomponenti\u002Fbb-form","\u002Fen\u002Fcomponents\u002Fbb-icon","\u002Fit\u002Fcomponenti\u002Fbb-icon","\u002Fen\u002Fcomponents\u002Fbb-indicator","\u002Fit\u002Fcomponenti\u002Fbb-indicator","\u002Fen\u002Fcomponents\u002Fbb-number-input","\u002Fit\u002Fcomponenti\u002Fbb-number-input","\u002Fen\u002Fcomponents\u002Fbb-off-canvas","\u002Fit\u002Fcomponenti\u002Fbb-off-canvas","\u002Fen\u002Fcomponents\u002Fbb-pagination","\u002Fit\u002Fcomponenti\u002Fbb-pagination","\u002Fen\u002Fcomponents\u002Fbb-popover","\u002Fit\u002Fcomponenti\u002Fbb-popover","\u002Fen\u002Fcomponents\u002Fbb-progress","\u002Fit\u002Fcomponenti\u002Fbb-progress","\u002Fen\u002Fcomponents\u002Fbb-radio","\u002Fit\u002Fcomponenti\u002Fbb-radio","\u002Fen\u002Fcomponents\u002Fbb-radio-group","\u002Fit\u002Fcomponenti\u002Fbb-radio-group","\u002Fen\u002Fcomponents\u002Fbb-rating","\u002Fit\u002Fcomponenti\u002Fbb-rating","\u002Fen\u002Fcomponents\u002Fbb-select","\u002Fit\u002Fcomponenti\u002Fbb-select","\u002Fen\u002Fcomponents\u002Fbb-select-popover","\u002Fit\u002Fcomponenti\u002Fbb-select-popover","\u002Fen\u002Fcomponents\u002Fbb-slider","\u002Fit\u002Fcomponenti\u002Fbb-slider","\u002Fen\u002Fcomponents\u002Fbb-smooth-height","\u002Fit\u002Fcomponenti\u002Fbb-smooth-height","\u002Fen\u002Fcomponents\u002Fbb-spinner","\u002Fit\u002Fcomponenti\u002Fbb-spinner","\u002Fen\u002Fcomponents\u002Fbb-switch","\u002Fit\u002Fcomponenti\u002Fbb-switch","\u002Fen\u002Fcomponents\u002Fbb-switch-group","\u002Fit\u002Fcomponenti\u002Fbb-switch-group","\u002Fen\u002Fcomponents\u002Fbb-table","\u002Fit\u002Fcomponenti\u002Fbb-table","\u002Fen\u002Fcomponents\u002Fbb-tabs","\u002Fit\u002Fcomponenti\u002Fbb-tabs","\u002Fen\u002Fcomponents\u002Fbb-tag","\u002Fit\u002Fcomponenti\u002Fbb-tag","\u002Fen\u002Fcomponents\u002Fbb-text-input","\u002Fit\u002Fcomponenti\u002Fbb-text-input","\u002Fen\u002Fcomponents\u002Fbb-textarea","\u002Fit\u002Fcomponenti\u002Fbb-textarea","\u002Fen\u002Fcomponents\u002Fbb-time-picker","\u002Fit\u002Fcomponenti\u002Fbb-time-picker","\u002Fen\u002Fcomponents\u002Fbb-time-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input","\u002Fen\u002Fcomponents\u002Fbb-toast","\u002Fit\u002Fcomponenti\u002Fbb-toast","\u002Fen\u002Fcomponents\u002Fbb-tooltip","\u002Fit\u002Fcomponenti\u002Fbb-tooltip","\u002Fen\u002Fcomponents\u002Fbb-tree","\u002Fit\u002Fcomponenti\u002Fbb-tree","\u002Fen\u002Fguides\u002Fai-agents","\u002Fit\u002Fguide\u002Fai-agents","\u002Fen\u002Fguides\u002Fcoherence","\u002Fit\u002Fguide\u002Fcoherence","\u002Fen\u002Fguides\u002Fdesign-language","\u002Fit\u002Fguide\u002Fdesign-language","\u002Fen\u002Fguides\u002Fdesign-tokens","\u002Fit\u002Fguide\u002Fdesign-tokens","\u002Fen\u002Fguides\u002Ffetching-data","\u002Fit\u002Fguide\u002Ffetching-data","\u002Fen\u002Fguides\u002Ficons","\u002Fit\u002Fguide\u002Ficons","\u002Fen\u002Fguides\u002Finertia","\u002Fit\u002Fguide\u002Finertia","\u002Fen\u002Fguides\u002Finstallation","\u002Fit\u002Fguide\u002Finstallation","\u002Fen\u002Fguides\u002Fmigration","\u002Fit\u002Fguide\u002Fmigration","\u002Fen\u002Fguides\u002Fnuxt","\u002Fit\u002Fguide\u002Fnuxt","\u002Fen\u002Fguides\u002Foptions-and-items","\u002Fit\u002Fguide\u002Foptions-and-items","\u002Fen\u002Fguides\u002Fvalidated-forms","\u002Fit\u002Fguide\u002Fvalidated-forms",[125,136,145,166,178,220,253,286,307,328,340,346],{"label":126,"entries":127},"Getting started",[128,132],{"title":129,"path":130,"order":131},"Installation","\u002Fguides\u002Finstallation",1,{"title":133,"path":134,"order":135},"Migrating from v2","\u002Fguides\u002Fmigration",2,{"label":137,"entries":138},"Design system",[139,142],{"title":140,"path":141,"order":131},"Design tokens","\u002Fguides\u002Fdesign-tokens",{"title":143,"path":144,"order":135},"Design language","\u002Fguides\u002Fdesign-language",{"label":146,"entries":147},"Playbooks",[148,151,154,158,162],{"title":149,"path":150,"order":131},"Options and items","\u002Fguides\u002Foptions-and-items",{"title":152,"path":153,"order":135},"Fetching data","\u002Fguides\u002Ffetching-data",{"title":155,"path":156,"order":157},"Coherence","\u002Fguides\u002Fcoherence",3,{"title":159,"path":160,"order":161},"Validated forms","\u002Fguides\u002Fvalidated-forms",4,{"title":163,"path":164,"order":165},"Icons","\u002Fguides\u002Ficons",5,{"label":167,"entries":168},"Ecosystem",[169,172,175],{"title":170,"path":171,"order":131},"Inertia and Laravel","\u002Fguides\u002Finertia",{"title":173,"path":174,"order":135},"Nuxt","\u002Fguides\u002Fnuxt",{"title":176,"path":177,"order":157},"AI agents","\u002Fguides\u002Fai-agents",{"label":179,"entries":180},"Inputs",[181,184,187,190,193,196,200,204,208,212,216],{"title":182,"path":183,"component":182,"order":131},"BbBaseButton","\u002Fcomponents\u002Fbb-base-button",{"title":185,"path":186,"component":185,"order":135},"BbButton","\u002Fcomponents\u002Fbb-button",{"title":188,"path":189,"component":188,"order":157},"BbColorInput","\u002Fcomponents\u002Fbb-color-input",{"title":191,"path":192,"component":191,"order":161},"BbDatePickerInput","\u002Fcomponents\u002Fbb-date-picker-input",{"title":194,"path":195,"component":194,"order":165},"BbDropzone","\u002Fcomponents\u002Fbb-dropzone",{"title":197,"path":198,"component":197,"order":199},"BbForm","\u002Fcomponents\u002Fbb-form",6,{"title":201,"path":202,"component":201,"order":203},"BbNumberInput","\u002Fcomponents\u002Fbb-number-input",7,{"title":205,"path":206,"component":205,"order":207},"BbTag","\u002Fcomponents\u002Fbb-tag",8,{"title":209,"path":210,"component":209,"order":211},"BbTextarea","\u002Fcomponents\u002Fbb-textarea",9,{"title":213,"path":214,"component":213,"order":215},"BbTextInput","\u002Fcomponents\u002Fbb-text-input",10,{"title":217,"path":218,"component":217,"order":219},"BbTimePickerInput","\u002Fcomponents\u002Fbb-time-picker-input",11,{"label":221,"entries":222},"Selection",[223,226,229,232,235,238,241,244,247,250],{"title":224,"path":225,"component":224,"order":131},"BbCheckbox","\u002Fcomponents\u002Fbb-checkbox",{"title":227,"path":228,"component":227,"order":135},"BbCheckboxGroup","\u002Fcomponents\u002Fbb-checkbox-group",{"title":230,"path":231,"component":230,"order":157},"BbRadio","\u002Fcomponents\u002Fbb-radio",{"title":233,"path":234,"component":233,"order":161},"BbRadioGroup","\u002Fcomponents\u002Fbb-radio-group",{"title":236,"path":237,"component":236,"order":165},"BbRating","\u002Fcomponents\u002Fbb-rating",{"title":239,"path":240,"component":239,"order":199},"BbSelect","\u002Fcomponents\u002Fbb-select",{"title":242,"path":243,"component":242,"order":203},"BbSelectPopover","\u002Fcomponents\u002Fbb-select-popover",{"title":245,"path":246,"component":245,"order":207},"BbSlider","\u002Fcomponents\u002Fbb-slider",{"title":248,"path":249,"component":248,"order":211},"BbSwitch","\u002Fcomponents\u002Fbb-switch",{"title":251,"path":252,"component":251,"order":215},"BbSwitchGroup","\u002Fcomponents\u002Fbb-switch-group",{"label":254,"entries":255},"Overlay",[256,259,262,265,268,271,274,277,280,283],{"title":257,"path":258,"component":257,"order":131},"BbColorPalette","\u002Fcomponents\u002Fbb-color-palette",{"title":260,"path":261,"component":260,"order":135},"BbConfirm","\u002Fcomponents\u002Fbb-confirm",{"title":263,"path":264,"component":263,"order":157},"BbDatePicker","\u002Fcomponents\u002Fbb-date-picker",{"title":266,"path":267,"component":266,"order":161},"BbDialog","\u002Fcomponents\u002Fbb-dialog",{"title":269,"path":270,"component":269,"order":165},"BbDropdown","\u002Fcomponents\u002Fbb-dropdown",{"title":272,"path":273,"component":272,"order":199},"BbDropdownButton","\u002Fcomponents\u002Fbb-dropdown-button",{"title":275,"path":276,"component":275,"order":203},"BbOffCanvas","\u002Fcomponents\u002Fbb-off-canvas",{"title":278,"path":279,"component":278,"order":207},"BbPopover","\u002Fcomponents\u002Fbb-popover",{"title":281,"path":282,"component":281,"order":211},"BbTimePicker","\u002Fcomponents\u002Fbb-time-picker",{"title":284,"path":285,"component":284,"order":215},"BbTooltip","\u002Fcomponents\u002Fbb-tooltip",{"label":287,"entries":288},"Navigation",[289,292,295,298,301,304],{"title":290,"path":291,"component":290,"order":131},"BbAccordion","\u002Fcomponents\u002Fbb-accordion",{"title":293,"path":294,"component":293,"order":135},"BbBreadcrumbs","\u002Fcomponents\u002Fbb-breadcrumbs",{"title":296,"path":297,"component":296,"order":157},"BbCollapsible","\u002Fcomponents\u002Fbb-collapsible",{"title":299,"path":300,"component":299,"order":161},"BbPagination","\u002Fcomponents\u002Fbb-pagination",{"title":302,"path":303,"component":302,"order":165},"BbTabs","\u002Fcomponents\u002Fbb-tabs",{"title":305,"path":306,"component":305,"order":199},"BbTree","\u002Fcomponents\u002Fbb-tree",{"label":308,"entries":309},"Feedback",[310,313,316,319,322,325],{"title":311,"path":312,"component":311,"order":131},"BbAlert","\u002Fcomponents\u002Fbb-alert",{"title":314,"path":315,"component":314,"order":135},"BbBadge","\u002Fcomponents\u002Fbb-badge",{"title":317,"path":318,"component":317,"order":157},"BbIndicator","\u002Fcomponents\u002Fbb-indicator",{"title":320,"path":321,"component":320,"order":161},"BbProgress","\u002Fcomponents\u002Fbb-progress",{"title":323,"path":324,"component":323,"order":165},"BbSpinner","\u002Fcomponents\u002Fbb-spinner",{"title":326,"path":327,"component":326,"order":199},"BbToast","\u002Fcomponents\u002Fbb-toast",{"label":329,"entries":330},"Data Display",[331,334,337],{"title":332,"path":333,"component":332,"order":131},"BbAvatar","\u002Fcomponents\u002Fbb-avatar",{"title":335,"path":336,"component":335,"order":135},"BbIcon","\u002Fcomponents\u002Fbb-icon",{"title":338,"path":339,"component":338,"order":157},"BbTable","\u002Fcomponents\u002Fbb-table",{"label":341,"entries":342},"Layout & Utility",[343],{"title":344,"path":345,"component":344,"order":131},"BbSmoothHeight","\u002Fcomponents\u002Fbb-smooth-height",{"label":347,"entries":348},"Other",[349],{"title":350,"path":351,"component":350,"order":131},"BbAsterisk","\u002Fcomponents\u002Fbb-asterisk",null,{"id":354,"title":170,"body":355,"component":352,"description":1146,"extension":1147,"group":167,"meta":1148,"navigation":1149,"order":131,"path":171,"sections":1150,"seo":1159,"stem":1160,"__hash__":1161},"docs_en\u002Fguides\u002Finertia.md",{"type":356,"value":357,"toc":1136},"minimark",[358,387,394,402,413,420,426,437,466,475,493,499,516,525,531,534,546,586,589,602,619,723,729,757,786,795,801,842,845,921,935,961,976,982,997,1012,1018,1024,1027,1121,1129,1132],[359,360,361],"warning",{},[362,363,364,373,374,378,379,382,383,386],"p",{},[365,366,367,368,372],"strong",{},"These composables are not exported by ",[369,370,371],"code",{},"bitboss-ui","."," They are ",[375,376,377],"em",{},"app-side","\ncode: you copy the ones you need into your own project, conventionally\n",[369,380,381],{},"src\u002Fcomposables\u002F",". ",[369,384,385],{},"import { usePromiseForm } from 'bitboss-ui'"," will not\nresolve, and never will — this is a toolkit, not an API surface.",[362,388,389,390,393],{},"The reference implementation of each one lives in the library repository's\n",[369,391,392],{},"ai\u002Fguides\u002Finertia-helpers.md",". This page is the shape of the toolkit: what\nexists, why, and which library component each part pairs with.",[395,396,398],"h2",{"id":397},"model",[399,400,401],"span",{},"What Inertia changes",[362,403,404,405,408,409,412],{},"In Inertia there is no client data layer. Data arrives as ",[365,406,407],{},"page props"," and\nchanges through ",[365,410,411],{},"visits",". There is no store to read, no query cache to\ninvalidate, and no fetch to await — the server re-renders and the page props\nchange underneath you.",[362,414,415,416,419],{},"That model is a good fit for this library, whose components already report state\nrather than owning it — see ",[417,418,152],"a",{"href":108},". What it\nlacks is a typed surface for the props themselves, a place for filters to live,\nand a way to await a form submit. That is what the toolkit adds, so pages stay\nthin.",[395,421,423],{"id":422},"install",[399,424,425],{},"What to install",[362,427,428,429,432,433,436],{},"Copying the toolkit pulls in real npm dependencies beyond your app's own\n",[369,430,431],{},"@inertiajs\u002Fvue3"," and ",[369,434,435],{},"vue",". Install them explicitly:",[438,439,444],"pre",{"className":440,"code":441,"language":442,"meta":443,"style":443},"language-bash shiki shiki-themes github-light-high-contrast github-dark-high-contrast","npm i @vueuse\u002Fcore object-code query-string\n","bash","",[369,445,446],{"__ignoreMap":443},[399,447,449,453,457,460,463],{"class":448,"line":131},"line",[399,450,452],{"class":451},"soyes","npm",[399,454,456],{"class":455},"sT6z2"," i",[399,458,459],{"class":455}," @vueuse\u002Fcore",[399,461,462],{"class":455}," object-code",[399,464,465],{"class":455}," query-string\n",[467,468,469],"note",{},[362,470,471,472,474],{},"Do not rely on these being hoisted transitively through ",[369,473,371],{},"'s own\ndependencies. That works today by npm hoisting luck and breaks under pnpm or\nYarn PnP, or the next time the library changes what it depends on.",[362,476,477,480,481,484,485,488,489,492],{},[369,478,479],{},"@vueuse\u002Fcore"," backs the keyed contexts and a couple of the UI utilities;\n",[369,482,483],{},"object-code"," powers the hash comparison behind ",[369,486,487],{},"isEqual","; ",[369,490,491],{},"query-string"," backs\nthe three URL helpers.",[395,494,496],{"id":495},"props",[399,497,498],{},"Reading page props",[362,500,501,432,504,507,508,511,512,515],{},[369,502,503],{},"useProp",[369,505,506],{},"useOptionalProp"," give the page's props one typed surface, so a\ncomponent reads ",[369,509,510],{},"useProp('customer')"," instead of reaching into ",[369,513,514],{},"usePage().props","\nand asserting a type at every call site.",[362,517,518,432,521,524],{},[369,519,520],{},"useLazyProp",[369,522,523],{},"useLazyPropGetter"," cover Inertia's lazy props — the ones the\nserver only sends when asked — so a panel that loads its detail on open does not\nhave to hand-roll the request-and-track dance.",[395,526,528],{"id":527},"url",[399,529,530],{},"Filters that live in the URL",[362,532,533],{},"Three helpers, in increasing scope.",[362,535,536,541,542,545],{},[365,537,538],{},[369,539,540],{},"useRouteQuery"," is a single query parameter as a ",[365,543,544],{},"writable ref",". Reading\ntracks the current URL; writing merges the parameter and performs a replace\nvisit, so the server re-renders with the new value.",[438,547,551],{"className":548,"code":549,"language":550,"meta":443,"style":443},"language-ts shiki shiki-themes github-light-high-contrast github-dark-high-contrast","const status = useRouteQuery('status', 'open');\n","ts",[369,552,553],{"__ignoreMap":443},[399,554,555,559,563,566,570,574,577,580,583],{"class":448,"line":131},[399,556,558],{"class":557},"sHUrx","const",[399,560,562],{"class":561},"s-5SL"," status",[399,564,565],{"class":557}," =",[399,567,569],{"class":568},"sKwhi"," useRouteQuery",[399,571,573],{"class":572},"suds8","(",[399,575,576],{"class":455},"'status'",[399,578,579],{"class":572},", ",[399,581,582],{"class":455},"'open'",[399,584,585],{"class":572},");\n",[362,587,588],{},"Writing the current value is a no-op, which is what makes it safe to sync from a\nserver response without a visit loop.",[362,590,591,432,596,601],{},[365,592,593],{},[369,594,595],{},"useQuery",[365,597,598],{},[369,599,600],{},"useQueryObject"," widen that to a parsed query string and\nto a whole object of filters.",[362,603,604,605,609,610,614,615,618],{},"Bind these straight into the components. A ",[417,606,607],{"href":66},[369,608,239],{},"\nfilter and a ",[417,611,612],{"href":80},[369,613,338],{},"'s ",[369,616,617],{},"v-model:sort"," are both just\nrefs, and once they are URL-backed the page is shareable, restorable and\nback-button-correct without any extra code:",[438,620,623],{"className":621,"code":622,"language":435,"meta":443,"style":443},"language-vue shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003CBbSelect v-model=\"status\" :items=\"statuses\" label=\"Status\" \u002F>\n\u003CBbTable v-model:sort=\"sort\" :items=\"rows\" :columns=\"columns\" \u002F>\n",[369,624,625,673],{"__ignoreMap":443},[399,626,627,630,633,636,639,642,645,647,650,653,655,657,660,662,665,667,670],{"class":448,"line":131},[399,628,629],{"class":572},"\u003C",[399,631,239],{"class":632},"sne4z",[399,634,635],{"class":561}," v-model",[399,637,638],{"class":572},"=",[399,640,641],{"class":572},"\"",[399,643,644],{"class":572},"status",[399,646,641],{"class":572},[399,648,649],{"class":572}," :",[399,651,652],{"class":561},"items",[399,654,638],{"class":572},[399,656,641],{"class":572},[399,658,659],{"class":572},"statuses",[399,661,641],{"class":572},[399,663,664],{"class":561}," label",[399,666,638],{"class":572},[399,668,669],{"class":455},"\"Status\"",[399,671,672],{"class":572}," \u002F>\n",[399,674,675,677,679,681,684,687,689,691,693,695,697,699,701,703,706,708,710,713,715,717,719,721],{"class":448,"line":135},[399,676,629],{"class":572},[399,678,338],{"class":632},[399,680,635],{"class":561},[399,682,683],{"class":572},":",[399,685,686],{"class":561},"sort",[399,688,638],{"class":572},[399,690,641],{"class":572},[399,692,686],{"class":572},[399,694,641],{"class":572},[399,696,649],{"class":572},[399,698,652],{"class":561},[399,700,638],{"class":572},[399,702,641],{"class":572},[399,704,705],{"class":572},"rows",[399,707,641],{"class":572},[399,709,649],{"class":572},[399,711,712],{"class":561},"columns",[399,714,638],{"class":572},[399,716,641],{"class":572},[399,718,712],{"class":572},[399,720,641],{"class":572},[399,722,672],{"class":572},[395,724,726],{"id":725},"contexts",[399,727,728],{},"Sharing data down a page",[362,730,731,732,735,736,739,740,743,744,579,747,579,750,432,753,756],{},"Keyed contexts, instead of prop drilling.\n",[369,733,734],{},"usePaginatedResponseContext"," publishes the Laravel paginator shape — ",[369,737,738],{},"data","\nplus a ",[369,741,742],{},"meta"," block of ",[369,745,746],{},"total",[369,748,749],{},"per_page",[369,751,752],{},"current_page",[369,754,755],{},"last_page"," — so\na toolbar, a table and a pager can each read it where they stand.",[467,758,759],{},[362,760,761,764,765,768,769,772,773,579,775,777,778,432,780,782,783,785],{},[369,762,763],{},"PaginatedResponse\u003CT>"," is a genuine Laravel shape, but it is ",[365,766,767],{},"not"," what a bare\n",[369,770,771],{},"$query->paginate()"," serialises to. That flattens ",[369,774,752],{},[369,776,738],{},",\n",[369,779,746],{},[369,781,749],{}," at the top level with no ",[369,784,742],{}," key. This is the shape of\nan API Resource collection built by hand.",[362,787,788,432,791,794],{},[369,789,790],{},"useTableSelectionContext",[369,792,793],{},"useTableContext"," do the same for a table's\nselection and its own state, which is what lets a bulk-action bar outside the\ntable know what is selected inside it.",[395,796,798],{"id":797},"forms",[399,799,800],{},"Forms that return promises",[362,802,803,806,807,810,811,814,815,579,818,579,821,432,824,827,828,831,832,777,835,432,838,841],{},[369,804,805],{},"usePromiseForm"," is Inertia's ",[369,808,809],{},"useForm"," with ",[365,812,813],{},"promise semantics",":\n",[369,816,817],{},"post",[369,819,820],{},"put",[369,822,823],{},"patch",[369,825,826],{},"remove"," resolve on success and reject on validation\nerrors. ",[369,829,830],{},"form"," is still the underlying Inertia form, so ",[369,833,834],{},"form.errors",[369,836,837],{},"form.isDirty",[369,839,840],{},"form.reset()"," all work.",[362,843,844],{},"The payoff is that a submit becomes awaitable, which is exactly what the\nlibrary's own automatic loading states expect:",[438,846,848],{"className":621,"code":847,"language":435,"meta":443,"style":443},"\u003CBbButton type=\"submit\" @click=\"() => submit(`\u002Fcustomers\u002F${id}`, 'put')\">\n    Save\n\u003C\u002FBbButton>\n",[369,849,850,907,912],{"__ignoreMap":443},[399,851,852,854,856,859,861,864,867,870,872,874,877,880,883,885,888,891,894,896,899,902,904],{"class":448,"line":131},[399,853,629],{"class":572},[399,855,185],{"class":632},[399,857,858],{"class":561}," type",[399,860,638],{"class":572},[399,862,863],{"class":455},"\"submit\"",[399,865,866],{"class":572}," @",[399,868,869],{"class":561},"click",[399,871,638],{"class":572},[399,873,641],{"class":572},[399,875,876],{"class":572},"() ",[399,878,879],{"class":557},"=>",[399,881,882],{"class":568}," submit",[399,884,573],{"class":572},[399,886,887],{"class":455},"`\u002Fcustomers\u002F${",[399,889,890],{"class":572},"id",[399,892,893],{"class":455},"}`",[399,895,579],{"class":572},[399,897,898],{"class":455},"'put'",[399,900,901],{"class":572},")",[399,903,641],{"class":572},[399,905,906],{"class":572},">\n",[399,908,909],{"class":448,"line":135},[399,910,911],{"class":572},"    Save\n",[399,913,914,917,919],{"class":448,"line":157},[399,915,916],{"class":572},"\u003C\u002F",[399,918,185],{"class":632},[399,920,906],{"class":572},[362,922,923,927,928,614,931,934],{},[417,924,925],{"href":18},[369,926,185],{}," shows its spinner and disables itself for\nthe life of that promise with nothing else written, and ",[369,929,930],{},"useConfirm",[369,932,933],{},"onClick","\ntakes the same shape.",[359,936,937],{},[362,938,939,949,950,953,954,957,958,960],{},[365,940,941,942,945,946,372],{},"Declare the draft shape as a ",[369,943,944],{},"type"," alias, not an ",[369,947,948],{},"interface"," The generic is\nconstrained to ",[369,951,952],{},"Record\u003Cstring, FormValue>",", and TypeScript gives an implicit\nindex signature to object ",[375,955,956],{},"type aliases"," only — an ",[369,959,948],{}," never satisfies\nthat constraint, however form-encodable its fields are. The same applies to any\nnested shape. It is a TypeScript quirk, not a statement about your data.",[362,962,963,964,967,968,971,972,975],{},"One edge worth knowing: a non-Inertia response — a 423 entity lock, a 419 CSRF\nmismatch — fires neither ",[369,965,966],{},"onSuccess"," nor ",[369,969,970],{},"onError",", only ",[369,973,974],{},"onFinish",". The helper\nsettles the promise there too, so a failed visit releases the busy state instead\nof hanging the form forever.",[395,977,979],{"id":978},"guards",[399,980,981],{},"Guarding a dirty form",[362,983,984,987,988,992,993,996],{},[369,985,986],{},"useConfirmOnRouteLeave"," intercepts Inertia visits and asks through\n",[417,989,990],{"href":30},[369,991,930],{}," before leaving. It needs\n",[369,994,995],{},"\u003CBbConfirm \u002F>"," mounted at the app root, like any other confirm.",[362,998,999,1000,1003,1004,1007,1008,1011],{},"Bind ",[369,1001,1002],{},"disabled"," to ",[369,1005,1006],{},"!form.isDirty"," and the guard only appears when there is\nsomething to lose. Server redirects after a whitelisted action carry an\n",[369,1009,1010],{},"X-Whitelisted-Action"," header, so a saving visit's own redirect is never blocked\nby the guard it just triggered — the failure mode this exists to prevent.",[362,1013,1014,1017],{},[369,1015,1016],{},"useHasChanged"," gives you the same dirty signal for state that is not an Inertia\nform.",[395,1019,1021],{"id":1020},"catalogue",[399,1022,1023],{},"The rest of the toolkit",[362,1025,1026],{},"The remaining helpers are small and independent. Take the ones you need:",[1028,1029,1030,1043],"table",{},[1031,1032,1033],"thead",{},[1034,1035,1036,1040],"tr",{},[1037,1038,1039],"th",{},"Helper",[1037,1041,1042],{},"For",[1044,1045,1046,1061,1071,1081,1091,1101,1111],"tbody",{},[1034,1047,1048,1054],{},[1049,1050,1051],"td",{},[369,1052,1053],{},"useLoading",[1049,1055,1056,1057,1060],{},"Wrapping any async function with a ",[369,1058,1059],{},"loading"," ref",[1034,1062,1063,1068],{},[1049,1064,1065],{},[369,1066,1067],{},"useAsyncFn",[1049,1069,1070],{},"The same, with the result and error surfaced",[1034,1072,1073,1078],{},[1049,1074,1075],{},[369,1076,1077],{},"useResourceContext",[1049,1079,1080],{},"Sharing one resource's state across a page",[1034,1082,1083,1088],{},[1049,1084,1085],{},[369,1086,1087],{},"useDeleteCmd",[1049,1089,1090],{},"The delete-with-confirm command, wired once",[1034,1092,1093,1098],{},[1049,1094,1095],{},[369,1096,1097],{},"useScreenSizes",[1049,1099,1100],{},"Breakpoint state for adaptive layouts",[1034,1102,1103,1108],{},[1049,1104,1105],{},[369,1106,1107],{},"useIndexById",[1049,1109,1110],{},"Turning a list into a keyed lookup",[1034,1112,1113,1118],{},[1049,1114,1115],{},[369,1116,1117],{},"useUntil",[1049,1119,1120],{},"Awaiting a reactive condition",[362,1122,1123,1124,579,1126,1128],{},"None of them are required. The three that change how a page is written are\n",[369,1125,540],{},[369,1127,805],{}," and the paginated context — start there and add\nthe rest when a page asks for them.",[362,1130,1131],{},"Adopt them in that order. Put one filter in the URL, convert one submit to a\npromise, then introduce a context only when two separate regions need the same\npage data. Copying the full toolkit up front adds dependencies and abstractions\nbefore the page has a use for them.",[1133,1134,1135],"style",{},"html pre.shiki code .soyes, html code.shiki .soyes{--shiki-default:#702C00;--shiki-dark:#FFB757}html pre.shiki code .sT6z2, html code.shiki .sT6z2{--shiki-default:#032563;--shiki-dark:#ADDCFF}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 .sHUrx, html code.shiki .sHUrx{--shiki-default:#A0111F;--shiki-dark:#FF9492}html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}html pre.shiki code .sKwhi, html code.shiki .sKwhi{--shiki-default:#622CBC;--shiki-dark:#DBB7FF}html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html pre.shiki code .sne4z, html code.shiki .sne4z{--shiki-default:#024C1A;--shiki-dark:#72F088}",{"title":443,"searchDepth":157,"depth":157,"links":1137},[1138,1139,1140,1141,1142,1143,1144,1145],{"id":397,"depth":135,"text":401},{"id":422,"depth":135,"text":425},{"id":495,"depth":135,"text":498},{"id":527,"depth":135,"text":530},{"id":725,"depth":135,"text":728},{"id":797,"depth":135,"text":800},{"id":978,"depth":135,"text":981},{"id":1020,"depth":135,"text":1023},"Use app-side helpers for typed Inertia props, URL-backed filters, shared pagination, and awaitable forms.","md",{},true,[1151,1152,1153,1154,1155,1156,1157,1158],{"id":397,"title":401},{"id":422,"title":425},{"id":495,"title":498},{"id":527,"title":530},{"id":725,"title":728},{"id":797,"title":800},{"id":978,"title":981},{"id":1020,"title":1023},{"title":170,"description":1146},"guides\u002Finertia","3qM4238sWhkWnc5i-E12XNmXWBvfaUnW_BfLidDn-qg",1790005168351]