Removed the usage of Vue.util.defineReactive

- Saw that the Nuxt component wasn't needed any longer so I removed it instead of trying to work around Vue.util.defineReactive
codyrancher · Feb 29, 2024 · af097dc · af097dc
1 parent 2ac9f09
commit af097dc
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 132 deletions.
diff --git a/shell/components/nuxt/nuxt.js b/shell/components/nuxt/nuxt.js
diff --git a/shell/initialize/App.js b/shell/initialize/App.js
@@ -32,9 +32,6 @@ export default {
     showErrorPage: false,
   }),
 
-  beforeCreate() {
-    Vue.util.defineReactive(this, 'nuxt', this.$options.nuxt);
-  },
   created() {
     // add to window so we can listen when ready
     window.$globalApp = this;
@@ -52,7 +49,7 @@ export default {
     window.addEventListener('offline', this.refreshOnlineStatus);
 
     // Add $nuxt.error()
-    this.error = this.nuxt.error;
+    this.error = this.$options.nuxt.error;
     // Add $nuxt.context
     this.context = this.$options.context;
   },
@@ -129,10 +126,10 @@ export default {
       this.$loading.finish();
     },
     errorChanged() {
-      if (this.nuxt.err) {
+      if (this.$options.nuxt.err) {
         if (this.$loading) {
           if (this.$loading.fail) {
-            this.$loading.fail(this.nuxt.err);
+            this.$loading.fail(this.$options.nuxt.err);
           }
           if (this.$loading.finish) {
             this.$loading.finish();

diff --git a/shell/initialize/index.js b/shell/initialize/index.js
@@ -4,7 +4,6 @@
 import Vue from 'vue';
 import { createRouter } from '../config/router.js';
 import NuxtChild from '../components/nuxt/nuxt-child.js';
-import Nuxt from '../components/nuxt/nuxt.js';
 import App from './App.js';
 import { setContext, getLocation, getRouteData, normalizeError } from '../utils/nuxt';
 import { createStore } from '../config/store.js';
@@ -68,18 +67,6 @@ loadDirectives();
 Vue.component(NuxtChild.name, NuxtChild);
 Vue.component('NChild', NuxtChild);
 
-// Component NuxtLink is imported in server.js or client.js
-
-// Component: <Nuxt>
-Vue.component(Nuxt.name, Nuxt);
-
-Object.defineProperty(Vue.prototype, '$nuxt', {
-  get() {
-    return window.$globalApp;
-  },
-  configurable: true
-});
-
 async function createApp(config = {}) {
   const router = await createRouter(config);
 

diff --git a/shell/mixins/fetch.client.js b/shell/mixins/fetch.client.js
@@ -1,4 +1,3 @@
-import Vue from 'vue';
 import { hasFetch, normalizeError, addLifecycleHook } from '../utils/nuxt';
 
 export default {
@@ -9,14 +8,24 @@ export default {
 
     this._fetchDelay = typeof this.$options.fetchDelay === 'number' ? this.$options.fetchDelay : 200;
 
-    Vue.util.defineReactive(this, '$fetchState', {
-      pending:   false,
-      error:     null,
-      timestamp: Date.now()
-    });
-
     this.$fetch = $fetch.bind(this);
     addLifecycleHook(this, 'beforeMount', beforeMount);
+  },
+
+  data() {
+    return {
+      state: {
+        pending:   false,
+        error:     null,
+        timestamp: Date.now()
+      }
+    };
+  },
+
+  computed: {
+    $fetchState() {
+      return this.state;
+    }
   }
 };
 
@@ -38,8 +47,8 @@ function $fetch() {
 }
 
 async function $_fetch() { // eslint-disable-line camelcase
-  this.$fetchState.pending = true;
-  this.$fetchState.error = null;
+  this.state.pending = true;
+  this.state.error = null;
   this._hydrated = false;
   let error = null;
   const startTime = Date.now();
@@ -59,7 +68,7 @@ async function $_fetch() { // eslint-disable-line camelcase
     await new Promise((resolve) => setTimeout(resolve, delayLeft));
   }
 
-  this.$fetchState.error = error;
-  this.$fetchState.pending = false;
-  this.$fetchState.timestamp = Date.now();
+  this.state.error = error;
+  this.state.pending = false;
+  this.state.timestamp = Date.now();
 }