Vue 3 Nuxtism Removal (rancher#10533)

* Removing everything related to scrollTrigger.

The latest vue router seems to behave exactly as it does with the modified scrollBehavior so it can all be removed.

* Removing unused $nuxt.{suffixes} that I found
- routeChanged  (didn't find any watches of this event)
- nbFetching (The only place reading this was a computed property which wasn't used anywhere)

* Replace the use of Vue[installKey]

* Removing some ssr rehydration code since we're not doing ssr

* Remove the remaining $nuxt.$on,$off,$emit and replace with the use of our primary store which already had related code

* Replacing usages of the .$nuxt on vue instances with globalApp references

* Removing SSR dead code

* Fixing an issue where extensions could still be referencing window.$nuxt. This now provides a deprecation warning.

* Migrating another $nuxt over to the window.$globalApp

* Removed the usage of Vue.config.$nux

* 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

* Re-run missing check

---------

Co-authored-by: cnotv <[email protected]>

shell/cloud-credential/harvester.vue

@@ -47,11 +47,11 @@ export default {
 
       const currentCluster = this.$store.getters['management/all'](MANAGEMENT.CLUSTER).find((x) => x.id === neu);
 
-      this.$nuxt.$loading.start();
+      window.$globalApp.$loading.start();
 
       const kubeconfigContent = await currentCluster.generateKubeConfig();
 
-      this.$nuxt.$loading.finish();
+      window.$globalApp.$loading.finish();
 
       this.value.setData('kubeconfigContent', kubeconfigContent);
     },

shell/components/nav/Header.vue

@@ -20,8 +20,6 @@ import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
 import IconOrSvg from '@shell/components/IconOrSvg';
 import { wait } from '@shell/utils/async';
 
-const PAGE_HEADER_ACTION = 'page-action';
-
 export default {
 
   components: {
@@ -117,7 +115,7 @@ export default {
     },
 
     showPageActions() {
-      return !this.featureRancherDesktop && this.pageActions?.length;
+      return !this.featureRancherDesktop && this.pageActions && this.pageActions.length;
     },
 
     showUserMenu() {
@@ -274,7 +272,7 @@ export default {
     },
 
     pageAction(action) {
-      this.$nuxt.$emit(PAGE_HEADER_ACTION, action);
+      this.$store.dispatch('handlePageAction', action);
     },
 
     checkClusterName() {

shell/components/nuxt/nuxt-child.js

@@ -30,13 +30,8 @@ export default {
 
     const listeners = {}
 
-    // Add triggerScroll event on beforeEnter (fix #1376)
     const beforeEnter = listeners.beforeEnter
     listeners.beforeEnter = (el) => {
-      // Ensure to trigger scroll event after calling scrollBehavior
-      window.$nuxt.$nextTick(() => {
-        window.$nuxt.$emit('triggerScroll')
-      })
       if (beforeEnter) {
         return beforeEnter.call(_parent, el)
       }

shell/components/nuxt/nuxt-link.client.js

@@ -68,7 +68,7 @@ export default {
     },
     canPrefetch () {
       const conn = navigator.connection
-      const hasBadConnection = this.$nuxt.isOffline || (conn && ((conn.effectiveType || '').includes('2g') || conn.saveData))
+      const hasBadConnection = window.$globalApp.isOffline || (conn && ((conn.effectiveType || '').includes('2g') || conn.saveData))
 
       return !hasBadConnection
     },

shell/components/templates/error.vue

@@ -12,7 +12,7 @@ export default {
 
   computed: {
     error() {
-      return window.$nuxt.nuxt.err || {};
+      return window.$globalApp.nuxt.err || {};
     },
     statusCode() {
       return (this.error && this.error.statusCode) || 599;

shell/config/router.js

@@ -2,7 +2,6 @@ import Vue from 'vue';
 import Router from 'vue-router';
 import { normalizeURL } from 'ufo';
 import { interopDefault } from '../utils/nuxt';
-import scrollBehavior from '../utils/router.scrollBehavior.js';
 
 const emptyFn = () => {};
 
@@ -12,7 +11,6 @@ export const routerOptions = {
   mode: 'history',
   // Note: router base comes from the ROUTER_BASE env var
   base: process.env.routerBase || '/',
-  scrollBehavior,
 
   routes: [
     {

shell/config/store.js

@@ -66,7 +66,7 @@ let store = {};
       // Update `root.modules` with the latest definitions.
       updateModules();
       // Trigger a hot update in the store.
-      window.$nuxt.$store.hotUpdate(store);
+      window.$globalApp.$store.hotUpdate(store);
     });
   }
 })();

shell/initialize/App.js

@@ -30,27 +30,26 @@ export default {
     isOnline: true,
 
     showErrorPage: false,
-
-    nbFetching: 0
   }),
 
-  beforeCreate() {
-    Vue.util.defineReactive(this, 'nuxt', this.$options.nuxt);
-  },
   created() {
-    // Add this.$nuxt in child instances
-    this.$root.$options.$nuxt = this;
-
     // add to window so we can listen when ready
-    window.$nuxt = this;
+    window.$globalApp = this;
+    Object.defineProperty(window, '$nuxt', {
+      get() {
+        console.warn('window.$nuxt is deprecated. It would be best to stop using globalState all together. For an alternative you can use window.$globalApp.'); // eslint-disable-line no-console
+
+        return window.$globalApp;
+      }
+    });
 
     this.refreshOnlineStatus();
     // Setup the listeners
     window.addEventListener('online', this.refreshOnlineStatus);
     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;
   },
@@ -65,10 +64,6 @@ export default {
     isOffline() {
       return !this.isOnline;
     },
-
-    isFetching() {
-      return this.nbFetching > 0;
-    },
   },
 
   methods: {
@@ -131,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();