Creating Layouts

We've covered a lot so far in this chapter, but we’ve still only added styles and markup to each specific page. This is repetitive and not a practical use of our time. To reduce repetition, we can utilize layouts. A +layout.svelte component can unify the user experience by leveraging Svelte’s <slot> directive. The layout file will nest any sibling page components and child routes within itself, allowing us to show persistent markup across the application. Just like +page.svelte, we can include a +layout.svelte component at any level in our route hierarchy, allowing the nesting of layouts within layouts. Because each layout is also a Svelte component, the styles will be localized to that particular component and will not cascade to those nested within. Let’s look at how we might use layouts to create a consistent layout and navigation menu for our existing code:

src/routes/+layout.svelte

<script>
  import Nav from...