owl/doc/reference/mounting.md

🦉 Mounting an application 🦉

Content

• Overview
• API

Overview

Mounting an Owl application is done by using the mount method (available in owl.mount if you are using the iife build, or it can be directly imported from owl if you are using a module system):

const mount = { owl }; // if owl is available as an object

const env = { ... };
const app = await mount(MyComponent, { target: document.body, env });

Another example:

const config = {
  env: ...,
  props: ...,
  target: document.body,
  position: "self",
};
const app = await mount(App, config);

A common way to initialize an application is to first setup an environment, then to call the mount method.

API

Mount takes two parameters:

• C, which should be a component class (NOT instance),
• params, which is an object with the following keys:
  • target (HTMLElement | DocumentFragment): the target of the mount operation
  • env (optional, Env) an environment
  • position (optional, "first-child" | "last-child" | "self") the position where it should be mounted (see below for more informations)
  • props (optional, any): some initial values that are given as props. Useful when the root component is configurable, or when testing sub components

Here are the various positions supported by Owl:

• first-child: with this option, the component will be prepended inside the target,
• last-child (default value): with this option, the component will be appended in the target element,
• self: the target will be used as the root element for the component. This means that the target has to be an HTMLElement (and not a document fragment). In this situation, it is possible that the component cannot be unmounted. For example, if its target is document.body.

The mount method returns a promise that resolves to the instance of the created component.