main.js

(function () {
    "use strict";
    var app = new Alpine.Application(document.getElementById('app'));
    app.component({
        // Wrapping element with the appropriate Alpine data
        el: '#app',
        data: {
            // "open" is a boolean that controls the visibility of the modal
            open: false,
            // "step" is a number that indicates which step of the guide we are on
            step: 0,
            // "stepper" is a function that increments the "step" number by 1
            stepper: function(value) {
                if (typeof value === 'number' && value > 0) {
                    this.step += value;
                } else {
                    this.step = 1;
                }
            }
        },
        // When the app starts, the modal is open and the first step is displayed
        mounted() {
            this.open = true;
        }
    });
})();