Base Layer
Layouts and routing
The layouts and header and footer components you can replace, and how content files become routes.
This page covers the layouts, the components you can replace and the routes the layer adds, for app developers. Set up the layer first: Overview.
Layouts
The layer ships two layouts.
| Layout | Renders |
|---|---|
default | AppHeader, the page in a UMain, then AppFooter. |
page | The same, with the page wrapped in a UContainer. |
Both hide the header when the route sets meta.header = false, and the footer with meta.footer = false.
Components
Replace any of these components with a file at the same path in your app.
| Component | Purpose |
|---|---|
AppHeader | The site header: logo, main menu (useMenu('main') when @frigear-nu/menu is installed, else the configured navigation), language select (only with more than one locale), colour mode button (header.colorMode). |
AppHeaderLogo, AppHeaderCenter, AppHeaderBody, AppHeaderRight, AppHeaderCTA | Header slots. AppHeaderRight and AppHeaderCTA are empty placeholders meant to be overridden. |
AppFooter, AppFooterLeft, AppFooterRight | The footer, built from config.footer. |
AppLogo | The logo from config.logo, falling back to the site name. |
LanguageSelect | Locale dropdown that navigates with localizePath. |
IconMenuToggle | The mobile menu toggle. |
ContactForm | A content component with a contact form (its text is Norwegian). It posts to /api/_submit, which the layer does not provide. |
HeroBackground | A decorative hero background for content pages. |
Routing
Two files turn your content into routes:
- A catch-all page,
app/pages/[[lang]]/[...path].vue, renders thepagesdocument for the current route. It answers 404 when there is none. - A landing page template,
app/templates/LandingPage.vue, which theroutingmodule registers at/.
With locales, routing adds one landing route per locale (the default at /, others at /<code>). It also splits
the catch-all into one route per locale, so each route name carries its locale.
An
app/pages/index.vue in your app replaces the landing page, with a warning. Your app then routes locale roots
such as /en itself.Next steps
- Content collections – write the pages these routes render.
- Composables and utils – link between locales.