Interaction

Hotwire Turbo

Use Turbo navigation and frames with GoLazy templates and controllers.

By Guillermo Alvarez - Published - Updated

Import Turbo

The conventional app entry can import Turbo with a source directive:

// golazy:turbo

lazy js expands it to:

import "@hotwired/turbo"

The layout then loads the app entry through the generated importmap:

{{importmap "/assets/importmap.json"}}
<script type="module">import "/js/app.js"</script>

Render a frame

GoLazy registers Turbo frame helpers through lazyapp. A full-page template can render a frame and its matching partial:

{{ turbo_frame "post" . }}

That resolves a partial like:

app/views/posts/_post_frame.html.tpl

and emits:

<turbo-frame id="post">...</turbo-frame>

Add frame options

Pass Turbo attributes through helper options:

{{ turbo_frame "post" . (turbo_src "/posts/hello-golazy") (turbo_loading "lazy") }}

Controller actions can also set frame options before rendering:

c.SetTurboFrameOptions(lazyturbo.Src("/posts/hello-golazy"))
return c.Render("show")

Handle frame requests

When Turbo sends:

Turbo-Frame: post

GoLazy renders the matching frame partial, wraps it in the matching turbo-frame element, and skips the page layout.

Use ordinary full-page views as the fallback. A link or form should still work without Turbo; Turbo only improves the browser interaction path.