Courses

Vue Laravel 12 Starter Kit: CRUD Project

Customize Layout with Vue/Tailwind

Summary of this lesson:
- Customize app name and logo with simple component edits
- Change colors using Tailwind CSS classes and variables
- Switch between sidebar and topbar navigation layouts
- Find and modify Vue components for visual customization

In this lesson, we will explore how to change the look of the page's main elements: the logo, colors, layout, and navigation.

Changing the App Name

Your application's default name at the top left, beside the logo, is "Laravel Starter Kit". You can change it in the logo component file.

resources/js/components/AppLogo.vue

BEFORE:

<span class="mb-0.5 truncate font-semibold leading-none">Laravel Starter Kit</span>

AFTER:

<span class="mb-0.5 truncate font-semibold leading-none">Vue Tasks</span>

Changing the Name COLOR

With the same example, let's change the color with Tailwind, adding...

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

You also get:

  • 73 courses
  • Premium tutorials
  • Access to repositories
  • Private Discord