Courses

Vue Laravel 12 Starter Kit: CRUD Project

Shadcn Vue Card: Customizing Form Layout

You're reading a FREE PREVIEW of a PREMIUM course.
Login Or Join Premium ($129/year or $29/mo)
Summary of this lesson:
- Examples from auth screens show three available layout options
- Look what's inside the Auth Card layout
- Use Card component to create a three-column form layout

Link to the repository

[Only for premium members]

Currently, our form layout is straightforward - one field per line. It takes a lot of horizontal space. Why can't we fit a few fields in one row?

For that, we will use the Card component from Shadcn.

How Card is Used in Starter Kit

This lesson is an example of how to analyze already-existing starter kit components and generate ideas.

Auth screens have three layouts to choose from:

  • layouts/auth/AuthSimpleLayout.vue (the default)
  • layouts/auth/AuthCardLayout.vue
  • layouts/auth/AuthSplitLayout.vue

You can try changing it in the AuthLayout.vue file. For this example, we will use...

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

You also get:

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