How do you handle the document <title>?

1

Does anyone know how to gracefully handle updating the document’s when a partial page is returned as part of an advance action? In other words, we’re returning a response, via data-turbo-action="advance", but without a layout.

We’d rather keep <title> co-located with the content being returned, rather than updating it via Stimulus. Any suggestions?

2

I’m searching for a solution to this as well.

3

One option might be to use turbo-stream, which could be nested inside

<head>
  <title id="page-title">My Title</title>
</head>
<body>
  <turbo-frame data-turbo-action="advance" ...>
  
  <turbo-frame>
</body>

<turbo-frame ...>
  <turbo-stream action="update" target="page-title">
    <template>New Title</template>
  </turbo-stream>

  Content...
<turbo-frame>
2 Likes
4

That’s creative. I’ll give that a try.

5

You could also write a stimulus controller, to update the title on connect, but for this scenario I prefer this approach if it works.