ElianCodes

← Back to blog

Published on 09/25/2021 17:48 by Elian Van Cutsem

Using slots to build layout in Astro

Coming from frameworks like NuxtJS and NextJS, I always liked the layout feature. You basically write a new component, add some original content to it and add a layout which contains all the mutual components like headers, footers and such.

When I first started learning Astro, I didn’t directly see a way to realise this. Astro feels a lot more like writing super-powered HTML, which is nice, but I hated to re-import my header component in every page.

After some time experimenting somewhat more with Astro, I actually understood that this was possible, it’s just a different way of approach then NuxtJS which I’m so used to.

Building Layouts in NuxtJS

Building layouts in Nuxt is really easy (or I’m just very used to it). There’s a layouts folder in which you create a new file

<template>
  <div>
    <TheHeader />
    <Nuxt />
    <!-- The page content will then go here -->
    <TheFooter />
  </div>
</template>

If the Nuxt layout component was named Default.vue you can just add layout: 'default in a page to use the layout. The <Nuxt /> element will then be replaced by the <template> contents of your page Vue template.

<template>
  <main>
    <h1>Look ma, a layout</h1>
    <p>works great right?</p>
  </main>
</template>

<script>
  export default {
    layout: "default",
  };
</script>

It’s an easy way to define and use templates and layouts and I actually got quite familiar with it, which is (I think) why I never used it before in Astro.

The Astro way

In Astro, it’s actually quite simple to also do this, you just gotta forget what you know about other frameworks.

Define a layout

Let’s define a new Astro template in the /src/layouts folder and call it Default.astro. In this template, we make use of the Astro <slot /> component to tell Astro where to render in the content of our page. Every page will then ofcourse have different content, with a shared <YourHeadComponent />, <YourHeaderComponent /> and <YourFooterComponent />.

---
import YourHeadComponent from "../components/layout/Head.astro";
import YourHeaderComponent from "../components/layout/Header.astro";
import YourFooterComponent from "../components/layout/Footer.astro";
---

<html lang="en">
  <head>
    <YourHeadComponent />
  </head>
  <body>
    <YourHeaderComponent />
    <slot />
    <!-- The page will render it's content here -->
    <YourFooterComponent />
  </body>
</html>

Make a page use a layout

To then also use the layout we defined above, we just have to create a new page in the /src/pages folder and import our <DefaultLayout> component we just defined.

---
import DefaultLayout from "../layouts/Default.astro";
---

<DefaultLayout>
  <main>
    <h1>Look ma, a layout</h1>
    <p>works great right?</p>
  </main>
</DefaultLayout>

This makes Astro even more powerful and versatile.

Written by Elian Van Cutsem

← Back to blog
  • Becoming an Astro maintainer

    Becoming an Astro maintainer

    Since a week, I'm an Astro maintainer, in this post, I describe the process and my start in open source. I also give some insight in what I'm planning to work on.

  • 🍱 Brutal: A theme for Astro

    🍱 Brutal: A theme for Astro

    Brutal is a minimal neobrutalist theme for Astro. It's based on Neobrutalist Web Design, a movement that aims to create websites with a minimalistic and functional design. It has some integrations like Image Optimization, RSS, Sitemap, ready to get your SEO done right.

  • 🎤 Am I an international public speaker now?

    🎤 Am I an international public speaker now?

    A few weeks ago, I gave my first international keynote talk at JSWorld in Amsterdam. In this blogpost, I wanted to share some insights about the conference and my talk.

  • ✨ Building Blog tag index pages in Astro

    ✨ Building Blog tag index pages in Astro

    I wanted to add blog tag collection pages to my website. This way, people could filter on tags I used in my blog posts. Here is a guide on how I implemented it.

  • 🎉 I started from scratch (again)

    🎉 I started from scratch (again)

    I started rebuilding my personal website from scratch in Astro again, no dependencies, no frameworks, no nothing. This to decrease technical debt and make full use of the newer Astro features.

  • 💄 Implementing UnoCSS in Astro

    💄 Implementing UnoCSS in Astro

    UnoCSS is an atomic-CSS engine, designed with flexibility and performance in mind, I wanted to give it a try. Let's take a look at implementing it in Astro and see how it works.