How to add AlpineJS to Sage

[Bhanu_Kumar_Singh]

I recently started working with AlpineJs and wanted to integrate it into my sage project. I wasn’t really able to add that through the npm dependency so I enqueued it. It was working perfectly fine until I had to use the template tag in my code.

The HotReloading feature completely broke down.

        switch (left.nodeType) {
            case type.DOCUMENT_NODE:
               return this.compareNode(left.documentElement, right.documentElement);
            case type.ELEMENT_NODE:
               return this._compareAttributes(left.attributes, right.attributes) &&
                     this._compareNodeList(left.childNodes, right.childNodes);
            case type.TEXT_NODE:
               // fallthrough
            case type.CDATA_SECTION_NODE:
               // fallthrough
            case type.COMMENT_NODE:
               if (left.nodeType == type.COMMENT_NODE && !this._options.compareComments)
                  return true;
               vLeft = "" + left.nodeValue;
               vRight = "" + right.nodeValue;
               if (this._options.stripSpaces && left.nodeType !== type.CDATA_SECTION_NODE) {
                  vLeft = vLeft.trim();
                  vRight = vRight.trim();
               }
               r = vLeft === vRight;
               return !r ? this._collector.collectFailure(left, right) : r;
            default:
               throw Error("Node type " + left.nodeType + " comparison is not implemented");
         }

I saw this issue with Vue integration and people solving it here

Adding Vue.js to Sage 9: Dependencies and Approach

Here’s how to add Vue.js support to your Sage 9 project. 1. Add dependencies yarn add vue yarn add --dev babel-core babel-eslint babel-loader \ babel-plugin-transform-runtime babel-preset-env \ babel-preset-stage-2 babel-register \ vue-loader vue-style-loader vue-template-compiler 2. Add a .babelrc file { "presets": ["es2015", "stage-0"], "plugins": ["transform-runtime"] } 3. Add stuff to webpack.config.js To your webpack.config.js file (found in resources/assets/build/), add this…

But I don’t know a lot about webpack.

How should I add AlpineJS as a dependency?

[tomphilpotts]

run npm i alpinejs on the project directory and then add import 'alpinejs' to the main.js file in your theme.

Once ready run yarn build to compile everything