developing-with-turbo-basics

Apply Turbo Drive, Frames, and Streams in Laravel Blade components.

840|53|Updated Dec 29, 2020
One-click install
npx skills add https://github.com/hotwired-laravel/turbo-laravel --skill developing-with-turbo-basics
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: developing-with-turbo-basics
Source: https://github.com/hotwired-laravel/turbo-laravel/tree/main/resources/boost/skills/developing-with-turbo-basics
Command: npx skills add https://github.com/hotwired-laravel/turbo-laravel --skill developing-with-turbo-basics

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps developers apply Turbo basics in Laravel projects to enhance user experience by enabling partial page updates and real-time interactions.

Core Features & Use Cases

  • Turbo Drive: Intercepts navigation and form submissions to deliver faster page transitions without full reloads.
  • Turbo Frames: Breaks pages into independent frames for targeted updates and lazy-loading.
  • Turbo Streams: Broadcasts partial page changes using stream actions like append, update, replace, and more.
  • Blade Components & Helpers: Provides Laravel Blade components and helpers to integrate Turbo techniques with minimal JavaScript.

Quick Start

Activate the developing-with-turbo-drive skill when starting a feature, then progressively enable developing-with-turbo-frames and developing-with-turbo-streams as you build interactive UI.

Frequently Asked Questions about developing-with-turbo-basics

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use Turbo in Laravel to update page sections without full reloads?

You can use Turbo in Laravel to enable partial page updates by leveraging Turbo Drive for faster navigation, Turbo Frames for isolated section updates, and Turbo Streams for real-time broadcasting. This approach enhances user experience with minimal JavaScript.

What is the best way to start integrating Hotwire into a Laravel application?

The best way to start integrating Hotwire is by activating Turbo Drive for seamless page transitions, then progressively adopting Turbo Frames and Turbo Streams alongside Laravel Blade helpers to build interactive UI components incrementally.

How do Turbo Streams broadcast partial page changes in Laravel?

Turbo Streams broadcast partial page changes in Laravel by using stream actions like append, update, and replace. They integrate with Blade components to dynamically modify specific page elements over websockets without requiring custom JavaScript.

Can I break a Laravel Blade page into independent frames for targeted updates?

Yes, you can break a Laravel Blade page into independent frames using Turbo Frames. This allows you to isolate specific sections for targeted updates and lazy-loading content, ensuring that interactions within a frame do not trigger full page reloads.

Do I need custom JavaScript to handle Turbo form submissions in Laravel?

No, you do not need custom JavaScript to handle Turbo form submissions in Laravel. Turbo Drive automatically intercepts form submissions and navigation to deliver faster page transitions, while Blade helpers provide the necessary integration.