Alpine: Alpine not working with Eleventy

Created on 30 Apr 2020  路  2Comments  路  Source: alpinejs/alpine

I'm trying to use Alpine with 11ty.

This page renders, and I've verified window.Alpine exists on the page, but the @click isn't firing the alert function:

<html lang="en">
  <head>
      src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"
      defer
    ></script>
  </head>
  <body>
    <button type="button" @click="alert('clicked')">click me</button>
  </body>
</html>

I thought 11ty might be messing with the DOM, but the @click hasn't been tampered with:
image

Any ideas?

question
Source
picture gigamesh

Most helpful comment

Welp that's embarrassing. I definitely missed that in the docs. Thanks!

picture gigamesh on 30 Apr 2020
👍2

All 2 comments

Looks like you're missing the x-data attribute, you can add it to the button directly or wrap the button in a div / other element :)

ryangjchandler picture ryangjchandler on 30 Apr 2020
👍1

Welp that's embarrassing. I definitely missed that in the docs. Thanks!

gigamesh picture gigamesh on 30 Apr 2020
👍2
Was this page helpful?
0 / 5 - 0 ratings

Related issues

allmarkedup picture allmarkedup  路  4Comments
dkuku picture dkuku  路  5Comments
maxsite picture maxsite  路  4Comments
Calinou picture Calinou  路  4Comments
dstpierre picture dstpierre  路  4Comments