developing-with-turbo-drive

Enable Turbo Drive in Laravel apps to fetch and render pages without full reloads.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Turbo Drive speeds up web navigation in Laravel apps by intercepting link clicks and form submissions to fetch and render HTML without full page reloads, delivering SPA-like responsiveness with server-rendered content.

Core Features & Use Cases

  • Link interception: seamless navigation within the same domain via fetch-based requests and URL updates.
  • Form submission as fetch: forms submit with fetch, follow redirects, and render the response without a full page refresh.
  • Rendering strategy: replaces the body and merges the head, preserving window and document state across navigations; supports morphing for state preservation.
  • Control & safety: disable on specific elements using data-turbo attributes; progressive enhancement with caches and prefetching as configured.
  • Laravel integration: handles common redirects and validation errors, enabling automatic route-based adjustments (e.g., *.update to *.edit).

Quick Start

Activate Turbo Drive in your Laravel project by installing the package, enabling the TurboMiddleware, and marking navigational links and forms with data-turbo attributes to enable faster, morphable navigation.

Frequently Asked Questions about developing-with-turbo-drive

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

FAQPage Schema
How do I speed up Laravel navigation without a full page reload?

Turbo Drive speeds up Laravel navigation by intercepting link clicks and form submissions to fetch and render HTML without full page reloads, delivering SPA-like responsiveness with server-rendered content.

How does Turbo Drive handle Laravel form submissions and validation errors?

Turbo Drive handles Laravel form submissions by sending fetch requests, following redirects with automatic 303 handling for non-GET requests, and rendering validation errors without requiring a full page refresh.

Can I preserve UI element state across page navigations in a Laravel app?

You can preserve UI element state across page navigations using Turbo Drive's morphing feature, which replaces the body and merges the head while maintaining window and document state during navigations.

How do I disable Turbo Drive on specific links or forms in my Laravel application?

You can disable Turbo Drive on specific links or forms by marking them with data-turbo attributes, providing progressive enhancement control and allowing you to exclude certain elements from fetch-based navigation.

Does Turbo Drive support view transitions and prefetching for Laravel routes?

Turbo Drive supports optional view transitions and prefetching for Laravel routes, caching navigational pages to optimize load times and enhance the user experience during navigation.

What is the best way to achieve SPA-like responsiveness with server-rendered Laravel content?

The best way to achieve SPA-like responsiveness with server-rendered Laravel content is using Turbo Drive, which intercepts standard navigational links and form submissions to fetch and render new pages dynamically.