Courses

Vue Inertia + Laravel 11: From Scratch

Extract Repeating Menus as Main Layout

Summary of this lesson:
- Creating reusable Vue layout components
- Moving menu code to shared layout
- Implementing slot-based content structure
- Adding active state to navigation links

Let's start talking about layouts. Our current main problem is duplication of the menu code for Posts and About pages.


Main Layout: Vue Component

First, we need a Vue component as the main layout. We will create a new folder resources/js/Layouts and a Vue component, App.vue inside it.

Move the repeating code from the Posts/Index.vue and About.vue Vue components to...

The full lesson is only for Premium Members.
Want to access all 18 lessons of this course? (56 min read)

You also get:

  • 69 courses (majority in latest Laravel 11)
  • Premium tutorials
  • Access to repositories
  • Private Discord