refactor(fragment): add hook directly

Signed-off-by: Varun Patil <radialapps@gmail.com>

src/App.vue

@@ -67,7 +67,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import type { Route } from 'vue-router';
 
 import NcContent from '@nextcloud/vue/dist/Components/NcContent';
 import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent';
@@ -160,12 +159,6 @@ export default defineComponent({
     settingsOpen: false,
   }),
 
-  watch: {
-    async $route(to: Route, from: Route) {
-      utils.fragment.changeTrigger(to, from);
-    },
-  },
-
   computed: {
     native(): boolean {
       return nativex.has();

src/globals.d.ts

@@ -1,4 +1,4 @@
-import Router, { Route } from 'vue-router';
+import Router, { type Route } from 'vue-router';
 import type { ComponentPublicInstance } from 'vue';
 
 import type { translate, translatePlural } from '@nextcloud/l10n';

src/services/utils/fragment.ts

@@ -1,4 +1,3 @@
-import type { Route } from 'vue-router';
 import { bus } from './event-bus';
 
 /** Mapping of route name to key type */
@@ -161,13 +160,15 @@ export const fragment = {
   get viewer() {
     return this.get(FragmentType.viewer);
   },
+};
 
+document.addEventListener('DOMContentLoaded', () => {
   /**
-   * Trigger when route changes. Only called by App.vue as a router hook.
+   * Trigger when route changes; notify listeners of popped fragments.
    * @param to Switching to this route
    * @param from Switching from this route
    */
-  changeTrigger(to: Route, from: Route) {
+  _m.router.afterEach((to, from) => {
     const toF = decodeFragment(to.hash);
     const fromF = decodeFragment(from.hash);
 
@@ -183,5 +184,5 @@ export const fragment = {
           }
         }
       });
-  },
+  });
-};
+});