diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 6df7d10..81734f0 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -37,6 +37,6 @@ window.Vuex = Vuex;
 
 import "../stylesheets/application.scss";
 
-$(document).ready(() => {
+window.addEventListener("load", () => {
   $("[data-toggle=tooltip]").tooltip();
 });
diff --git a/app/javascript/packs/filter_grep_setting.js b/app/javascript/packs/filter_grep_setting.js
index 1498be1..3c9fb14 100644
--- a/app/javascript/packs/filter_grep_setting.js
+++ b/app/javascript/packs/filter_grep_setting.js
@@ -4,7 +4,7 @@ import "lodash/lodash";
 
 import GrepContainer from "./grep_container";
 
-$(document).ready(() => {
+window.addEventListener("load", () => {
   new Vue({
     el: "#filter-grep-setting",
     components: {
diff --git a/app/javascript/packs/fluent_log.js b/app/javascript/packs/fluent_log.js
index d2b1ff5..34c836c 100644
--- a/app/javascript/packs/fluent_log.js
+++ b/app/javascript/packs/fluent_log.js
@@ -1,5 +1,5 @@
 "use strict";
-$(document).ready(()=> {
+window.addEventListener("load", ()=> {
   new Vue({
     el: "#fluent-log",
     data: {
diff --git a/app/javascript/packs/in_tail_parse.js b/app/javascript/packs/in_tail_parse.js
index a9dbf2f..e826b9b 100644
--- a/app/javascript/packs/in_tail_parse.js
+++ b/app/javascript/packs/in_tail_parse.js
@@ -6,7 +6,7 @@ import "bootstrap/dist/js/bootstrap";
 import ParserPluginForm from "./parser_plugin_form";
 import store from "./store";
 
-$(document).ready(() => {
+window.addEventListener("load", () => {
   new Vue({
     el: "#in-tail-parse",
     store,
diff --git a/app/javascript/packs/nested_settings.js b/app/javascript/packs/nested_settings.js
index 5a36b4d..4378aed 100644
--- a/app/javascript/packs/nested_settings.js
+++ b/app/javascript/packs/nested_settings.js
@@ -1,7 +1,7 @@
 /* global _ */
 "use strict";
 import "lodash/lodash";
-$(document).ready(()=> {
+window.addEventListener("load", () => {
   var $firstSetting = $(".js-nested-column.js-multiple:first");
 
   if ($firstSetting.length === 0) {
diff --git a/app/javascript/packs/notification.js b/app/javascript/packs/notification.js
index 07955c7..c01a829 100644
--- a/app/javascript/packs/notification.js
+++ b/app/javascript/packs/notification.js
@@ -1,7 +1,7 @@
 const POLLING_INTERVAL = 3 * 1000;
 const POLLING_URL = "/polling/alerts";
 
-$(document).ready(()=> {
+window.addEventListener("load", ()=> {
   new Vue({
     el: "#vue-notification",
     data: {
diff --git a/app/javascript/packs/out_forward_setting.js b/app/javascript/packs/out_forward_setting.js
index fdc7ecc..b520f76 100644
--- a/app/javascript/packs/out_forward_setting.js
+++ b/app/javascript/packs/out_forward_setting.js
@@ -3,7 +3,7 @@
 import TransportConfig from "./transport_config";
 import OwnedPluginForm from "./owned_plugin_form";
 
-$(document).ready(() => {
+window.addEventListener("load", () => {
   new Vue({
     el: "#out-forward-setting",
     components: {
diff --git a/app/javascript/packs/out_s3_setting.js b/app/javascript/packs/out_s3_setting.js
index fa71582..fda0e9e 100644
--- a/app/javascript/packs/out_s3_setting.js
+++ b/app/javascript/packs/out_s3_setting.js
@@ -3,7 +3,7 @@
 import OwnedPluginForm from "./owned_plugin_form";
 import AwsCredential from "./aws_credential";
 
-$(document).ready(() => {
+window.addEventListener("load", () => {
   new Vue({
     el: "#out-s3-setting",
     components: {
diff --git a/app/javascript/packs/settings.js b/app/javascript/packs/settings.js
index f6150b0..6482417 100644
--- a/app/javascript/packs/settings.js
+++ b/app/javascript/packs/settings.js
@@ -3,7 +3,7 @@
 
 import "lodash/lodash";
 
-$(document).ready(() => {
+window.addEventListener("load", () => {
   const SettingSection = {
     template: "#vue-setting-section",
     props: [
diff --git a/app/javascript/packs/transport_section.js b/app/javascript/packs/transport_section.js
index f4c1bdf..808cc37 100644
--- a/app/javascript/packs/transport_section.js
+++ b/app/javascript/packs/transport_section.js
@@ -4,7 +4,7 @@ import "lodash/lodash";
 
 import ConfigField from "./config_field";
 
-$(document).ready(() => {
+window.addEventListener("load", () => {
   new Vue({
     el: "#transport-section",
     components: {
diff --git a/app/javascript/packs/treeview.js b/app/javascript/packs/treeview.js
index e4b3134..6d065e1 100644
--- a/app/javascript/packs/treeview.js
+++ b/app/javascript/packs/treeview.js
@@ -1,7 +1,7 @@
 /* global _ */
 "use strict";
 import "lodash/lodash";
-$(document).ready(() => {
+window.addEventListener("load", () => {
   new Vue({
     el: "#treeview",
     props: {
diff --git a/app/views/misc/information.html.haml b/app/views/misc/information.html.haml
index aba14fa..10b7618 100644
--- a/app/views/misc/information.html.haml
+++ b/app/views/misc/information.html.haml
@@ -65,7 +65,7 @@
               %td= value
 
 :javascript
-  $(document).ready(function() {
+  window.addEventListener("load", () => {
     $('#env-table').dataTable({
       "autoWidth": false,
       "ordering": true,
diff --git a/app/views/plugins/installed.html.haml b/app/views/plugins/installed.html.haml
index 9fb1fe0..e2a57f1 100644
--- a/app/views/plugins/installed.html.haml
+++ b/app/views/plugins/installed.html.haml
@@ -53,7 +53,7 @@
               = submit_tag t('plugins.common.install_latest_version'), class: "btn btn-primary"
 
 :javascript
-  $(document).ready(function() {
+  window.addEventListener("load", () => {
     $('#plugins-table').dataTable({
       "autoWidth": false,
       "ordering": true,
diff --git a/app/views/plugins/recommended.html.haml b/app/views/plugins/recommended.html.haml
index 102a5e9..4cd0ce9 100644
--- a/app/views/plugins/recommended.html.haml
+++ b/app/views/plugins/recommended.html.haml
@@ -29,7 +29,7 @@
 
 
 :javascript
-  $(document).ready(function() {
+  window.addEventListener("load", () => {
     $('#plugins-table').dataTable({
       "autoWidth": false,
       "ordering": true,