Working with Sage and AlpineJS

sage
1

Hi,

I’ve been trying to build something with AlpineJS and Sage 10. I added AlpineJS to the app.js and it seems to work (things like x-data and the AlpineJS devtools work).
However, I cannot get @click or @mouseover other directives starting with @ to work.

I found that the @-directives actually get scraped when rendering. The following code in my xxx.blade.php:

<button type="button" @click="isOpen = !isOpen" style=...>

renders as

<button type="button" style=...>

Is this some issue with the blade templates or sage or wordpress or am I looking in the wrong place? I tried several ways to escape the @ but it never appears in the rendered HTML code.

Thanks,
Marc

2

Update: my scripts seem to work flawlessly when using x-on:click="..." syntax instead of @click so it looks like some filtering/escaping issue indeed.

3

@click works out of the box for me on the latest Sage. It might be conflicting with something custom you have.
It also worked on older Sage 10 and on Sage 9 as far as I can remember. You might wanna try a fresh Sage installation with only alpine added to it and keep adding from there to find what’s causing this issue.

4

Hmm Thank you, this pointed me in the right direction.

My Sage installation was not the issue, but I found one (third party) Wordpress plugin seemed to do something weird and breaking the behavior of @click and other commands when being activated…

1 Like
5

This topic was automatically closed after 42 days. New replies are no longer allowed.