Sometime you may need to override components used in base layers. Instead of editing them directly, copy them in your <app>/components folder and edit them there.

This way, you can still get updates from the base layers without losing your changes.

•Example 1: Override sidebar navigation

In the tairo-sidebar layer, the navigation items can be set within the app.config.ts.

This allow to quickly setup navigation, however, if you need to translate items or display them conditionally (if they are logged-in or depending on user permission) you won't be able to use the configuration.

Instead, you can override the component in your app by creating one in your <app>/components folder using same name of one you want to override.

In our example, we need to override <TairoSidebarNavigation> . First, copy initial component from the source (this one is located in layers/tairo-layout-sidebar/components/TairoSidebarNavigation.vue)

The example bellow show how to use our own rules to display <TairoSidebarNavigationItem> instead of using the app config:

•Example 2: Override Shuriken UI components

You can override any component from any layers, not only the ones from Tairo layers.

For example, you can override the <BaseProse> component from the @shuriken-ui/nuxt layer, which is loaded by tairo base layer. This will allow to customize the typography of your app.

First, we need to find the original component. In this case, it is located in the github repository of the @shuriken-ui/nuxt layer here: https://github.com/shuriken-ui/nuxt/blob/v3.1.1/components/base/BaseProse.vue

•Example 3: Override nuxt content components

If you plan to use nuxt content module, you may want to override the components used to render the content.

As an example, this documentation is written using nuxt content, and we have overridden the components to match the design of the app.

First, you need to find the original components. In this case, they are located in the github repository of the mdc module here: https://github.com/nuxt-modules/mdc/tree/main/src/runtime/components/prose

Let's say we want to override the ProseLi component. Copy the original component in your <app>/components folder and edit it there.