Given the following Astro layout component and page, what will be the visible content in the browser?
---
// src/layouts/BaseLayout.astro
const { title } = Astro.props;
---
<html lang="en">
<head>
<title>{title}</title>
</head>
<body>
<header><h1>{title}</h1></header>
<main>
<slot />
</main>
<footer>Ā© 2024</footer>
</body>
</html>
---
// src/pages/index.astro
---
import BaseLayout from '../layouts/BaseLayout.astro';
---
<BaseLayout title="Welcome">
<p>Hello, Astro!</p>
</BaseLayout>Remember that <slot /> inserts the children content inside the layout.
The BaseLayout component wraps the page content. The title prop sets the header and page title. The <slot /> renders the child paragraph inside the main section. So the page shows header, paragraph, and footer.
Choose the correct way to pass a title prop to a layout component in Astro.
---
// src/layouts/PageLayout.astro
const { title } = Astro.props;
---
<h1>{title}</h1>
<slot />Props in Astro components use double quotes for string values.
Option A correctly passes the string 'My Page' as the title prop using double quotes. Option A lacks quotes around the string, causing a syntax error. Option A uses single quotes which Astro does not support for props. Option A has an empty prop value, which is invalid.
Consider this Astro layout using a reactive counter. What will be displayed when the page loads?
--- // src/layouts/CounterLayout.astro import { useState } from 'astro/jsx-runtime'; const [count, setCount] = useState(0); --- <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> <slot /> </div>
Astro layouts are server-rendered and do not support client-side state updates by default.
Astro layouts run on the server and do not have client-side interactivity by default. The useState import here is invalid in Astro layouts. The count shows 0 initially, but clicking the button does not update the count because no client-side JavaScript is attached.
Look at this Astro layout and page. The child content does not appear on the page. What is the cause?
---
// src/layouts/MissingSlot.astro
---
<html>
<body>
<h1>Title</h1>
<!-- Missing slot here -->
</body>
</html>
---
// src/pages/about.astro
---
import MissingSlot from '../layouts/MissingSlot.astro';
---
<MissingSlot>
<p>About us content</p>
</MissingSlot>Check if the layout uses <slot /> to render children.
Astro layouts must include a <slot /> element where child content will appear. Without it, the children passed to the layout are not rendered anywhere.
Given nested layouts where LayoutA wraps LayoutB, which wraps the page content, how does Astro render the final output?
Assume each layout uses a <slot /> to render children.
--- // src/layouts/LayoutA.astro --- <div class="a"> <h1>Layout A</h1> <slot /> </div> --- // src/layouts/LayoutB.astro --- <div class="b"> <h2>Layout B</h2> <slot /> </div> --- // src/pages/home.astro --- import LayoutA from '../layouts/LayoutA.astro'; import LayoutB from '../layouts/LayoutB.astro'; --- <LayoutA> <LayoutB> <p>Page content</p> </LayoutB> </LayoutA>
Think about how slots pass children down through nested layouts.
Astro renders nested layouts by placing the inner layout inside the outer layout's slot. So LayoutA renders first, then inside its slot LayoutB renders, then inside LayoutB's slot the page content appears. This creates nested divs with headings and the page content inside.