Layouts are used to define the structure of your page. Tairo has multiple layout options (two at the moment and more in the future), they mostly differ by how the navigation experience is handled.

• <TairoSidebarLayout> :
  This layout is provided by tairo-layout-sidebar layer, it's the default layout used on the demo app.
• <TairoCollapseLayout> :
  This layout is provided by tairo-layout-collapse layer, it has better navigation experience when few items are needed to be displayed.
• <TairoTopnavLayout> :
  This layout is provided by tairo-layout-topnav layer, it has better navigation experience when very few items are needed to be displayed.

Enable layout layers

To keep things simple, we grouped each layout in a dedicated nuxt layer, so they have their own set of components, composables, configuration and dependencies.

To enable a layout, you need to add it to the extends section of your .app/nuxt.config.ts file.

Assign layout to a page

Components that are defined in .app/pages/ (and any other pages/ folders of enabled layers) will be considered as pages. You can assign a layout to a page by adding the layout property to the definePageMeta macro.

Set default layout

Instead of setting the layout on each page, you can create a .app/layouts/default.vue component that will be used as the default layout for all pages. In this component, you just have to include the main component of the layout you want to use, in this case we use <TairoSidebarLayout>

Layout app config

As layouts differ by how the navigation experience is handled, they also have their own set of configuration options. In order to have a great developer experience, we defined a dedicated schema for each layout so you can have autocompletion in your .app/app.config.ts file.

This configuration depends on each layout, you'll be able to learn more about each one of these in the dedicated layout documentation, but here is a quick configuration example for the sidebar layout.

Find more information about how to setup navigation in the sidebar layout configuration documentation.

Force empty layout

You should still be able to optout from the default layout by setting the layout property to empty on a page.

Useful resources:

• Read pages and layouts guide on nuxt.com
• Learn about layouts directory on nuxt.com