[{"data":1,"prerenderedAt":1668},["ShallowReactive",2],{"navigation_docs":3,"-modules-interface-mobile-splash-screen":587,"-modules-interface-mobile-splash-screen-surround":1663},[4,50,155,441,504],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":49},"Get Started","i-lucide-rocket","\u002Fget-started","1.get-started",[10,15,20,25,30,35,40,45],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fget-started\u002Fintroduction","1.get-started\u002F1.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fget-started\u002Finstallation","1.get-started\u002F2.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"icon":24},"Project structure","\u002Fget-started\u002Fproject-structure","1.get-started\u002F3.project-structure","i-lucide-folder-tree",{"title":26,"path":27,"stem":28,"icon":29},"Configuration","\u002Fget-started\u002Fconfiguration","1.get-started\u002F4.configuration","i-lucide-settings",{"title":31,"path":32,"stem":33,"icon":34},"Authentication","\u002Fget-started\u002Fauthentication","1.get-started\u002F5.authentication","i-lucide-lock",{"title":36,"path":37,"stem":38,"icon":39},"Adding modules","\u002Fget-started\u002Fadding-modules","1.get-started\u002F6.adding-modules","i-lucide-puzzle",{"title":41,"path":42,"stem":43,"icon":44},"Database","\u002Fget-started\u002Fdatabase","1.get-started\u002F7.database","i-lucide-database",{"title":46,"path":47,"stem":48,"icon":6},"Deployment","\u002Fget-started\u002Fdeployment","1.get-started\u002F8.deployment",false,{"title":51,"icon":52,"path":53,"stem":54,"children":55,"page":49},"Guide","i-lucide-book-open","\u002Fguide","2.guide",[56,90,115,125],{"title":57,"icon":49,"path":58,"stem":59,"children":60,"page":49},"Concepts","\u002Fguide\u002Fconcepts","2.guide\u002F1.concepts",[61,66,71,76,80,85],{"title":62,"path":63,"stem":64,"icon":65},"Architecture","\u002Fguide\u002Fconcepts\u002Farchitecture","2.guide\u002F1.concepts\u002F1.architecture","i-lucide-blocks",{"title":67,"path":68,"stem":69,"icon":70},"Access control","\u002Fguide\u002Fconcepts\u002Fauth-and-scopes","2.guide\u002F1.concepts\u002F2.auth-and-scopes","i-lucide-shield-check",{"title":72,"path":73,"stem":74,"icon":75},"Extension points","\u002Fguide\u002Fconcepts\u002Fextension-points","2.guide\u002F1.concepts\u002F3.extension-points","i-lucide-plug",{"title":77,"path":78,"stem":79,"icon":44},"Database extensions","\u002Fguide\u002Fconcepts\u002Fdatabase-extensions","2.guide\u002F1.concepts\u002F4.database-extensions",{"title":81,"path":82,"stem":83,"icon":84},"Identity","\u002Fguide\u002Fconcepts\u002Fidentity","2.guide\u002F1.concepts\u002F5.identity","i-lucide-fingerprint",{"title":86,"path":87,"stem":88,"icon":89},"Glossary","\u002Fguide\u002Fconcepts\u002Fglossary","2.guide\u002F1.concepts\u002F6.glossary","i-lucide-book-a",{"title":91,"icon":49,"path":92,"stem":93,"children":94,"page":49},"UX patterns","\u002Fguide\u002Fux-patterns","2.guide\u002F2.ux-patterns",[95,100,105,110],{"title":96,"path":97,"stem":98,"icon":99},"Layouts and navigation","\u002Fguide\u002Fux-patterns\u002Flayouts-and-navigation","2.guide\u002F2.ux-patterns\u002F1.layouts-and-navigation","i-lucide-layout-template",{"title":101,"path":102,"stem":103,"icon":104},"Pages","\u002Fguide\u002Fux-patterns\u002Fpages","2.guide\u002F2.ux-patterns\u002F2.pages","i-lucide-table",{"title":106,"path":107,"stem":108,"icon":109},"Forms and actions","\u002Fguide\u002Fux-patterns\u002Fforms-and-actions","2.guide\u002F2.ux-patterns\u002F3.forms-and-actions","i-lucide-square-pen",{"title":111,"path":112,"stem":113,"icon":114},"Text and formatting","\u002Fguide\u002Fux-patterns\u002Ftext-and-formatting","2.guide\u002F2.ux-patterns\u002F4.text-and-formatting","i-lucide-type",{"title":116,"icon":49,"path":117,"stem":118,"children":119,"page":49},"Best practices","\u002Fguide\u002Fbest-practices","2.guide\u002F3.best-practices",[120],{"title":121,"path":122,"stem":123,"icon":124},"HTTP routes","\u002Fguide\u002Fbest-practices\u002Fhttp-routes","2.guide\u002F3.best-practices\u002F1.http-routes","i-lucide-route",{"title":126,"icon":49,"path":127,"stem":128,"children":129,"page":49},"Going further","\u002Fguide\u002Fgoing-further","2.guide\u002F4.going-further",[130,135,140,145,150],{"title":131,"path":132,"stem":133,"icon":134},"Use your own OAuth server","\u002Fguide\u002Fgoing-further\u002Fown-oauth-server","2.guide\u002F4.going-further\u002F1.own-oauth-server","i-lucide-key-round",{"title":136,"path":137,"stem":138,"icon":139},"Create an OAuth application","\u002Fguide\u002Fgoing-further\u002Foauth-application","2.guide\u002F4.going-further\u002F2.oauth-application","i-lucide-app-window",{"title":141,"path":142,"stem":143,"icon":144},"Signing keys","\u002Fguide\u002Fgoing-further\u002Fsigning-keys","2.guide\u002F4.going-further\u002F3.signing-keys","i-lucide-key-square",{"title":146,"path":147,"stem":148,"icon":149},"Stripe setup","\u002Fguide\u002Fgoing-further\u002Fstripe-setup","2.guide\u002F4.going-further\u002F4.stripe-setup","i-lucide-credit-card",{"title":151,"path":152,"stem":153,"icon":154},"Migrate to the permission model","\u002Fguide\u002Fgoing-further\u002Fmigrate-access-control","2.guide\u002F4.going-further\u002F5.migrate-access-control","i-lucide-arrow-right-left",{"title":156,"icon":157,"path":158,"stem":159,"children":160},"Modules","i-lucide-boxes","\u002Fmodules","3.modules",[161,163,244,273,320,375],{"title":156,"path":158,"stem":162},"3.modules\u002Findex",{"title":81,"icon":49,"path":164,"stem":165,"children":166,"page":49},"\u002Fmodules\u002Fidentity","3.modules\u002F1.identity",[167,190,194,198,220,224,240],{"title":168,"path":169,"stem":170,"children":171},"Auth","\u002Fmodules\u002Fidentity\u002Fauth","3.modules\u002F1.identity\u002F1.auth\u002Findex",[172,174,178,182,186],{"title":173,"path":169,"stem":170},"Overview",{"title":175,"path":176,"stem":177},"Server API","\u002Fmodules\u002Fidentity\u002Fauth\u002Fserver","3.modules\u002F1.identity\u002F1.auth\u002F2.server",{"title":179,"path":180,"stem":181},"Reference","\u002Fmodules\u002Fidentity\u002Fauth\u002Freference","3.modules\u002F1.identity\u002F1.auth\u002F3.reference",{"title":183,"path":184,"stem":185},"Client mode","\u002Fmodules\u002Fidentity\u002Fauth\u002Fclient-mode","3.modules\u002F1.identity\u002F1.auth\u002F4.client-mode",{"title":187,"path":188,"stem":189},"OAuth providers","\u002Fmodules\u002Fidentity\u002Fauth\u002Foauth-providers","3.modules\u002F1.identity\u002F1.auth\u002F5.oauth-providers",{"title":191,"path":192,"stem":193},"Users","\u002Fmodules\u002Fidentity\u002Fusers","3.modules\u002F1.identity\u002F2.users",{"title":195,"path":196,"stem":197},"Account","\u002Fmodules\u002Fidentity\u002Faccount","3.modules\u002F1.identity\u002F3.account",{"title":199,"path":200,"stem":201,"children":202},"Authorization","\u002Fmodules\u002Fidentity\u002Fauthorization","3.modules\u002F1.identity\u002F4.authorization\u002Findex",[203,204,208,212,216],{"title":173,"path":200,"stem":201},{"title":205,"path":206,"stem":207},"Roles and requirements","\u002Fmodules\u002Fidentity\u002Fauthorization\u002Froles-and-requirements","3.modules\u002F1.identity\u002F4.authorization\u002F2.roles-and-requirements",{"title":209,"path":210,"stem":211},"Policies","\u002Fmodules\u002Fidentity\u002Fauthorization\u002Fpolicies","3.modules\u002F1.identity\u002F4.authorization\u002F3.policies",{"title":213,"path":214,"stem":215},"Client","\u002Fmodules\u002Fidentity\u002Fauthorization\u002Fclient","3.modules\u002F1.identity\u002F4.authorization\u002F4.client",{"title":217,"path":218,"stem":219},"Admin","\u002Fmodules\u002Fidentity\u002Fauthorization\u002Fadmin","3.modules\u002F1.identity\u002F4.authorization\u002F5.admin",{"title":221,"path":222,"stem":223},"Preferences","\u002Fmodules\u002Fidentity\u002Fpreferences","3.modules\u002F1.identity\u002F5.preferences",{"title":225,"path":226,"stem":227,"children":228},"OAuth Server","\u002Fmodules\u002Fidentity\u002Foauth-server","3.modules\u002F1.identity\u002F6.oauth-server\u002Findex",[229,230,233,237],{"title":173,"path":226,"stem":227},{"title":175,"path":231,"stem":232},"\u002Fmodules\u002Fidentity\u002Foauth-server\u002Fserver","3.modules\u002F1.identity\u002F6.oauth-server\u002F2.server",{"title":234,"path":235,"stem":236},"Hooks","\u002Fmodules\u002Fidentity\u002Foauth-server\u002Fhooks","3.modules\u002F1.identity\u002F6.oauth-server\u002F3.hooks",{"title":179,"path":238,"stem":239},"\u002Fmodules\u002Fidentity\u002Foauth-server\u002Froutes-and-clients","3.modules\u002F1.identity\u002F6.oauth-server\u002F4.routes-and-clients",{"title":241,"path":242,"stem":243},"OAuth Resource","\u002Fmodules\u002Fidentity\u002Foauth-resource","3.modules\u002F1.identity\u002F8.oauth-resource",{"title":245,"icon":49,"path":246,"stem":247,"children":248,"page":49},"Commerce","\u002Fmodules\u002Fcommerce","3.modules\u002F2.commerce",[249,253,257],{"title":250,"path":251,"stem":252},"Stripe","\u002Fmodules\u002Fcommerce\u002Fstripe","3.modules\u002F2.commerce\u002F1.stripe",{"title":254,"path":255,"stem":256},"Payments","\u002Fmodules\u002Fcommerce\u002Fpayments","3.modules\u002F2.commerce\u002F2.payments",{"title":258,"path":259,"stem":260,"children":261},"Subscriptions","\u002Fmodules\u002Fcommerce\u002Fsubscriptions","3.modules\u002F2.commerce\u002F3.subscriptions\u002Findex",[262,263,266,270],{"title":173,"path":259,"stem":260},{"title":175,"path":264,"stem":265},"\u002Fmodules\u002Fcommerce\u002Fsubscriptions\u002Fserver","3.modules\u002F2.commerce\u002F3.subscriptions\u002F2.server",{"title":267,"path":268,"stem":269},"App","\u002Fmodules\u002Fcommerce\u002Fsubscriptions\u002Fapp","3.modules\u002F2.commerce\u002F3.subscriptions\u002F3.app",{"title":179,"path":271,"stem":272},"\u002Fmodules\u002Fcommerce\u002Fsubscriptions\u002Freference","3.modules\u002F2.commerce\u002F3.subscriptions\u002F4.reference",{"title":274,"icon":49,"path":275,"stem":276,"children":277,"page":49},"Features","\u002Fmodules\u002Ffeatures","3.modules\u002F3.features",[278,293,312,316],{"title":279,"path":280,"stem":281,"children":282},"Events","\u002Fmodules\u002Ffeatures\u002Fevents","3.modules\u002F3.features\u002F1.events\u002Findex",[283,284,287,290],{"title":173,"path":280,"stem":281},{"title":175,"path":285,"stem":286},"\u002Fmodules\u002Ffeatures\u002Fevents\u002Fserver","3.modules\u002F3.features\u002F1.events\u002F2.server",{"title":267,"path":288,"stem":289},"\u002Fmodules\u002Ffeatures\u002Fevents\u002Fapp","3.modules\u002F3.features\u002F1.events\u002F3.app",{"title":179,"path":291,"stem":292},"\u002Fmodules\u002Ffeatures\u002Fevents\u002Freference","3.modules\u002F3.features\u002F1.events\u002F4.reference",{"title":294,"path":295,"stem":296,"children":297},"Forms","\u002Fmodules\u002Ffeatures\u002Fforms","3.modules\u002F3.features\u002F2.forms\u002Findex",[298,299,303,306,309],{"title":173,"path":295,"stem":296},{"title":300,"path":301,"stem":302},"Definition","\u002Fmodules\u002Ffeatures\u002Fforms\u002Fdefinition","3.modules\u002F3.features\u002F2.forms\u002F2.definition",{"title":175,"path":304,"stem":305},"\u002Fmodules\u002Ffeatures\u002Fforms\u002Fserver","3.modules\u002F3.features\u002F2.forms\u002F3.server",{"title":267,"path":307,"stem":308},"\u002Fmodules\u002Ffeatures\u002Fforms\u002Fapp","3.modules\u002F3.features\u002F2.forms\u002F4.app",{"title":179,"path":310,"stem":311},"\u002Fmodules\u002Ffeatures\u002Fforms\u002Freference","3.modules\u002F3.features\u002F2.forms\u002F5.reference",{"title":313,"path":314,"stem":315},"Cookie Consent","\u002Fmodules\u002Ffeatures\u002Fcookie-consent","3.modules\u002F3.features\u002F3.cookie-consent",{"title":317,"path":318,"stem":319},"MCP","\u002Fmodules\u002Ffeatures\u002Fmcp","3.modules\u002F3.features\u002F4.mcp",{"title":321,"icon":49,"path":322,"stem":323,"children":324,"page":49},"Interface","\u002Fmodules\u002Finterface","3.modules\u002F4.interface",[325,350,353,357,361],{"title":326,"path":327,"stem":328,"children":329},"UI","\u002Fmodules\u002Finterface\u002Fui","3.modules\u002F4.interface\u002F1.ui\u002Findex",[330,331,335,339,343,347],{"title":173,"path":327,"stem":328},{"title":332,"path":333,"stem":334},"Page components","\u002Fmodules\u002Finterface\u002Fui\u002Fpage-components","3.modules\u002F4.interface\u002F1.ui\u002F2.page-components",{"title":336,"path":337,"stem":338},"App shell","\u002Fmodules\u002Finterface\u002Fui\u002Fapp-shell","3.modules\u002F4.interface\u002F1.ui\u002F3.app-shell",{"title":340,"path":341,"stem":342},"Form inputs","\u002Fmodules\u002Finterface\u002Fui\u002Fform-inputs","3.modules\u002F4.interface\u002F1.ui\u002F4.form-inputs",{"title":344,"path":345,"stem":346},"Composables and helpers","\u002Fmodules\u002Finterface\u002Fui\u002Fcomposables","3.modules\u002F4.interface\u002F1.ui\u002F5.composables",{"title":179,"path":348,"stem":349},"\u002Fmodules\u002Finterface\u002Fui\u002Freference","3.modules\u002F4.interface\u002F1.ui\u002F6.reference",{"title":217,"path":351,"stem":352},"\u002Fmodules\u002Finterface\u002Fadmin","3.modules\u002F4.interface\u002F2.admin",{"title":354,"path":355,"stem":356},"Menu","\u002Fmodules\u002Finterface\u002Fmenu","3.modules\u002F4.interface\u002F3.menu",{"title":358,"path":359,"stem":360},"Widget","\u002Fmodules\u002Finterface\u002Fwidget","3.modules\u002F4.interface\u002F4.widget",{"title":362,"path":363,"stem":364,"children":365},"Mobile","\u002Fmodules\u002Finterface\u002Fmobile","3.modules\u002F4.interface\u002F5.mobile\u002Findex",[366,367,371],{"title":173,"path":363,"stem":364},{"title":368,"path":369,"stem":370},"CLI and devices","\u002Fmodules\u002Finterface\u002Fmobile\u002Fcli-and-devices","3.modules\u002F4.interface\u002F5.mobile\u002F2.cli-and-devices",{"title":372,"path":373,"stem":374},"Splash screen","\u002Fmodules\u002Finterface\u002Fmobile\u002Fsplash-screen","3.modules\u002F4.interface\u002F5.mobile\u002F3.splash-screen",{"title":376,"icon":49,"path":377,"stem":378,"children":379,"page":49},"Platform","\u002Fmodules\u002Fplatform","3.modules\u002F5.platform",[380,402,406,423],{"title":381,"path":382,"stem":383,"children":384},"Module Kit","\u002Fmodules\u002Fplatform\u002Fmodule-kit","3.modules\u002F5.platform\u002F1.module-kit\u002Findex",[385,386,390,394,398],{"title":173,"path":382,"stem":383},{"title":387,"path":388,"stem":389},"Server toolkit","\u002Fmodules\u002Fplatform\u002Fmodule-kit\u002Fserver-toolkit","3.modules\u002F5.platform\u002F1.module-kit\u002F2.server-toolkit",{"title":391,"path":392,"stem":393},"Registries and menus","\u002Fmodules\u002Fplatform\u002Fmodule-kit\u002Fregistries-and-menus","3.modules\u002F5.platform\u002F1.module-kit\u002F3.registries-and-menus",{"title":395,"path":396,"stem":397},"Translations","\u002Fmodules\u002Fplatform\u002Fmodule-kit\u002Fi18n","3.modules\u002F5.platform\u002F1.module-kit\u002F4.i18n",{"title":399,"path":400,"stem":401},"Database helpers","\u002Fmodules\u002Fplatform\u002Fmodule-kit\u002Fdatabase","3.modules\u002F5.platform\u002F1.module-kit\u002F5.database",{"title":403,"path":404,"stem":405},"Notify","\u002Fmodules\u002Fplatform\u002Fnotify","3.modules\u002F5.platform\u002F2.notify",{"title":407,"path":408,"stem":409,"children":410},"Email Templates","\u002Fmodules\u002Fplatform\u002Femail-templates","3.modules\u002F5.platform\u002F3.email-templates\u002Findex",[411,412,416,419],{"title":173,"path":408,"stem":409},{"title":413,"path":414,"stem":415},"Email components","\u002Fmodules\u002Fplatform\u002Femail-templates\u002Fcomponents","3.modules\u002F5.platform\u002F3.email-templates\u002F2.components",{"title":175,"path":417,"stem":418},"\u002Fmodules\u002Fplatform\u002Femail-templates\u002Fserver","3.modules\u002F5.platform\u002F3.email-templates\u002F3.server",{"title":420,"path":421,"stem":422},"Module emails","\u002Fmodules\u002Fplatform\u002Femail-templates\u002Fmodule-emails","3.modules\u002F5.platform\u002F3.email-templates\u002F4.module-emails",{"title":424,"path":425,"stem":426,"children":427},"Base Layer","\u002Fmodules\u002Fplatform\u002Fbase-layer","3.modules\u002F5.platform\u002F4.base-layer\u002Findex",[428,429,433,437],{"title":173,"path":425,"stem":426},{"title":430,"path":431,"stem":432},"Content collections","\u002Fmodules\u002Fplatform\u002Fbase-layer\u002Fcontent-collections","3.modules\u002F5.platform\u002F4.base-layer\u002F2.content-collections",{"title":434,"path":435,"stem":436},"Layouts and routing","\u002Fmodules\u002Fplatform\u002Fbase-layer\u002Flayouts-and-routing","3.modules\u002F5.platform\u002F4.base-layer\u002F3.layouts-and-routing",{"title":438,"path":439,"stem":440},"Composables and utils","\u002Fmodules\u002Fplatform\u002Fbase-layer\u002Fcomposables-and-utils","3.modules\u002F5.platform\u002F4.base-layer\u002F4.composables-and-utils",{"title":442,"icon":443,"path":444,"stem":445,"children":446,"page":49},"Examples","i-lucide-code-xml","\u002Fexamples","4.examples",[447,466,476],{"title":448,"icon":49,"path":449,"stem":450,"children":451,"page":49},"Starters","\u002Fexamples\u002Fstarters","4.examples\u002F1.starters",[452,456,461],{"title":453,"path":454,"stem":455,"icon":6},"Workspace starter","\u002Fexamples\u002Fstarters\u002Fworkspace","4.examples\u002F1.starters\u002F1.workspace",{"title":457,"path":458,"stem":459,"icon":460},"Mobile starter","\u002Fexamples\u002Fstarters\u002Fmobile","4.examples\u002F1.starters\u002F2.mobile","i-lucide-smartphone",{"title":462,"path":463,"stem":464,"icon":465},"Standalone mobile starter","\u002Fexamples\u002Fstarters\u002Fmobile-standalone","4.examples\u002F1.starters\u002F3.mobile-standalone","i-lucide-tablet-smartphone",{"title":467,"icon":49,"path":468,"stem":469,"children":470,"page":49},"Apps","\u002Fexamples\u002Fapps","4.examples\u002F2.apps",[471],{"title":472,"path":473,"stem":474,"icon":475},"Frigear website app","\u002Fexamples\u002Fapps\u002Ffrigear-nu-website","4.examples\u002F2.apps\u002F1.frigear-nu-website","i-lucide-layout-dashboard",{"title":477,"icon":49,"path":478,"stem":479,"children":480,"page":49},"Tasks","\u002Fexamples\u002Ftasks","4.examples\u002F3.tasks",[481,485,489,494,499],{"title":482,"path":483,"stem":484,"icon":70},"Protect a route","\u002Fexamples\u002Ftasks\u002Fprotect-a-route","4.examples\u002F3.tasks\u002F1.protect-a-route",{"title":486,"path":487,"stem":488,"icon":475},"Add an admin page","\u002Fexamples\u002Ftasks\u002Fadd-an-admin-page","4.examples\u002F3.tasks\u002F2.add-an-admin-page",{"title":490,"path":491,"stem":492,"icon":493},"Sell event tickets","\u002Fexamples\u002Ftasks\u002Fsell-event-tickets","4.examples\u002F3.tasks\u002F3.sell-event-tickets","i-lucide-ticket",{"title":495,"path":496,"stem":497,"icon":498},"Build a form","\u002Fexamples\u002Ftasks\u002Fbuild-a-form","4.examples\u002F3.tasks\u002F4.build-a-form","i-lucide-clipboard-list",{"title":500,"path":501,"stem":502,"icon":503},"Send an email","\u002Fexamples\u002Ftasks\u002Fsend-an-email","4.examples\u002F3.tasks\u002F5.send-an-email","i-lucide-mail",{"title":505,"icon":506,"path":507,"stem":508,"children":509,"page":49},"Contribute","i-lucide-git-pull-request","\u002Fcontribute","5.contribute",[510,513,518,544,549,552,556,571],{"title":173,"path":511,"stem":512,"icon":506},"\u002Fcontribute\u002Foverview","5.contribute\u002F1.overview",{"title":514,"path":515,"stem":516,"icon":517},"Local development","\u002Fcontribute\u002Flocal-development","5.contribute\u002F2.local-development","i-lucide-terminal",{"title":519,"icon":49,"path":520,"stem":521,"children":522,"page":49},"Writing a module","\u002Fcontribute\u002Fwriting-a-module","5.contribute\u002F3.writing-a-module",[523,527,532,536,541],{"title":524,"path":525,"stem":526,"icon":39},"Scaffold a module","\u002Fcontribute\u002Fwriting-a-module\u002Fscaffold","5.contribute\u002F3.writing-a-module\u002F1.scaffold",{"title":528,"path":529,"stem":530,"icon":531},"Setup checklist","\u002Fcontribute\u002Fwriting-a-module\u002Fsetup-checklist","5.contribute\u002F3.writing-a-module\u002F2.setup-checklist","i-lucide-list-checks",{"title":533,"path":534,"stem":535,"icon":44},"Database tables","\u002Fcontribute\u002Fwriting-a-module\u002Fdatabase-tables","5.contribute\u002F3.writing-a-module\u002F3.database-tables",{"title":537,"path":538,"stem":539,"icon":540},"Testing","\u002Fcontribute\u002Fwriting-a-module\u002Ftesting","5.contribute\u002F3.writing-a-module\u002F4.testing","i-lucide-flask-conical",{"title":67,"path":542,"stem":543,"icon":70},"\u002Fcontribute\u002Fwriting-a-module\u002Faccess-control","5.contribute\u002F3.writing-a-module\u002F5.access-control",{"title":545,"path":546,"stem":547,"icon":548},"Publishing","\u002Fcontribute\u002Fpublishing","5.contribute\u002F4.publishing","i-lucide-package-check",{"title":448,"path":550,"stem":551,"icon":6},"\u002Fcontribute\u002Fstarters","5.contribute\u002F5.starters",{"title":553,"path":554,"stem":555,"icon":52},"Documentation","\u002Fcontribute\u002Fdocumentation","5.contribute\u002F6.documentation",{"title":557,"icon":49,"path":558,"stem":559,"children":560,"page":49},"Tooling","\u002Fcontribute\u002Ftooling","5.contribute\u002F7.tooling",[561,566],{"title":562,"path":563,"stem":564,"icon":565},"CLI","\u002Fcontribute\u002Ftooling\u002Fcli","5.contribute\u002F7.tooling\u002F1.cli","i-lucide-square-terminal",{"title":567,"path":568,"stem":569,"icon":570},"ESLint config","\u002Fcontribute\u002Ftooling\u002Feslint-config","5.contribute\u002F7.tooling\u002F2.eslint-config","i-lucide-spell-check",{"title":572,"icon":49,"path":573,"stem":574,"children":575},"Decisions","\u002Fcontribute\u002Fdecisions","5.contribute\u002F8.decisions\u002Findex",[576,578,583],{"title":572,"path":573,"stem":574,"icon":577},"i-lucide-scale",{"title":579,"path":580,"stem":581,"icon":582},"Session lifetimes per OAuth client","\u002Fcontribute\u002Fdecisions\u002Foauth-token-lifetimes","5.contribute\u002F8.decisions\u002F1.oauth-token-lifetimes","i-lucide-timer",{"title":584,"path":585,"stem":586,"icon":70},"One permission model","\u002Fcontribute\u002Fdecisions\u002Fpermission-model","5.contribute\u002F8.decisions\u002F2.permission-model",{"id":588,"title":589,"body":590,"description":1656,"extension":1657,"links":1658,"meta":1659,"navigation":1660,"path":373,"seo":1661,"stem":374,"__hash__":1662},"docs\u002F3.modules\u002F4.interface\u002F5.mobile\u002F3.splash-screen.md","Mobile splash screen",{"type":591,"value":592,"toc":1648},"minimark",[593,601,606,609,649,660,737,741,754,924,1073,1080,1097,1101,1112,1214,1221,1238,1242,1252,1306,1321,1450,1453,1544,1554,1558,1561,1614,1621,1627,1631,1644],[594,595,596,597,600],"p",{},"This page covers the splash screen of a Mobile app: what it shows, how to replace it and how to keep it up while the\napp starts. It is for app developers. Set up the module first: ",[598,599,173],"a",{"href":363},".",[602,603,605],"h2",{"id":604},"what-you-get","What you get",[594,607,608],{},"An app starts in three steps, and the splash screen covers the middle one:",[610,611,612,625,635],"ol",{},[613,614,615,619,620,624],"li",{},[616,617,618],"strong",{},"The native launch screen."," iOS and Android show it while the WebView loads. With ",[621,622,623],"code",{},"@capacitor\u002Fsplash-screen","\ninstalled, it stays up until step 2 has painted.",[613,626,627,630,631,634],{},[616,628,629],{},"The splash screen."," It is a component, mounted before the first page renders. The default one shows the app's\nlogo, or the first letter of ",[621,632,633],{},"appName"," in a tile, at the centre of the screen. The app name then fades in under it.\nWhile it is up, the navbar and tab bar are hidden. That includes the native ones, which are drawn above the WebView.",[613,636,637,640,641,644,645,600],{},[616,638,639],{},"The app."," The splash screen fades out once the first page has rendered, it has been up for ",[621,642,643],{},"minDuration",", and\nnothing ",[598,646,648],{"href":647},"#keep-it-up","holds it",[594,650,651,652,655,656,659],{},"It is off by default: without ",[621,653,654],{},"splashScreen",", the module adds no splash screen, no plugin and no Capacitor\n",[621,657,658],{},"SplashScreen"," config. Turn it on with:",[661,662,668],"pre",{"className":663,"code":664,"filename":665,"language":666,"meta":667,"style":667},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  mobile: {\n    splashScreen: true,\n  },\n})\n","nuxt.config.ts","ts","",[621,669,670,694,707,722,728],{"__ignoreMap":667},[671,672,675,679,682,686,690],"span",{"class":673,"line":674},"line",1,[671,676,678],{"class":677},"s7zQu","export",[671,680,681],{"class":677}," default",[671,683,685],{"class":684},"s2Zo4"," defineNuxtConfig",[671,687,689],{"class":688},"sTEyZ","(",[671,691,693],{"class":692},"sMK4o","{\n",[671,695,697,701,704],{"class":673,"line":696},2,[671,698,700],{"class":699},"swJcz","  mobile",[671,702,703],{"class":692},":",[671,705,706],{"class":692}," {\n",[671,708,710,713,715,719],{"class":673,"line":709},3,[671,711,712],{"class":699},"    splashScreen",[671,714,703],{"class":692},[671,716,718],{"class":717},"sfNiH"," true",[671,720,721],{"class":692},",\n",[671,723,725],{"class":673,"line":724},4,[671,726,727],{"class":692},"  },\n",[671,729,731,734],{"class":673,"line":730},5,[671,732,733],{"class":692},"}",[671,735,736],{"class":688},")\n",[602,738,740],{"id":739},"options","Options",[594,742,743,745,746,749,750,753],{},[621,744,654],{}," takes ",[621,747,748],{},"true",", ",[621,751,752],{},"false"," (the default), the name of a component, or an object. A string or an object turns\nit on too:",[661,755,757],{"className":663,"code":756,"filename":665,"language":666,"meta":667,"style":667},"export default defineNuxtConfig({\n  mobile: {\n    splashScreen: {\n      component: 'BrandSplash', \u002F\u002F default 'MobileSplashScreen'\n      logo: '\u002Flogo.svg',\n      background: { light: '#ffffff', dark: '#0a0a0a' },\n      minDuration: 400,\n      maxDuration: 10000,\n      native: true,\n    },\n  },\n})\n",[621,758,759,771,779,787,811,827,867,881,894,906,912,917],{"__ignoreMap":667},[671,760,761,763,765,767,769],{"class":673,"line":674},[671,762,678],{"class":677},[671,764,681],{"class":677},[671,766,685],{"class":684},[671,768,689],{"class":688},[671,770,693],{"class":692},[671,772,773,775,777],{"class":673,"line":696},[671,774,700],{"class":699},[671,776,703],{"class":692},[671,778,706],{"class":692},[671,780,781,783,785],{"class":673,"line":709},[671,782,712],{"class":699},[671,784,703],{"class":692},[671,786,706],{"class":692},[671,788,789,792,794,797,801,804,807],{"class":673,"line":724},[671,790,791],{"class":699},"      component",[671,793,703],{"class":692},[671,795,796],{"class":692}," '",[671,798,800],{"class":799},"sfazB","BrandSplash",[671,802,803],{"class":692},"'",[671,805,806],{"class":692},",",[671,808,810],{"class":809},"sHwdD"," \u002F\u002F default 'MobileSplashScreen'\n",[671,812,813,816,818,820,823,825],{"class":673,"line":730},[671,814,815],{"class":699},"      logo",[671,817,703],{"class":692},[671,819,796],{"class":692},[671,821,822],{"class":799},"\u002Flogo.svg",[671,824,803],{"class":692},[671,826,721],{"class":692},[671,828,830,833,835,838,841,843,845,848,850,852,855,857,859,862,864],{"class":673,"line":829},6,[671,831,832],{"class":699},"      background",[671,834,703],{"class":692},[671,836,837],{"class":692}," {",[671,839,840],{"class":699}," light",[671,842,703],{"class":692},[671,844,796],{"class":692},[671,846,847],{"class":799},"#ffffff",[671,849,803],{"class":692},[671,851,806],{"class":692},[671,853,854],{"class":699}," dark",[671,856,703],{"class":692},[671,858,796],{"class":692},[671,860,861],{"class":799},"#0a0a0a",[671,863,803],{"class":692},[671,865,866],{"class":692}," },\n",[671,868,870,873,875,879],{"class":673,"line":869},7,[671,871,872],{"class":699},"      minDuration",[671,874,703],{"class":692},[671,876,878],{"class":877},"sbssI"," 400",[671,880,721],{"class":692},[671,882,884,887,889,892],{"class":673,"line":883},8,[671,885,886],{"class":699},"      maxDuration",[671,888,703],{"class":692},[671,890,891],{"class":877}," 10000",[671,893,721],{"class":692},[671,895,897,900,902,904],{"class":673,"line":896},9,[671,898,899],{"class":699},"      native",[671,901,703],{"class":692},[671,903,718],{"class":717},[671,905,721],{"class":692},[671,907,909],{"class":673,"line":908},10,[671,910,911],{"class":692},"    },\n",[671,913,915],{"class":673,"line":914},11,[671,916,727],{"class":692},[671,918,920,922],{"class":673,"line":919},12,[671,921,733],{"class":692},[671,923,736],{"class":688},[925,926,927,946],"table",{},[928,929,930],"thead",{},[931,932,933,937,940,943],"tr",{},[934,935,936],"th",{},"Option",[934,938,939],{},"Type",[934,941,942],{},"Default",[934,944,945],{},"Purpose",[947,948,949,970,990,1012,1031,1054],"tbody",{},[931,950,951,957,962,967],{},[952,953,954],"td",{},[621,955,956],{},"component",[952,958,959],{},[621,960,961],{},"string",[952,963,964],{},[621,965,966],{},"'MobileSplashScreen'",[952,968,969],{},"The component shown, by name.",[931,971,972,977,981,987],{},[952,973,974],{},[621,975,976],{},"logo",[952,978,979],{},[621,980,961],{},[952,982,983,984,986],{},"none: the first letter of ",[621,985,633],{}," in a tile",[952,988,989],{},"The default splash screen's logo, a public path or URL.",[931,991,992,997,1002,1009],{},[952,993,994],{},[621,995,996],{},"background",[952,998,999],{},[621,1000,1001],{},"{ light?, dark? }",[952,1003,1004,1006,1007],{},[621,1005,847],{}," and ",[621,1008,861],{},[952,1010,1011],{},"The default splash screen's background in light and dark mode.",[931,1013,1014,1018,1023,1028],{},[952,1015,1016],{},[621,1017,643],{},[952,1019,1020],{},[621,1021,1022],{},"number",[952,1024,1025],{},[621,1026,1027],{},"400",[952,1029,1030],{},"Milliseconds it stays up at least, so a fast start does not flash it.",[931,1032,1033,1038,1042,1047],{},[952,1034,1035],{},[621,1036,1037],{},"maxDuration",[952,1039,1040],{},[621,1041,1022],{},[952,1043,1044],{},[621,1045,1046],{},"10000",[952,1048,1049,1050,1053],{},"Milliseconds after which it hides, even if the app still holds it. ",[621,1051,1052],{},"0"," for no limit.",[931,1055,1056,1061,1066,1070],{},[952,1057,1058],{},[621,1059,1060],{},"native",[952,1062,1063],{},[621,1064,1065],{},"boolean",[952,1067,1068],{},[621,1069,748],{},[952,1071,1072],{},"Keep the native launch screen up until the splash screen has painted.",[594,1074,1075,1076,1079],{},"While the splash screen is off, ",[621,1077,1078],{},"useMobileSplash()"," still works and every call does nothing, so a module or plugin can\nhold it without knowing whether the app turned it on.",[594,1081,1082,749,1084,1006,1086,1088,1089,1092,1093,1096],{},[621,1083,643],{},[621,1085,1037],{},[621,1087,976],{}," can also be changed per environment at runtime, with\n",[621,1090,1091],{},"runtimeConfig.public.mobile.splashScreen"," (for example ",[621,1094,1095],{},"NUXT_PUBLIC_MOBILE_SPLASH_SCREEN_MIN_DURATION","). The component\nis chosen at build time.",[602,1098,1100],{"id":1099},"replace-it","Replace it",[594,1102,1103,1104,1107,1108,1111],{},"Turn the splash screen on and add ",[621,1105,1106],{},"app\u002Fcomponents\u002FMobile\u002FSplashScreen.vue"," to the app. Nuxt registers it as\n",[621,1109,1110],{},"MobileSplashScreen",", and the app's component wins over the module's.",[661,1113,1117],{"className":1114,"code":1115,"filename":1106,"language":1116,"meta":667,"style":667},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cdiv class=\"grid place-items-center bg-primary\">\n    \u003Cimg src=\"\u002Flogo-white.svg\" class=\"size-20\" alt=\"\">\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue",[621,1118,1119,1130,1155,1196,1205],{"__ignoreMap":667},[671,1120,1121,1124,1127],{"class":673,"line":674},[671,1122,1123],{"class":692},"\u003C",[671,1125,1126],{"class":699},"template",[671,1128,1129],{"class":692},">\n",[671,1131,1132,1135,1138,1142,1145,1148,1151,1153],{"class":673,"line":696},[671,1133,1134],{"class":692},"  \u003C",[671,1136,1137],{"class":699},"div",[671,1139,1141],{"class":1140},"spNyl"," class",[671,1143,1144],{"class":692},"=",[671,1146,1147],{"class":692},"\"",[671,1149,1150],{"class":799},"grid place-items-center bg-primary",[671,1152,1147],{"class":692},[671,1154,1129],{"class":692},[671,1156,1157,1160,1163,1166,1168,1170,1173,1175,1177,1179,1181,1184,1186,1189,1191,1194],{"class":673,"line":709},[671,1158,1159],{"class":692},"    \u003C",[671,1161,1162],{"class":699},"img",[671,1164,1165],{"class":1140}," src",[671,1167,1144],{"class":692},[671,1169,1147],{"class":692},[671,1171,1172],{"class":799},"\u002Flogo-white.svg",[671,1174,1147],{"class":692},[671,1176,1141],{"class":1140},[671,1178,1144],{"class":692},[671,1180,1147],{"class":692},[671,1182,1183],{"class":799},"size-20",[671,1185,1147],{"class":692},[671,1187,1188],{"class":1140}," alt",[671,1190,1144],{"class":692},[671,1192,1193],{"class":692},"\"\"",[671,1195,1129],{"class":692},[671,1197,1198,1201,1203],{"class":673,"line":724},[671,1199,1200],{"class":692},"  \u003C\u002F",[671,1202,1137],{"class":699},[671,1204,1129],{"class":692},[671,1206,1207,1210,1212],{"class":673,"line":730},[671,1208,1209],{"class":692},"\u003C\u002F",[671,1211,1126],{"class":699},[671,1213,1129],{"class":692},[594,1215,1216,1217,1220],{},"To keep a component under another name, pass it: ",[621,1218,1219],{},"splashScreen: 'BrandSplash'",". The build fails when no component of\nthat name exists.",[594,1222,1223,1224,1227,1228,1006,1231,1234,1235,1237],{},"The module positions the component over the whole screen (",[621,1225,1226],{},"position: fixed; inset: 0",") and handles hiding it. Your\ncomponent only draws the screen. On the way out the module fades it and scales it up a little. To change that, style\nthe ",[621,1229,1230],{},".mobile-splash-leave-active",[621,1232,1233],{},".mobile-splash-leave-to"," classes. Inside the component, ",[621,1236,1078],{},",\ni18n and your other components work as on any page.",[602,1239,1241],{"id":1240},"keep-it-up","Keep it up",[594,1243,1244,1245,1247,1248,1251],{},"The module only waits for the first page. Whatever else the app needs before it shows itself is the app's decision:\nthe sign-in state, a first fetch or remote config. The app holds the splash screen with ",[621,1246,1078],{}," from a\nplugin, ",[621,1249,1250],{},"app.vue"," or route middleware.",[925,1253,1254,1264],{},[928,1255,1256],{},[931,1257,1258,1261],{},[934,1259,1260],{},"Member",[934,1262,1263],{},"What it does",[947,1265,1266,1276,1286,1296],{},[931,1267,1268,1273],{},[952,1269,1270],{},[621,1271,1272],{},"visible",[952,1274,1275],{},"Whether the splash screen is up (a computed ref).",[931,1277,1278,1283],{},[952,1279,1280],{},[621,1281,1282],{},"hold()",[952,1284,1285],{},"Keeps it up until you call the function it returns.",[931,1287,1288,1293],{},[952,1289,1290],{},[621,1291,1292],{},"waitFor(promise)",[952,1294,1295],{},"Keeps it up until the promise settles, fulfilled or rejected. Returns the promise.",[931,1297,1298,1303],{},[952,1299,1300],{},[621,1301,1302],{},"hide()",[952,1304,1305],{},"Hides it now, whatever holds it.",[594,1307,1308,1309,1312,1313,1316,1317,1320],{},"Keep it up until the sign-in state is known, so a signed-out screen never flashes before the session is restored.\nWith ",[621,1310,1311],{},"@frigear-nu\u002Fauth"," in client mode, ",[621,1314,1315],{},"status"," is ",[621,1318,1319],{},"unknown"," until then:",[661,1322,1325],{"className":663,"code":1323,"filename":1324,"language":666,"meta":667,"style":667},"export default defineNuxtPlugin(() => {\n  const { status } = useAuth()\n  const release = useMobileSplash().hold()\n  \u002F\u002F `release` only counts once, so the watcher can stay.\n  watch(status, value => value !== 'unknown' && release(), { immediate: true })\n})\n","app\u002Fplugins\u002Fsplash.client.ts",[621,1326,1327,1346,1368,1389,1394,1444],{"__ignoreMap":667},[671,1328,1329,1331,1333,1336,1338,1341,1344],{"class":673,"line":674},[671,1330,678],{"class":677},[671,1332,681],{"class":677},[671,1334,1335],{"class":684}," defineNuxtPlugin",[671,1337,689],{"class":688},[671,1339,1340],{"class":692},"()",[671,1342,1343],{"class":1140}," =>",[671,1345,706],{"class":692},[671,1347,1348,1351,1353,1356,1359,1362,1365],{"class":673,"line":696},[671,1349,1350],{"class":1140},"  const",[671,1352,837],{"class":692},[671,1354,1355],{"class":688}," status",[671,1357,1358],{"class":692}," }",[671,1360,1361],{"class":692}," =",[671,1363,1364],{"class":684}," useAuth",[671,1366,1367],{"class":699},"()\n",[671,1369,1370,1372,1375,1377,1380,1382,1384,1387],{"class":673,"line":709},[671,1371,1350],{"class":1140},[671,1373,1374],{"class":688}," release",[671,1376,1361],{"class":692},[671,1378,1379],{"class":684}," useMobileSplash",[671,1381,1340],{"class":699},[671,1383,600],{"class":692},[671,1385,1386],{"class":684},"hold",[671,1388,1367],{"class":699},[671,1390,1391],{"class":673,"line":724},[671,1392,1393],{"class":809},"  \u002F\u002F `release` only counts once, so the watcher can stay.\n",[671,1395,1396,1399,1401,1403,1405,1409,1411,1413,1416,1418,1420,1422,1425,1427,1429,1431,1433,1436,1438,1440,1442],{"class":673,"line":730},[671,1397,1398],{"class":684},"  watch",[671,1400,689],{"class":699},[671,1402,1315],{"class":688},[671,1404,806],{"class":692},[671,1406,1408],{"class":1407},"sHdIc"," value",[671,1410,1343],{"class":1140},[671,1412,1408],{"class":688},[671,1414,1415],{"class":692}," !==",[671,1417,796],{"class":692},[671,1419,1319],{"class":799},[671,1421,803],{"class":692},[671,1423,1424],{"class":692}," &&",[671,1426,1374],{"class":684},[671,1428,1340],{"class":699},[671,1430,806],{"class":692},[671,1432,837],{"class":692},[671,1434,1435],{"class":699}," immediate",[671,1437,703],{"class":692},[671,1439,718],{"class":717},[671,1441,1358],{"class":692},[671,1443,736],{"class":699},[671,1445,1446,1448],{"class":673,"line":829},[671,1447,733],{"class":692},[671,1449,736],{"class":688},[594,1451,1452],{},"Hold it for the first route's own data:",[661,1454,1457],{"className":663,"code":1455,"filename":1456,"language":666,"meta":667,"style":667},"export default defineNuxtRouteMiddleware(async () => {\n  const release = useMobileSplash().hold()\n  try {\n    await loadRemoteConfig()\n  }\n  finally {\n    release()\n  }\n})\n","app\u002Fmiddleware\u002Fremote-config.global.ts",[621,1458,1459,1480,1498,1505,1515,1520,1527,1534,1538],{"__ignoreMap":667},[671,1460,1461,1463,1465,1468,1470,1473,1476,1478],{"class":673,"line":674},[671,1462,678],{"class":677},[671,1464,681],{"class":677},[671,1466,1467],{"class":684}," defineNuxtRouteMiddleware",[671,1469,689],{"class":688},[671,1471,1472],{"class":1140},"async",[671,1474,1475],{"class":692}," ()",[671,1477,1343],{"class":1140},[671,1479,706],{"class":692},[671,1481,1482,1484,1486,1488,1490,1492,1494,1496],{"class":673,"line":696},[671,1483,1350],{"class":1140},[671,1485,1374],{"class":688},[671,1487,1361],{"class":692},[671,1489,1379],{"class":684},[671,1491,1340],{"class":699},[671,1493,600],{"class":692},[671,1495,1386],{"class":684},[671,1497,1367],{"class":699},[671,1499,1500,1503],{"class":673,"line":709},[671,1501,1502],{"class":677},"  try",[671,1504,706],{"class":692},[671,1506,1507,1510,1513],{"class":673,"line":724},[671,1508,1509],{"class":677},"    await",[671,1511,1512],{"class":684}," loadRemoteConfig",[671,1514,1367],{"class":699},[671,1516,1517],{"class":673,"line":730},[671,1518,1519],{"class":692},"  }\n",[671,1521,1522,1525],{"class":673,"line":829},[671,1523,1524],{"class":677},"  finally",[671,1526,706],{"class":692},[671,1528,1529,1532],{"class":673,"line":869},[671,1530,1531],{"class":684},"    release",[671,1533,1367],{"class":699},[671,1535,1536],{"class":673,"line":883},[671,1537,1519],{"class":692},[671,1539,1540,1542],{"class":673,"line":896},[671,1541,733],{"class":692},[671,1543,736],{"class":688},[594,1545,1546,1547,1549,1550,1553],{},"A hold you never release hides after ",[621,1548,1037],{},". A rejected ",[621,1551,1552],{},"waitFor"," promise also releases its hold, so a failed\nstart shows the app and its error instead of a splash screen forever.",[602,1555,1557],{"id":1556},"match-the-native-launch-screen","Match the native launch screen",[594,1559,1560],{},"The splash screen only looks seamless when the native launch image looks the same: the same background, and the same\nlogo in the same place.",[610,1562,1563,1586,1608],{},[613,1564,1565,1566,1569,1570,1573,1574,1577,1578,1581,1582,1585],{},"Install the plugin in the app: ",[621,1567,1568],{},"pnpm add @capacitor\u002Fsplash-screen",". ",[621,1571,1572],{},"frigear-mobile doctor"," lists it while it is\nmissing. The module sets ",[621,1575,1576],{},"plugins.SplashScreen"," in the Capacitor config to\n",[621,1579,1580],{},"{ launchAutoHide: false, launchFadeOutDuration: 0 }",". A value in your own ",[621,1583,1584],{},"capacitor.config"," wins.",[613,1587,1588,1589,1591,1592,1600,1601,1604,1605,600],{},"Make the launch images from the logo and the backgrounds of your ",[621,1590,654],{}," options, for example with\n",[598,1593,1597],{"href":1594,"rel":1595},"https:\u002F\u002Fgithub.com\u002Fionic-team\u002Fcapacitor-assets",[1596],"nofollow",[621,1598,1599],{},"@capacitor\u002Fassets",". Use the logo at the centre on ",[621,1602,1603],{},"background.light",",\nand a dark variant on ",[621,1606,1607],{},"background.dark",[613,1609,1610,1613],{},[621,1611,1612],{},"npx cap sync",", then cold-start the app and check that the logo does not move or jump when the splash screen takes\nover.",[594,1615,1616,1617,1620],{},"The default splash screen draws its logo at 88 × 88 CSS pixels at the exact centre of the screen, not of the safe\narea, because a native launch image is centred on the screen. Capacitor's launch image fills the screen\n(",[621,1618,1619],{},"scaleAspectFill","), so the logo's size on screen depends on the device's height. Size it for the devices you check\non.",[594,1622,1623,1626],{},[621,1624,1625],{},"splashScreen.native: false"," leaves the native launch screen to your Capacitor config, so it hides on its own timer.",[602,1628,1630],{"id":1629},"next-steps","Next steps",[1632,1633,1634,1639],"ul",{},[613,1635,1636,1638],{},[598,1637,173],{"href":363},": the other options, composables and components.",[613,1640,1641,1643],{},[598,1642,368],{"href":369},": run the app in the iOS Simulator to see the launch.",[1645,1646,1647],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":667,"searchDepth":696,"depth":696,"links":1649},[1650,1651,1652,1653,1654,1655],{"id":604,"depth":696,"text":605},{"id":739,"depth":696,"text":740},{"id":1099,"depth":696,"text":1100},{"id":1240,"depth":696,"text":1241},{"id":1556,"depth":696,"text":1557},{"id":1629,"depth":696,"text":1630},"An opt-in splash screen from the native launch image to the first page, with a default you can replace.","md",null,{},{"title":372},{"title":589,"description":1656},"-4HXW2EapBTMG4lhs-7IDT8OUVuQ8eNIqZ39gNcHQ4E",[1664,1666],{"title":368,"path":369,"stem":370,"description":1665,"children":-1},"Add the native projects, test the app on a phone against your own machine and prepare a release.",{"title":173,"path":382,"stem":383,"description":1667,"children":-1},"The shared helpers every Frigear module is built on, so modules register pages, routes and tables the same way.",1794503155997]