Helpers

The following helper functions can be used to achieve advanced setup of your application. For practical usage, see the Getting Started guide and Lazy imports for lazy import helpers.

Setup helpers

The recommended way to register and mount components:

• registerComponent — register and mount components independently (recommended)
• registerComponents — register and mount several components at once
• defineFeatures — configure global features (breakpoints, attributes, prefix)
• createApp — bootstrap a root App class (when you need a central app instance)

Instance helpers

Some helpers can be used to work with instances.

• getClosestParent
• getDirectChildren
• getInstanceFromElement
• getInstances
• isDirectChild

Query helpers

The following helpers let you find component instances by name, CSS selector, and state — without relying on parent/children relationships.

• queryComponent / queryComponentAll
• closestComponent

Lazy import helpers

Some components might not need to be imported and instantiated immediately on page load. The following functions let you define when to import these components.

• importOnInteraction
• importWhenIdle
• importWhenVisible
• importOnMediaQuery
• importWhenPrefersMotion

Debug helpers

• logTree — log the component tree to the console