---
title: "Layouts"
description: "This example shows how to define default and custom layouts."
canonical_url: "https://nuxt.com/docs/4.x/examples/features/layouts"
---
# Layouts

> This example shows how to define default and custom layouts.

<code-explorer default-value="pages/index.vue" path="examples/features/layouts">



</code-explorer>

<browser src="https://layouts.example.nuxt.space">



</browser>

<read-more to="https://nuxt.com/docs/getting-started/views#layouts">



</read-more>

<read-more to="https://nuxt.com/docs/guide/directory-structure/layouts">



</read-more>

---

- [Source](https://github.com/nuxt/examples/tree/main/examples/features/layouts)


## Sitemap

See the full [sitemap](https://nuxt.com/sitemap.md) for all pages.