Alpine.js Cant Bind X-data To Functin In External Js File

I'm creating an app with alpine.js this is the context of my index.html file

Solution 1:

By default, alpine is going to look for the component in the window level. So the issue can be solved by making an app variable in the window which is your exact same function.

import"./styles.css";
import"alpinejs";

window.app = function () {
  return {
    show: false,
    open() {
      this.show = true;
    },
    close() {
      this.show = false;
    },
    isOpen() {
      returnthis.show === true;
    }
  };
};

There's a free video tutorial about extracting alpine js components in Laracasts, you can view it here.

Share