Layouts & Components in Nuxt | Full-Stack Web Dev #9
2This is Episode #9 of my Nuxt Full-Stack Web Development series.
In this video, we dive into layouts and components in Nuxt. Layouts let you define consistent structure across your app (like a shared header, footer, or navigation bar), while components give you the power to build reusable pieces of UI.
We’ll cover:
Using NuxtLayyout to define global and custom layouts
Creating and using your own components
Passing props into components to make them dynamic
Leveraging the slot tag for flexible, reusable content
By the end of this episode, you’ll know how to structure your Nuxt app for scalability and reuse, a must-have skill for any full-stack project.
Subscribe to follow along with the rest of the series as we continue building step by step.
00:00 – Introduction to layouts and components in Nuxt
00:19 – Creating a simple navbar
01:24 – Why use components instead of repeating code
02:00 – Building a reusable NavigationBar component
03:30 – Auto-imported components in Nuxt
04:18 – Making the navbar reusable with NuxtLink
05:00 – Introduction to layouts in Nuxt
05:45 – Creating a default layout with slot
06:40 – Applying layouts to all pages with NuxtLayout
07:40 – Creating and applying a custom layout
08:40 – Fixing layout issues with slot
09:20 – Creating a reusable PageTitle component
10:10 – Using slot inside components
11:20 – Passing props to components with TypeScript
12:10 – Setting default values for props (withDefaults)
13:20 – Binding props to classes dynamically
14:00 – Example: different styles for page titles using props
14:45 – Wrapping up the episode