# Sage 9 + Vue.JS (no jQuery)

**URL:** https://discourse.roots.io/t/sage-9-vue-js-no-jquery/14162
**Category:** sage
**Tags:** webpack, sage9
**Created:** 2018-11-16T23:37:09Z
**Posts:** 5
**Showing post:** 3 of 5

## Post 3 by @kellymears — 2018-11-17T01:08:48Z

I’m using this as a base for a production site right now and it’s working out well. I made zero attempt to patch out jQuery.

One issue people will likely run into is that Sage’s live reload dev feature relies on a node\_module called `dom-compare-temp` which doesn’t play nicely with Vue templating.

In my experience Browsersync worked for a while but eventually things fell apart. In order to fix it I needed to modify `dom-compare-temp/lib/compare.js`. Around line 100 you’ll find this switch statement:

```
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");
         }
```

You want to make a new case for `type.DOCUMENT_FRAGMENT_NODE` to give a little leniency to the Vue templates:

```
case type.DOCUMENT_FRAGMENT_NODE:
  // fallthrough
```

I inserted it below the `type.CDATA_SECTION_NODE` case. The resulting switch in full:

```
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.DOCUMENT_FRAGMENT_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 implemented this workaround by cloning the module and linking it with `yarn link`. The `dom-compare-temp` package hasn’t been updated in years, so this might be the only option until the dependency is revisited by the fine folks on the Sage team.

Everything has been pretty smooth sailing since then. Godspeed!

---

_[View the full topic](https://discourse.roots.io/t/sage-9-vue-js-no-jquery/14162)._