Hi virimchi-m!

Yep, you could absolutely do that! If the HX-Request header is there then HTMX sent the request, so you can use that to conditionally determine whether to render your layout or not. If needed you can also use the target, via the HX-Target header, to determine if the layout needs rerendered.

Alternatively, you could put the contents you want to render within a component, very similar to how we did it in this series with our post_list then render that component directly!

// resources/views/components/post/list.edge
<ul>
  @each (post in posts)
    <li>{{ post.title }}</li>
  @endeach
</ul>

Then, we can use this component within the page:

// resources/views/pages/posts/index.edge
@layout()
  @!post.filter()
  @!post.list({ posts }) {{-- 👈 renders the list for the page --}}
@end

We can conditionally render it directly from our controller.

export default class PostController {
  async index({ view, request }: HttpContext) {
    const isHtmx = !!request.header('HX-Request')
    const posts = [/* ... */]
   
    return isHtmx
      ? view.render('components/post/list', { posts })
      : view.render('pages/posts/index', { posts })
  }
}

  

    

      Copied!