From 6530e7a5e67eda7b246d1a9ff223dfbfa98a390c Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 1 Jan 2025 22:59:53 +0000
Subject: [PATCH] chore: use deeper import for use nuxt app + convert to async
 function

---
 .../components/runtime/client-component.ts    | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/nuxt/src/components/runtime/client-component.ts b/packages/nuxt/src/components/runtime/client-component.ts
index 12c011aca5..42c8976352 100644
--- a/packages/nuxt/src/components/runtime/client-component.ts
+++ b/packages/nuxt/src/components/runtime/client-component.ts
@@ -1,19 +1,19 @@
+import { h, onMounted, ref } from 'vue'
+import type { AsyncComponentLoader, ComponentOptions } from 'vue'
 import { isPromise } from '@vue/shared'
-import { type AsyncComponentLoader, type ComponentOptions, h, onMounted, ref } from 'vue'
-import { useNuxtApp } from '#app'
+import { useNuxtApp } from '#app/nuxt'
 import ServerPlaceholder from '#app/components/server-placeholder'
 
 /* @__NO_SIDE_EFFECTS__ */
-export const createClientPage = (loader: AsyncComponentLoader) => {
-  // Vue-router: Write "() => import('./MyPage.vue')" instead of "defineAsyncComponent(() => import('./MyPage.vue'))".
-  return loader().then((m) => {
-    const c = m.default || m
-    if (import.meta.dev) {
-      // mark component as client-only for `definePageMeta`
-      c.__clientOnlyPage = true
-    }
-    return pageToClientOnly(c)
-  })
+export async function createClientPage (loader: AsyncComponentLoader) {
+  // vue-router: Write "() => import('./MyPage.vue')" instead of "defineAsyncComponent(() => import('./MyPage.vue'))".
+  const m = await loader()
+  const c = m.default || m
+  if (import.meta.dev) {
+    // mark component as client-only for `definePageMeta`
+    c.__clientOnlyPage = true
+  }
+  return pageToClientOnly(c)
 }
 
 const cache = new WeakMap()