How to use layout component astro

AstroHow-ToBeginner · 3 min read

How to Use Layout Component in Astro for Page Structure

In Astro, use a layout component by creating a component file that wraps your page content and then import it in your page with --- frontmatter. Wrap your page content inside the layout component tags to apply consistent structure across pages.

📐

Syntax

To use a layout component in Astro, first create a component file (e.g., Layout.astro) that defines the page structure. Then, in your page file, import this layout component inside the frontmatter section using import Layout from './Layout.astro'. Wrap your page content inside the <Layout> tags to apply the layout.

The layout component uses the special <slot /> tag to render the page content inside it.

astro

---
import Layout from '../components/Layout.astro'
---

<Layout>
  <h1>Page Title</h1>
  <p>This is the page content.</p>
</Layout>

💻

Example

This example shows a simple layout component that adds a header and footer around the page content. The page imports and uses this layout to keep consistent structure.

astro

---
// components/Layout.astro
// No props needed here
---
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Site</title>
  </head>
  <body>
    <header>
      <h1>Site Header</h1>
    </header>
    <main>
      <slot />
    </main>
    <footer>
      <p>© 2024 My Site</p>
    </footer>
  </body>
</html>

---
// pages/index.astro
import Layout from '../components/Layout.astro'
---

<Layout>
  <h2>Welcome to the homepage</h2>
  <p>This content is inside the layout.</p>
</Layout>

Output

<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>My Site</title> </head> <body> <header> <h1>Site Header</h1> </header> <main> <h2>Welcome to the homepage</h2> <p>This content is inside the layout.</p> </main> <footer> <p>© 2024 My Site</p> </footer> </body> </html>

⚠️

Common Pitfalls

Forgetting to import the layout component in the page frontmatter causes errors.
Not wrapping page content inside the <Layout> tags means the layout won't apply.
Omitting the <slot /> tag inside the layout component will prevent page content from rendering.
Using relative import paths incorrectly can break the layout import.

astro

---
// Wrong: missing import
---

<Layout>
  <p>Content</p>
</Layout>

---
// Right: import added
import Layout from '../components/Layout.astro'
---

<Layout>
  <p>Content</p>
</Layout>

📊

Quick Reference

Use this quick reference to remember key points about Astro layout components:

Concept	Description
Create Layout Component	Make a .astro file with `<slot />` where page content goes
Import Layout	Use `import Layout from './Layout.astro'` in page frontmatter
Wrap Content	Put page content inside `<Layout>...</Layout>` tags
Slot Tag	Required in layout to render page content
Relative Paths	Use correct relative paths for imports

✅

Key Takeaways

Create a layout component with a <slot /> to hold page content.

Import the layout in your page frontmatter and wrap your content inside it.

Always include the <slot /> tag in your layout to display page content.

Use correct relative paths when importing layout components.

Wrapping page content in the layout applies consistent structure across pages.