Turbo

---

Turbo Drive is used to accelerate navigation between pages by intercepting navigations, loading content via AJAX negating the need for full page reloads.

• Turbo Frames
  • Usage
  • Default attributes

Turbo Frames

Turbo Frames makes it possible to load parts of a page via AJAX. This could also be used to reduce the initial DOM size, for example by loading the content of a mega menu with it when the menu opens. Note that Vue doesn't normally work within the <turbo-frame> component; for this purpose we've made a <vue-turbo-frame> Vue component.

Usage

The component works similarly to a regular <turbo-frame>, but includes pre-configured performance optimizations. An example with a menu that loads fully when it's visible within the browser:

<vue-turbo-frame src="/menu-with-submenus" id="menu">
    <ul>
        <li>Just the top level menu items</li>
        <li>Those which should be visible directly</li>
    </ul>
</vue-turbo-frame>

And the route that is just serving a Blade template:

Route::view('/menu-with-submenus', 'turbo-frames.menu');

And the resources/views/turbo-frames/menu.blade.php content:

<turbo-frame id="menu">
    <ul>
        <li>Just the mega menu top level items
            <ul>
                <li>But now with all sub levels</li>
            </ul>
        </li>
        <li>Those which should be visible directly
            <any-vue-component>
                Vue Components do work!
            </any-vue-component>
        </li>
    </ul>
</turbo-frame>

---

Another example where the whole menu is behind a toggle:

<details>
    <summary>Menu</summary>
    <vue-turbo-frame id="menu" src="/menu-with-submenus">
        Loading...
    </vue-turbo-frame>
</details>

Default attributes

The component adds these defaults:

Attribute	Value	Description
loading	lazy	Content only loads when it scrolls into view, improving initial page load performance
target	_top	Ensures links navigate the whole page instead of staying within the frame