Courses

Vue Laravel 12 Starter Kit: CRUD Project

Shadcn Vue Table: Tasks List

You're reading a FREE PREVIEW of a PREMIUM course.
Login Or Join Premium ($129/year or $29/mo)
Summary of this lesson:
- Set up Shadcn Vue UI table component with npx command
- Create TypeScript interface for Task data model
- Display tasks with conditional styling for completion status

Link to the repository

[Only for premium members]

In the following lessons, we will fill our "Tasks" page with the full CRUD. Let's start with a table.

Table Component from Shadcn

Let's show the table of tasks. Remember, we had seeded it into the database previously:

Vue starter kit uses a Vue+Tailwind Shadcn UI library so you don't need to install it, it comes already pre-configured.

Generally, using Shadcn components is very easy:

  1. Install the component with npx
  2. Import it on top of your Vue file
  3. Use it inside your...

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

You also get:

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