Skip to content

HTMX and Astro View Transitions

When using both HTMX and Astro View Transitions, I had an event that fired on page load, so I added a astro:after-swap event to handle doing the same thing I did after page load, but after a page transition:

<script>
  const triggerFetchLastUpdated = () => {
    const contentElement = document.getElementById('fetch-last-updated')
    if (contentElement) {
      htmx.trigger(contentElement, 'click', {})
    }
  }

  htmx.onLoad(triggerFetchLastUpdated)

  document.addEventListener('astro:after-swap', () => {
    triggerFetchLastUpdated()
  })
</script>

But, I hit a problem: I noticed my HTMX event didn’t fire after a transition.

Solution: make sure you call htmx.process() after a page swap.

During the astro:after-swap event:

<script>
  const triggerFetchLastUpdated = () => {
    const contentElement = document.getElementById('fetch-last-updated')
    if (contentElement) {
      htmx.trigger(contentElement, 'click', {})
    }
  }

  htmx.onLoad(triggerFetchLastUpdated)

  document.addEventListener('astro:after-swap', () => {
    htmx.process(document.body)
    triggerFetchLastUpdated()
  })
</script>

You could also just have one event astro:page-load and skip handling 2 different events (htmx.onLoad and astro:after-swap):

<script>
 document.addEventListener('astro:page-load', () => {
   const contentElement = document.getElementById('fetch-last-updated')
   if (contentElement) {
      htmx.process(document.body)
      htmx.trigger(contentElement, 'click', {})
    }
  }) 
</script>

…but that’s slower as fires at the end of page navigation. astro:after-swap instead fires immediately after the new page replaces the old page.

→ Download my free JavaScript Handbook!

THE VALLEY OF CODE

THE WEB DEVELOPER's MANUAL

You might be interested in those things I do:

  • Learn to code in THE VALLEY OF CODE, your your web development manual
  • Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
  • I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
  • Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
  • Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
  • Find me on X

Related posts that talk about astro: