skills.rest
hotwired-laravel
hotwired-laravelOFFICIAL
Explore all skills by this author →
GitHub

developing-with-turbo-frames

Implement Turbo Frames for partial page updates in Laravel applications.

840|53|Updated Dec 29, 2020
Search Tags:#laravel#web-performance#turbo-frames#turbo-frame#frame-navigation#partial-page-updates#blade-components
One-click install
npx skills add https://github.com/hotwired-laravel/turbo-laravel --skill developing-with-turbo-frames
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: developing-with-turbo-frames
Source: https://github.com/hotwired-laravel/turbo-laravel/tree/main/resources/boost/skills/developing-with-turbo-frames
Command: npx skills add https://github.com/hotwired-laravel/turbo-laravel --skill developing-with-turbo-frames

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Turbo Frames allow partial updates of web pages by isolating content in frames, reducing full-page reloads and improving responsiveness in Laravel applications.

Core Features & Use Cases

  • Frame Component: render a <turbo-frame> to encapsulate a page region and update only that region.
  • Scoped Navigation & Lazy Loading: navigate within a frame and load content on demand without refreshing the page.
  • Targeting & Morphing: customize which frame updates and optionally morph content to preserve DOM state.
  • Use Cases: replace a comments section, load a profile panel, or fetch related data without reloading the whole page.

Quick Start

Implement a turbo-frame by wrapping the target section with <turbo-frame id="example">... content ...</turbo-frame> and optionally set src for lazy loading or data-turbo-frame for frame targeting.

Frequently Asked Questions about developing-with-turbo-frames

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

FAQPage Schema
How do I update a specific page section in Laravel without reloading the whole page?▼

Partial page updates are achieved in Laravel by wrapping the target region with a <turbo-frame> element, which isolates content and fetches replacements without a full page reload.

What is the best way to lazy load a profile panel in a Laravel application?▼

To lazy load a profile panel, implement a <turbo-frame> with the src attribute set to fetch the content on demand, ensuring the page loads quickly without waiting for secondary data.

How do I target a specific Turbo Frame for navigation in Blade components?▼

Frame targeting is handled by setting the data-turbo-frame attribute on your Blade components, which directs the navigation response to update the matching <turbo-frame> by its id.

Does Turbo Frame navigation require server-side detection in Laravel?▼

Yes, scoped navigation requires server-side detection of Turbo Frame requests so the Laravel backend can render frame-specific responses instead of returning the full HTML document.

How can I preserve DOM state when updating Turbo Frames?▼

You can preserve DOM state during frame updates by applying morphing techniques, which customize the frame update process to intelligently merge content rather than fully replacing the element.

When should I avoid using Turbo Frames for partial updates?▼

Avoid Turbo Frames when you need to update multiple unrelated page regions simultaneously or when the content requires global JavaScript re-initialization that scoped frame isolation cannot handle.

Related Skills

Explore More Software Engineering Skills→
hotwired-laravelhotwired-laravel
840

developing-with-turbo-basics

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

Official
Basic
ThinkOodleThinkOodle
5

turbo

Guide Rails UI development with Turbo Drive, Frames, and Streams.

Official
Intermediate
woweyawoweya
1

symfony-ux-turbo

Integrate Turbo Drive, Frames, and Streams into Symfony applications.

Community
Intermediate
smnandresmnandre
166

turbo

Automate SPA-like navigation and real-time updates in Symfony UX apps with Turbo.

Community
Advanced