fix(vue): mock nuxtApp.hooks & useRuntimeHook

package.json

@@ -104,6 +104,7 @@
     "embla-carousel-vue": "^8.5.2",
     "embla-carousel-wheel-gestures": "^8.0.1",
     "fuse.js": "^7.1.0",
+    "hookable": "^5.5.3",
     "knitwork": "^1.2.0",
     "magic-string": "^0.30.17",
     "mlly": "^1.7.4",

pnpm-lock.yaml

@@ -94,6 +94,9 @@ importers:
       fuse.js:
         specifier: ^7.1.0
         version: 7.1.0
+      hookable:
+        specifier: ^5.5.3
+        version: 5.5.3
       joi:
         specifier: ^17.13.0
         version: 17.13.3

src/runtime/vue/stubs.ts

@@ -1,5 +1,6 @@
-import { ref } from 'vue'
+import { ref, onScopeDispose } from 'vue'
 import type { Ref, Plugin as VuePlugin } from 'vue'
+import { createHooks } from 'hookable'
 
 import appConfig from '#build/app.config'
 import type { NuxtApp } from '#app'
@@ -58,13 +59,25 @@ export const useState = <T>(key: string, init: () => T): Ref<T> => {
   return value as Ref<T>
 }
 
+const hooks = createHooks()
+
 export function useNuxtApp() {
   return {
     isHydrating: true,
-    payload: { serverRendered: false }
+    payload: { serverRendered: false },
+    hooks,
+    hook: hooks.hook
   }
 }
 
+export function useRuntimeHook(name: string, fn: (...args: any[]) => void): void {
+  const nuxtApp = useNuxtApp()
+
+  const unregister = nuxtApp.hook(name, fn)
+
+  onScopeDispose(unregister)
+}
+
 export function defineNuxtPlugin(plugin: (nuxtApp: NuxtApp) => void) {
   return {
     install(app) {