Components

Component files are used to define the interface of your application. They allow you to create reusable visual elements throughout your project.

Component configuration

When selecting a component file, you'll get a few configuration options in the inspector panel. Here are the most common ones:

• Component - This allows you to toggle between the page and component mode, as well as changing the preview mode.
• Properties - Here, you can add custom properties which will be available as variable inside your component.
• Variables - Those will be the variables you want to use, but not exposed as properties.
• Computed - The computed variables are variables whose value is automatically recalculated based on other variables or conditions.
• Events - This is where you can define the events that can be triggered by your component.
• Default - In this section, you can write the default value of your properties and variables.

Layout tree

The layout tree accessible in the options panel allows you to build the architecture of your component. To add an element to the tree, simply click on the

button. Some of the elements can have children. Those kind of emplacement to put children are called slots.

There are a few options at your disposal for each layout element, here are the most common ones:

• Block - Most basic element type, it's just a box that can have children.
• UI Library - Pre-made UI elements to speed up the building of your app.
• Component - Use one the custom components you created.
• Slot - Indicate where the children of this component should go.
• Template - This allows you to do conditional or loop rendering.
• Custom text - Write markdown text.
• Custom HTML - Write custom HTML code.
• Variable - Use this kind of element to display a variable.

Pages

To define a component as a page, simply change its type in the inspector. You can then define a path to access the page. The main page of your application will always be / (with nothing following).