diff --git a/packages/app/src/plugins/progress.client.ts b/packages/app/src/plugins/progress.client.ts
index 6015863317..3c1c6834ce 100644
--- a/packages/app/src/plugins/progress.client.ts
+++ b/packages/app/src/plugins/progress.client.ts
@@ -2,7 +2,7 @@ import type { Plugin } from '@nuxt/app'
 
 export default <Plugin> function progressbar ({ app }) {
   const { $nuxt } = app
-  $nuxt.hooks.hook('app:mounted', () => {
+  $nuxt.hook('app:mounted', () => {
     const el = document.createElement('div')
     el.id = 'nuxt-progress'
     document.body.appendChild(el)
@@ -16,7 +16,7 @@ export default <Plugin> function progressbar ({ app }) {
     const progress = 10000 / Math.floor(duration)
     let timeout
     let interval
-    $nuxt.hooks.hook('page:start', () => {
+    $nuxt.hook('page:start', () => {
       if (timeout) { return }
       timeout = setTimeout(() => {
         let width = 10
@@ -29,7 +29,7 @@ export default <Plugin> function progressbar ({ app }) {
         }, 100)
       }, 200)
     })
-    $nuxt.hooks.hook('page:finish', () => {
+    $nuxt.hook('page:finish', () => {
       timeout && clearTimeout(timeout)
       timeout = null
       interval && clearInterval(interval)
diff --git a/packages/app/src/plugins/router/NuxtPage.vue b/packages/app/src/plugins/router/NuxtPage.vue
index 0404dac042..f11ab56b32 100644
--- a/packages/app/src/plugins/router/NuxtPage.vue
+++ b/packages/app/src/plugins/router/NuxtPage.vue
@@ -2,7 +2,7 @@
   <RouterView v-slot="{ Component }">
     <transition name="page" mode="out-in">
       <!-- <keep-alive> -->
-      <Suspense @pending="$nuxt.hooks.callHook('page:start')" @resolve="$nuxt.hooks.callHook('page:finish')">
+      <Suspense @pending="$nuxt.callHook('page:start')" @resolve="$nuxt.callHook('page:finish')">
         <component :is="Component" :key="$route.path" />
       </Suspense>
       <!-- <keep-alive -->