Made withAlpine.jsTutorial

Software as a Service Starter Kit - Wave - Tallstack theme

D

devdojo

Creator on the Alpine.js channel

Watch on YouTube ↗

13K viewsMay 6, 202115:25 runtime

Learn how to enhance your Wave SaaS starter kit by integrating the TALL Stack theme, leveraging the power of Tailwind CSS, Alpine.js, Laravel, and Livewire. This tutorial guides you through the complete installation process, from downloading the Wave application and setting up…

Chapters

#alpinejs#tutorial#frontend

Installing Wave with the TALL Stack Theme

This guide shows how to install the Wave SaaS starter kit and integrate its premium TALL Stack theme.

Installation Source: It's recommended to download the latest tagged release as a .zip file from the Wave GitHub repository for stability.
Basic Installation Steps:
1. Create a new database (e.g., via TablePlus).
2. Copy .env.example to .env and configure APP_URL and DB_DATABASE.
3. Run composer install.
4. Run php artisan migrate.
5. Run php artisan db:seed to seed the database with default data.
Theme Installation:
1. Copy the tall-stack theme folder into the resources/views/themes/ directory.
2. Navigate into the theme's directory: cd resources/views/themes/tall-stack.
3. Install Node.js dependencies: npm install.
4. Compile assets and watch for changes: npm run watch.
Activation: Log into the Wave admin panel (/admin), navigate to Themes, and click Activate on the TALL Stack theme.

Important
A DevDojo Pro account is required to access the premium TALL Stack theme and other pro resources.

Extending Wave with a Custom Livewire Component

The video demonstrates Livewire's power by building a simple task list on the user dashboard.

Scaffolding

Use Artisan commands to quickly create the necessary files for a new feature:

php artisan make:livewire TaskList - Creates the component class and view.
php artisan make:migration create_tasks_table - Creates the database migration.
php artisan make:model Task - Creates the Eloquent model.

Livewire Component Logic (`TaskList.php`)

Public Properties: Define public properties in the component class (e.g., public $task;) to hold state. These are directly accessible and bindable in the Blade view.
Data Binding: Use wire:model in the view to create a two-way binding between an input field and a public property. This allows Livewire to sync data between the front-end and back-end seamlessly.
Actions: Create public methods (e.g., public function addTask()) that can be triggered from the front-end using directives like wire:click.
Example addTask() Method:
1. Validates user input.
2. Creates a new Task model instance.
3. Populates it with data from the component's properties ($this->task) and the authenticated user's ID.
4. Saves the new record to the database ($task->save()).
5. Resets the input field by clearing the public property ($this->task = '';).

Tip
Use wire:model.lazy on text inputs. This updates the component data only when the user clicks away from the input, preventing a network request on every single keystroke and improving performance.

Displaying Data

Eloquent Relationship: Define a hasMany relationship on the User model to easily retrieve all tasks for a given user.
```
public function tasks()
{
    return $this->hasMany(Task::class);
}
```
Rendering in View: In the Livewire view, loop through the collection of tasks (@foreach (auth()->user()->tasks as $task)) to display them. When the addTask method is called and successfully adds a new task, Livewire automatically re-renders the component, and the new task appears in the list without a page refresh.