diff --git a/sapl-frontend/src/apps/compilacao/js/compilacao.js b/sapl-frontend/src/apps/compilacao/js/compilacao.js
index 31c1de7f7..3da14b298 100644
--- a/sapl-frontend/src/apps/compilacao/js/compilacao.js
+++ b/sapl-frontend/src/apps/compilacao/js/compilacao.js
@@ -168,7 +168,7 @@
           $.get(opts['url_form'], function(data) {
             container_ds.html(data);
             var modal_ds = $('#modal-ds');
-            OptionalCustomFrontEnd().init();
+            //OptionalCustomFrontEnd().init();
 
             modal_ds.find("select[name='tipo_ta']").change(function(event) {
               var url = '';
diff --git a/sapl-frontend/src/apps/compilacao/js/compilacao_notas.js b/sapl-frontend/src/apps/compilacao/js/compilacao_notas.js
index 70ea8da30..85ad2b1ac 100644
--- a/sapl-frontend/src/apps/compilacao/js/compilacao_notas.js
+++ b/sapl-frontend/src/apps/compilacao/js/compilacao_notas.js
@@ -31,8 +31,7 @@ function onEventsDneExec(pk, model) {
     }
 }
 
-
-var onSubmitEditNVForm = function(event) {
+function onSubmitEditNVForm(event) {
 
     var url = '';
     var model = 'nota';
@@ -76,7 +75,7 @@ var onSubmitEditNVForm = function(event) {
         }
     );
 }
-var onDelete = function(event) {
+function onDelete(event) {
 
     var model = $(event).attr('model');
 
@@ -138,6 +137,9 @@ function onReadyNotasVides() {
     });
 }
 
-$(document).ready(function() {
-    onReadyNotasVides()
-});
+export default {
+    onEventsDneExec,
+    onSubmitEditNVForm,
+    onDelete,
+    onReadyNotasVides
+}
\ No newline at end of file
diff --git a/sapl-frontend/src/apps/compilacao/js/compilacao_view.js b/sapl-frontend/src/apps/compilacao/js/compilacao_view.js
index e9dc7a7af..53200ac97 100644
--- a/sapl-frontend/src/apps/compilacao/js/compilacao_view.js
+++ b/sapl-frontend/src/apps/compilacao/js/compilacao_view.js
@@ -1,150 +1,158 @@
-let JsDiff = require('diff');
-
-function isElementInViewport (el) {
-
-    //special bonus for those using jQuery
-    if (typeof jQuery === "function" && el instanceof jQuery) {
-        el = el[0];
-    }
-
-    var rect = el.getBoundingClientRect();
-
-    return (
-        rect.top >= 0 &&
-        rect.left >= 0 &&
-        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
-        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
-    );
+let JsDiff = require("diff");
+
+function isElementInViewport(el) {
+  if (typeof jQuery === "function" && el instanceof jQuery) {
+    el = el[0];
+  }
+
+  var rect = el.getBoundingClientRect();
+
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <=
+      (window.innerHeight || document.documentElement.clientHeight) &&
+    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+  );
 }
 
 function textoMultiVigente(item, diff) {
-    var elv = null;
-    var ldpts = $(".dptt")
-    for (var i = 0; i < ldpts.length; i++) {
-        if ($(ldpts[i]).hasClass('displaynone'))
-            continue;
-        if (isElementInViewport( ldpts[i])) {
-            if (i+1 < ldpts.length)
-                elv = ldpts[i+1];
-            else {
-                elv = ldpts[i];
-            }
-            break;
-        }
+  var elv = null;
+  var ldpts = $(".dptt");
+  for (var i = 0; i < ldpts.length; i++) {
+    if ($(ldpts[i]).hasClass("displaynone")) continue;
+    if (isElementInViewport(ldpts[i])) {
+      if (i + 1 < ldpts.length) elv = ldpts[i + 1];
+      else {
+        elv = ldpts[i];
+      }
+      break;
     }
+  }
+
+  $(".cp .tipo-vigencias a").removeClass("selected");
+  $(item).addClass("selected");
+  $(".dptt.desativado").removeClass("displaynone");
+  $(".dtxt").removeClass("displaynone");
+  $(".dtxt.diff").remove();
+  $(".nota-alteracao").removeClass("displaynone");
+
+  if (diff) {
+    $(".dtxt[id^='da'").each(function() {
+      if (
+        $(this)
+          .html()
+          .search(/<\/\w+>/g) > 0
+      )
+        return;
+
+      var pk = $(this).attr("pk");
+      var pks = $(this).attr("pks");
+
+      var a = $("#d" + pks)
+        .contents()
+        .filter(function() {
+          return this.nodeType === Node.TEXT_NODE;
+        });
+      var b = $("#da" + pk)
+        .contents()
+        .filter(function() {
+          return this.nodeType === Node.TEXT_NODE;
+        });
 
-    $(".cp .tipo-vigencias a").removeClass("selected")
-    $(item).addClass("selected")
-    $(".dptt.desativado").removeClass("displaynone");
-    $(".dtxt").removeClass("displaynone");
-    $(".dtxt.diff").remove();
-    $(".nota-alteracao").removeClass("displaynone");
-
-    if (diff) {
-        $(".dtxt[id^='da'").each(function() {
-
-            if ( $(this).html().search( /<\/\w+>/g ) > 0)
-
-                return;
-
-            var pk = $(this).attr('pk')
-            var pks = $(this).attr('pks')
-
-            var a = $('#d'+pks).contents().filter(function () {
-                return this.nodeType === Node.TEXT_NODE;
-            });
-            var b = $('#da'+pk).contents().filter(function () {
-                return this.nodeType === Node.TEXT_NODE;
-            });
-
-
-
-
-            var  diff = JsDiff.diffWordsWithSpace($(a).text(), $(b).text());
-
-            if (diff.length > 0) {
-                $('#d'+pks).closest('.desativado').addClass("displaynone");
-
+      var diff = JsDiff.diffWordsWithSpace($(a).text(), $(b).text());
 
-                var clone = $('#da'+pk).clone();
-                $('#da'+pk).after( clone );
-                $('#da'+pk).addClass('displaynone');
-                $(clone).addClass('diff').html('');
+      if (diff.length > 0) {
+        $("#d" + pks)
+          .closest(".desativado")
+          .addClass("displaynone");
 
+        var clone = $("#da" + pk).clone();
+        $("#da" + pk).after(clone);
+        $("#da" + pk).addClass("displaynone");
+        $(clone)
+          .addClass("diff")
+          .html("");
 
-                diff.forEach(function(part){
-                    var color = part.added ? '#018' :
-                      part.removed ? '#faa' : '';
+        diff.forEach(function(part) {
+          //var color = part.added ? "#018" : part.removed ? "#faa" : "";
 
-                    var span = document.createElement('span');
+          var span = document.createElement("span");
 
-                    var value = part.value;
+          var value = part.value;
 
-                    if (part.removed) {
-                        $(span).addClass('desativado')
-                        value += ' ';
-                    }
-                    else if (part.added) {
-                        $(span).addClass('added')
-                    }
+          if (part.removed) {
+            $(span).addClass("desativado");
+            value += " ";
+          } else if (part.added) {
+            $(span).addClass("added");
+          }
 
-                    span.appendChild(document.createTextNode(value));
-                    $(clone).append(span);
-                });
-            }
+          span.appendChild(document.createTextNode(value));
+          $(clone).append(span);
         });
-        //textoVigente(item, true);
-    }
-
-    if (elv) {
-        try {
-            $('html, body').animate({
-                scrollTop: $(elv).parent().offset().top - 60
-            }, 0);
-        }
-        catch(err) {
-        }
-
+      }
+    });
+    //textoVigente(item, true);
+  }
+
+  if (elv) {
+    try {
+      $("html, body").animate(
+        {
+          scrollTop:
+            $(elv)
+              .parent()
+              .offset().top - 60
+        },
+        0
+      );
+    } catch (err) {
+      console.log(err);
     }
+  }
 }
 
 function textoVigente(item, link) {
-    var elv = null;
-    var ldpts = $(".dptt")
-    for (var i = 0; i < ldpts.length; i++) {
-        if ($(ldpts[i]).hasClass('displaynone'))
-            continue;
-        if (isElementInViewport( ldpts[i])) {
-            if (i+1 < ldpts.length)
-                elv = ldpts[i+1];
-            else {
-                elv = ldpts[i];
-            }
-            break;
-        }
+  var elv = null;
+  var ldpts = $(".dptt");
+  for (var i = 0; i < ldpts.length; i++) {
+    if ($(ldpts[i]).hasClass("displaynone")) continue;
+    if (isElementInViewport(ldpts[i])) {
+      if (i + 1 < ldpts.length) elv = ldpts[i + 1];
+      else {
+        elv = ldpts[i];
+      }
+      break;
     }
-
-        $(".cp .tipo-vigencias a").removeClass("selected")
-        $(item).addClass("selected")
-
-        $(".dptt.desativado").addClass("displaynone");
-        $(".nota-alteracao").removeClass("displaynone");
-        if (!link)
-            $(".nota-alteracao").addClass("displaynone");
-
-    if (elv) {
-        try {
-            $('html, body').animate({
-                scrollTop: $(elv).parent().offset().top - 60
-            }, 0);
-        }
-        catch(err) {
-        }
+  }
+
+  $(".cp .tipo-vigencias a").removeClass("selected");
+  $(item).addClass("selected");
+
+  $(".dptt.desativado").addClass("displaynone");
+  $(".nota-alteracao").removeClass("displaynone");
+  if (!link) $(".nota-alteracao").addClass("displaynone");
+
+  if (elv) {
+    try {
+      $("html, body").animate(
+        {
+          scrollTop:
+            $(elv)
+              .parent()
+              .offset().top - 60
+        },
+        0
+      );
+    } catch (err) {
+      console.log(err);
     }
+  }
 }
 
 export default {
-    isElementInViewport,
-    textoMultiVigente,
-    textoVigente
-}
\ No newline at end of file
+  isElementInViewport,
+  textoMultiVigente,
+  textoVigente
+};
diff --git a/sapl-frontend/src/apps/compilacao/main.js b/sapl-frontend/src/apps/compilacao/main.js
index 5f1ef5b9e..50da3ac18 100644
--- a/sapl-frontend/src/apps/compilacao/main.js
+++ b/sapl-frontend/src/apps/compilacao/main.js
@@ -1,56 +1,46 @@
-//import JsDiff from "diff/dist/diff";
-
+// TODO: migrar compilacao para VueJs
 
 import compilacao from "./js/compilacao";
 import compilacao_view from "./js/compilacao_view";
+import compilacao_notas from "./js/compilacao_notas";
 import _ from "lodash";
 
-//import "./js/compilacao_notas";
 //import "./js/compilacao_edit";
 
-//require("imports-loader?this=>window!./js/compilacao.js");
-//require("imports-loader?this=>window!./js/compilacao_edit.js");
-//require("imports-loader?this=>window!./js/compilacao_notas.js");
-//require("imports-loader?this=>window!./js/compilacao_view.js");
-
-
-_.forEach(compilacao, function (func, key) {
+_.forEach(_.merge(_.merge(compilacao, compilacao_notas),compilacao_view), function(func, key) {
   window[key] = func;
-
 });
-_.forEach(compilacao_view, function (func, key) {
-  window[key] = func;
-
-});
-
 
 $(document).ready(function() {
-
   setTimeout(function() {
-      var href = location.href.split('#')
-      if (href.length == 2) {
-          try {
-              $('html, body').animate({
-                  scrollTop: $('#dptt' + href[1] ).offset().top - window.innerHeight / 9
-              }, 0);
-          }
-          catch(err) {
-          }
+    var href = location.href.split("#");
+    if (href.length == 2) {
+      try {
+        $("html, body").animate(
+          {
+            scrollTop:
+              $("#dptt" + href[1]).offset().top - window.innerHeight / 9
+          },
+          0
+        );
+      } catch (err) {
+        console.log(err);
       }
+    }
   }, 100);
 
   $("#btn_font_menos").click(function() {
-      $(".dpt").css("font-size", "-=1");
+    $(".dpt").css("font-size", "-=1");
   });
   $("#btn_font_mais").click(function() {
-      $(".dpt").css("font-size", "+=1");
+    $(".dpt").css("font-size", "+=1");
   });
 
   $(".dpt.bloco_alteracao .dpt").each(function() {
-      var nivel = parseInt($(this).attr('nivel'));
-
-      $(this).css('z-index', 15-nivel)
-
+    var nivel = parseInt($(this).attr("nivel"));
+    $(this).css("z-index", 15 - nivel);
   });
+  
+  onReadyNotasVides();
 
 });
diff --git a/sapl/templates/base.html b/sapl/templates/base.html
index dcc5858e0..fe6144345 100644
--- a/sapl/templates/base.html
+++ b/sapl/templates/base.html
@@ -252,9 +252,7 @@
         <!-- Placed at the end of the document so the pages load faster -->
 
 
-        <script type="text/javascript" src="{% static 'js/jquery.runner.js' %}"></script>
 
-        <script type="text/javascript" src="{% static 'jsdiff/diff.min.js' %}"></script>
 
 
 
@@ -262,6 +260,8 @@
 
 
         {# Incorporado  em sapl-frontend#}
+        <script type="text/javascript" src="{% static 'js/jquery.runner.js' %}"></script>
+        <script type="text/javascript" src="{% static 'jsdiff/diff.min.js' %}"></script>
         <script type="text/javascript" src="{% static 'js/app.js' %}"></script>
         <script src="{% static 'tinymce/tinymce.min.js' %}"></script>
         <script type="text/javascript" src="{% static 'jquery-ui/jquery-ui.min.js' %}"></script>