diff --git a/app/assets/javascripts/codemirror.js b/app/assets/javascripts/codemirror.js
deleted file mode 100644
index 9c8cec6..0000000
--- a/app/assets/javascripts/codemirror.js
+++ /dev/null
@@ -1,29 +0,0 @@
-function codemirrorify(el) {
-  return CodeMirror.fromTextArea(el, {
-    theme: "neo",
-    lineNumbers: true,
-    viewportMargin: Infinity,
-    mode: "fluentd"
-  });
-}
-
-$(function(){
-  $('.js-fluentd-config-editor').each(function(_, el){
-    codemirrorify(el);
-  });
-});
-
-Vue.directive('config-editor', {
-  bind: function(){
-    var $parent = this.vm;
-    // NOTE: needed delay for waiting CodeMirror setup
-    _.delay(function(textarea){
-      var cm = codemirrorify(textarea);
-      // textarea.codemirror = cm; // for test, but doesn't work for now (working on Chrome, but Poltergeist not)
-      cm.on('change', function(code_mirror){
-        // bridge Vue - CodeMirror world
-        $parent.editContent = code_mirror.getValue();
-      });
-    }, 0, this.el);
-  }
-});
diff --git a/app/assets/javascripts/codemirror_fluentd.js b/app/javascript/packs/codemirror.js
similarity index 66%
rename from app/assets/javascripts/codemirror_fluentd.js
rename to app/javascript/packs/codemirror.js
index ae2b2a8..dfa8eb3 100644
--- a/app/assets/javascripts/codemirror_fluentd.js
+++ b/app/javascript/packs/codemirror.js
@@ -1,7 +1,8 @@
+import CodeMirror from 'codemirror/lib/codemirror'
+
 // See: http://codemirror.net/doc/manual.html#modeapi
 // and sample mode files: https://github.com/codemirror/CodeMirror/tree/master/mode
 
-
 CodeMirror.defineMode('fluentd', function(){
   return {
     startState: function(aa){
@@ -57,3 +58,33 @@ CodeMirror.defineMode('fluentd', function(){
     }
   };
 });
+
+function codemirrorify(el) {
+  return CodeMirror.fromTextArea(el, {
+    theme: "neo",
+    lineNumbers: true,
+    viewportMargin: Infinity,
+    mode: "fluentd"
+  });
+}
+
+$(function(){
+  $('.js-fluentd-config-editor').each(function(_, el){
+    codemirrorify(el);
+  });
+});
+
+Vue.directive('config-editor', {
+  bind: function(){
+    var $parent = this.vm;
+    // NOTE: needed delay for waiting CodeMirror setup
+    _.delay(function(textarea){
+      var cm = codemirrorify(textarea);
+      // textarea.codemirror = cm; // for test, but doesn't work for now (working on Chrome, but Poltergeist not)
+      cm.on('change', function(code_mirror){
+        // bridge Vue - CodeMirror world
+        $parent.editContent = code_mirror.getValue();
+      });
+    }, 0, this.el);
+  }
+});
diff --git a/app/views/fluentd/settings/edit.html.haml b/app/views/fluentd/settings/edit.html.haml
index 2bde745..8794443 100644
--- a/app/views/fluentd/settings/edit.html.haml
+++ b/app/views/fluentd/settings/edit.html.haml
@@ -1,4 +1,5 @@
 - page_title t('.page_title', label: @fluentd.label)
+- add_javascript_pack_tag("codemirror")
 
 = form_tag(daemon_setting_path(@fluentd), method: :patch) do
   .form-group