Using components

This is how a basic application in fig looks like:


Below is a brief explanation of what each part of the application does, see the API reference for more detailed documentation.


The entry file of the fig application, sets the initial state, registers necessary components and finally mounts the app to the DOM.

fig() returns a new fig instance

app.use(component) registers a component.

app.state is an object containing your app's data. It should be set once, and include all object keys that your app will use.

app.mount(#el, componentName) replaces the specified element #el with a root component of the given componentName.


Contains the one component used by this particular application, uses pug's indented syntax. Note that only the template tag is required, you don't have to specify the other tags.

label sets the component's default name. If not provided, it is generated by figify from the filename - converting PascalCase names to kebab-case.

template contains pug markup which renders with locals which are set in script

style contents are dumbly appended to the head of your page inside an ordinary style tag, with no preprocessing. You can style components with normal css outside of the component file, this is only provided as a convenience.

script must export a function, which is evaluated every time fig attempts to render the component. The function should accept the following parameters:

view object is passed to the template

opts is either the app.state object if the component is the root component, otherwise contains the opts passed to the nested component.

emit is a function which can be used to emit events to the app's event bus.