I was big fan of jQuery before I started using AlpineJS!. Alpine is so easy and seamless that I fell in love with it instantly. One more thing that you might want to consider is its size. Alpine is very small in comparison of jQuery, Vue, Angular etc. Alpine was previously called Tailwind of JavaScript. If you don’t know about Tailwind, Man you should read it. If you wanted to learn about AlpineJS basics and other concepts click here.

Example problem

Let’s take an example to understand the things of alpine.

Approach one

<div x-data="{open: false}" @keydown.escape="open=false" x-clock>
    <div class="px-8 py-8 align-center">
        <button @click="open=true" class="px-3 py-1 border shadow-md bg-indigo-500 text-white">Open Me</button>
        <div x-show="open" id="modal">
            This is modal text.  
            <br>
            <button @click="open=false" class="px-3 py-1 border shadow-md bg-red-500 text-white">Close Me</button>
        </div>
    </div>
</div>

Clicking Open Me will open div with ID modal, and clicking Close me will close this. Test this here.

Let’s try it another way

Let’s take another example

<div id="modalBox" x-data="{open: false}" @keydown.escape="open=false" x-clock> <!-- Scope starts -->
    <div class="px-8 py-8 align-center">
        <button @click="open=!open" class="px-3 py-1 border shadow-md bg-indigo-500 text-white">Toggle button</button>
        <div x-show="open" id="modal">
            This is modal text.  
            <br>
            <button @click="open=false" class="px-3 py-1 border shadow-md bg-red-500 text-white">Close Me</button>
        </div>
    </div>
</div> <!-- Scope Ends -->
<button @click="open=!open" class="px-3 py-1 border shadow-md bg-red-500 text-white">Toggle button (Second Button)</button>

Okay so in above HTML code we have created another button outside the scope of div. This is not going to work, because Alpine cannot access open variable. What should we do then?

How to access that data variable then

We need to somehow access the variable of alpine from first div using Native JS. Well we have something called __x to tackle this problem.

Change the code of second button

<button onclick="hideBox()" class="px-3 py-1 border shadow-md bg-red-500 text-white">Toggle button (Second Button)</button>

Now what we have to do is access the data variable in this hideBox() JS function

window.hideBox = function(){
    document.getElementById('modalBox').__x.$data.open = false;
}

Here is what our whole code look like.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js"></script>
</head>
<body>
    <h1 class="text-2xl">Example one</h1>
    <div x-data="{open: false}" @keydown.escape="open=false" x-clock>
        <div class="px-8 py-8 align-center">
            <button @click="open=!open" class="px-3 py-1 border shadow-md bg-indigo-500 text-white">Toggle button</button>
            <div x-show="open" id="modal">
                This is modal text.  
                <br>
                <button @click="open=false" class="px-3 py-1 border shadow-md bg-red-500 text-white">Close Me</button>
            </div>
        </div>
    </div>
    <h1 class="text-2xl">Example two</h1>
    <div id="modalBox" x-data="{open: false}" @keydown.escape="open=false" x-clock>
        <div class="px-8 py-8 align-center">
            <button @click="open=!open" class="px-3 py-1 border shadow-md bg-indigo-500 text-white">Toggle button</button>

            <div x-show="open" id="modal">
                This is modal text.  
                <br>
                <button @click="open=false" class="px-3 py-1 border shadow-md bg-red-500 text-white">Close Me</button>
            </div>
        </div>
    </div>
    <button onclick="hideBox()" class="px-3 py-1 border shadow-md bg-red-500 text-white">Toggle button (Outside Scope)</button>
    <script>
        window.hideBox = function(){
            document.getElementById('modalBox').__x.$data.open = false;
        }
    </script>
</body>
</html>

Conclusion

Alpine is fairly new in this world but surely has potential to do most of the things easily. May be in future this can be done using another approach, it is also possible there is a better approach to tackle this problem (HAHA). But this worked for me. And I thought of sharing this one.

Happy Coding, Bye 👋