How to pass data to layout astro

AstroHow-ToBeginner · 3 min read

How to Pass Data to Layout in Astro: Simple Guide

In Astro, you pass data to a layout by sending props when you use the layout directive in your page or component frontmatter. You define the layout component to accept these props and use them to customize the layout's content dynamically.

📐

Syntax

To pass data to a layout in Astro, you use the layout directive in the frontmatter of your page or component. You assign the layout component and pass an object with props. Inside the layout component, you receive these props as regular component props.

layout: LayoutComponent sets the layout.
layoutProps: { key: value } passes data to the layout.
In the layout, use export interface Props or export let to receive props.

astro

---
import Layout from '../layouts/Layout.astro';

export const layout = Layout;
export const layoutProps = { title: 'My Page Title' };
---

<h1>Page content here</h1>

💻

Example

This example shows a page passing a title prop to a layout. The layout uses the title to set a heading. This demonstrates how to customize layout content from the page.

astro

---
// src/layouts/Layout.astro
export interface Props {
  title: string;
}
export let title: string;
---
<html lang="en">
  <head>
    <title>{title}</title>
  </head>
  <body>
    <header>
      <h1>{title}</h1>
    </header>
    <main>
      <slot />
    </main>
  </body>
</html>

---
// src/pages/index.astro
import Layout from '../layouts/Layout.astro';

export const layout = Layout;
export const layoutProps = { title: 'Welcome to Astro' };
---

<p>This is the homepage content.</p>

Output

<html lang="en"> <head> <title>Welcome to Astro</title> </head> <body> <header> <h1>Welcome to Astro</h1> </header> <main> <p>This is the homepage content.</p> </main> </body> </html>

⚠️

Common Pitfalls

Common mistakes when passing data to layouts in Astro include:

Not exporting layoutProps in the page frontmatter, so the layout receives no data.
Forgetting to declare export let or props interface in the layout, causing undefined values.
Passing data with wrong property names or types, leading to runtime errors or missing content.

Always ensure the layout expects the props you send and the page exports layoutProps correctly.

astro

---
import Layout from '../layouts/Layout.astro';

// Wrong: missing layoutProps export
export const layout = Layout;

---

<h1>Content</h1>

---

// Correct way
export const layoutProps = { title: 'Correct Title' };

📊

Quick Reference

Concept	Usage	Notes
Set layout	export const layout = LayoutComponent;	Assign layout component in frontmatter
Pass data	export const layoutProps = { key: value };	Props sent to layout component
Receive props	export let key;	Declare in layout to use props
Use props	{key}	Render dynamic content in layout
Common error	Missing layoutProps export	Layout gets no data

✅

Key Takeaways

Pass data to Astro layouts using the frontmatter export named layoutProps.

Declare props in the layout component with export let to receive passed data.

Always export both layout and layoutProps in the page frontmatter for data flow.

Ensure prop names match exactly between page and layout to avoid errors.

Layouts use slots to render page content alongside dynamic data.

Syntax

Example

Common Pitfalls

Quick Reference

{key}

Key Takeaways