Documentation

Tairo Layouts are provided by dedicated layers, allowing you to opt-in for the layouts you need. Each layout has its own set of components, composables, configuration and dependencies.

Layout layers reside in the layers/ directory of the Tairo repository. Here is a list of available layout layers:

bash

Choose a layout

You can choose a layout that fits your project requirements. Each layout has its own navigation experience.

tairo-layout-sidebar

Default layout used on the demo app.

+ pro: large number of navigation items

tairo-layout-collapse

+ pro: well balanced navigation

tairo-layout-topnav

+ pro: wide screen content

- con: few number of navigation items

tairo-layout-iconnav

+ pro: wide screen content

- con: low number of navigation items

Add the layout to your project

Depending if you are running from source or with github layers, you can add the layout to your project. Note that you can add as many as layout as you need.

ts

Create the default layout

By creating the default layout, every pages will use this layout unless specified otherwise.

vue
You can create additional layouts in the <app>/layouts/ directory. And use definePageMeta in your pages to assign a layout.

Configure the layout

Each layers has its own configuration, you can find more information in the dedicated layout documentation.

ts
You may find that the configuration does not allows you to behave as you need (ex: show items for only logged users, translate items, etc...), read Extending Tairo Layers guide to learn how to extend the layout.

Update the default app component

Replace the welcome message with the layout component.

vue

Done!

You have successfully added a layout to your project. You can now create your first page.


Useful resources: