refactor(nuxt): within nuxt app, import directly from source file (#18902)

packages/nuxt/src/app/components/island-renderer.ts

@@ -2,7 +2,7 @@ import { createBlock, defineComponent, h, Teleport } from 'vue'
 
 // @ts-ignore
 import * as islandComponents from '#build/components.islands.mjs'
-import { createError } from '#app'
+import { createError } from '#app/composables/error'
 
 export default defineComponent({
   props: {

packages/nuxt/src/app/components/layout.ts

@@ -2,7 +2,7 @@ import type { Ref, VNode } from 'vue'
 import { computed, defineComponent, h, inject, nextTick, onMounted, Transition, unref } from 'vue'
 import type { RouteLocationNormalizedLoaded } from 'vue-router'
 import { _wrapIf } from './utils'
-import { useRoute } from '#app'
+import { useRoute } from '#app/composables/router'
 // @ts-ignore
 import { useRoute as useVueRouterRoute } from '#build/pages'
 // @ts-ignore

packages/nuxt/src/app/components/nuxt-error-boundary.ts

@@ -1,5 +1,5 @@
 import { defineComponent, ref, onErrorCaptured } from 'vue'
-import { useNuxtApp } from '#app'
+import { useNuxtApp } from '#app/nuxt'
 
 export default defineComponent({
   emits: {

packages/nuxt/src/app/components/nuxt-island.ts

@@ -5,7 +5,9 @@ import type { MetaObject } from '@nuxt/schema'
 import { appendHeader } from 'h3'
 // eslint-disable-next-line import/no-restricted-paths
 import type { NuxtIslandResponse } from '../../core/runtime/nitro/renderer'
-import { useHead, useNuxtApp, useRequestEvent } from '#app'
+import { useNuxtApp } from '#app/nuxt'
+import { useRequestEvent } from '#app/composables/ssr'
+import { useHead } from '#app/composables/head'
 
 const pKey = '_islandPromises'
 

packages/nuxt/src/app/components/nuxt-loading-indicator.ts

@@ -1,5 +1,5 @@
 import { computed, defineComponent, h, onBeforeUnmount, ref } from 'vue'
-import { useNuxtApp } from '#app'
+import { useNuxtApp } from '#app/nuxt'
 
 export default defineComponent({
   name: 'NuxtLoadingIndicator',

packages/nuxt/src/app/components/nuxt-root.vue

@@ -8,7 +8,9 @@
 
 <script setup>
 import { defineAsyncComponent, onErrorCaptured, onServerPrefetch, provide } from 'vue'
-import { callWithNuxt, isNuxtError, showError, useError, useRoute, useNuxtApp } from '#app'
+import { callWithNuxt, useNuxtApp } from '#app/nuxt'
+import { isNuxtError, showError, useError } from '#app/composables/error'
+import { useRoute } from '#app/composables/router'
 import AppComponent from '#build/app-component.mjs'
 
 const ErrorComponent = defineAsyncComponent(() => import('#build/error-component.mjs').then(r => r.default || r))

packages/nuxt/src/app/composables/component.ts

@@ -4,9 +4,7 @@ import type { NuxtApp } from '../nuxt'
 import { useNuxtApp } from '../nuxt'
 import { useAsyncData } from './asyncData'
 import { useRoute } from './router'
-
-// eslint-disable-next-line import/no-restricted-paths
-import { useHead } from '#head'
+import { useHead } from './head'
 
 export const NuxtComponentIndicator = '__nuxt_component'
 

packages/nuxt/src/app/composables/head.ts

@@ -0,0 +1,4 @@
+// eslint-disable-next-line import/no-restricted-paths
+export type { MetaObject } from '#head'
+// eslint-disable-next-line import/no-restricted-paths
+export { useHead, useSeoMeta, useServerSeoMeta } from '#head'

packages/nuxt/src/app/composables/index.ts

@@ -15,3 +15,5 @@ export { abortNavigation, addRouteMiddleware, defineNuxtRouteMiddleware, onBefor
 export type { AddRouteMiddlewareOptions, RouteMiddleware } from './router'
 export { preloadComponents, prefetchComponents, preloadRouteComponents } from './preload'
 export { isPrerendered, loadPayload, preloadPayload } from './payload'
+export type { MetaObject } from './head'
+export { useHead, useSeoMeta, useServerSeoMeta } from './head'

packages/nuxt/src/app/composables/payload.ts

@@ -1,6 +1,7 @@
 import { joinURL } from 'ufo'
 import { useNuxtApp } from '../nuxt'
-import { useHead, useRuntimeConfig } from '..'
+import { useRuntimeConfig } from '../nuxt'
+import { useHead } from './head'
 
 interface LoadPayloadOptions {
   fresh?: boolean

packages/nuxt/src/app/entry.ts

@@ -4,7 +4,7 @@ import { $fetch } from 'ofetch'
 // @ts-ignore
 import { baseURL } from '#build/paths.mjs'
 import type { CreateOptions } from '#app'
-import { createNuxtApp, applyPlugins, normalizePlugins } from '#app'
+import { createNuxtApp, applyPlugins, normalizePlugins } from '#app/nuxt'
 import '#build/css'
 // @ts-ignore
 import _plugins from '#build/plugins'

packages/nuxt/src/app/index.ts

@@ -7,10 +7,6 @@ export * from './config'
 
 // eslint-disable-next-line import/no-restricted-paths
 export type { PageMeta } from '../pages/runtime'
-// eslint-disable-next-line import/no-restricted-paths
-export type { MetaObject } from '../head/runtime'
-// eslint-disable-next-line import/no-restricted-paths
-export { useHead } from '#head'
 
 export const isVue2 = false
 export const isVue3 = true

packages/nuxt/src/app/plugins/cross-origin-prefetch.client.ts

@@ -1,6 +1,7 @@
 import { ref } from 'vue'
 import { parseURL } from 'ufo'
-import { defineNuxtPlugin, useHead } from '#app'
+import { defineNuxtPlugin } from '#app/nuxt'
+import { useHead } from '#app/composables/head'
 
 export default defineNuxtPlugin((nuxtApp) => {
   const externalURLs = ref(new Set<string>())

packages/nuxt/src/app/plugins/debug.ts

@@ -1,5 +1,5 @@
 import { createDebugger } from 'hookable'
-import { defineNuxtPlugin } from '#app'
+import { defineNuxtPlugin } from '#app/nuxt'
 
 export default defineNuxtPlugin((nuxtApp) => {
   createDebugger(nuxtApp.hooks, { tag: 'nuxt-app' })

packages/nuxt/src/app/plugins/payload.client.ts

@@ -1,5 +1,7 @@
 import { parseURL } from 'ufo'
-import { defineNuxtPlugin, loadPayload, isPrerendered, useRouter } from '#app'
+import { defineNuxtPlugin } from '#app/nuxt'
+import { loadPayload, isPrerendered } from '#app/composables/payload'
+import { useRouter } from '#app/composables/router'
 
 export default defineNuxtPlugin((nuxtApp) => {
   // Only enable behavior if initial page is prerendered

packages/nuxt/src/app/plugins/preload.server.ts

@@ -1,4 +1,4 @@
-import { defineNuxtPlugin } from '#app'
+import { defineNuxtPlugin } from '#app/nuxt'
 
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.mixin({

packages/nuxt/src/app/plugins/router.ts

@@ -1,7 +1,12 @@
 import { reactive, h, isReadonly } from 'vue'
 import { parseURL, stringifyParsedURL, parseQuery, stringifyQuery, withoutBase, isEqual, joinURL } from 'ufo'
 import { createError } from 'h3'
-import { defineNuxtPlugin, clearError, navigateTo, showError, useRuntimeConfig, useState, useRequestEvent } from '..'
+import { defineNuxtPlugin, useRuntimeConfig } from '../nuxt'
+import { clearError, showError } from '../composables/error'
+import { navigateTo } from '../composables/router'
+import { useState } from '../composables/state'
+import { useRequestEvent } from '../composables/ssr'
+
 import { callWithNuxt } from '../nuxt'
 // @ts-ignore
 import { globalMiddleware } from '#build/middleware'

packages/nuxt/src/components/runtime/server-component.ts

@@ -4,7 +4,10 @@ import { hash } from 'ohash'
 import { appendHeader } from 'h3'
 
 import type { NuxtIslandResponse } from '../../core/runtime/nitro/renderer'
-import { useAsyncData, useHead, useNuxtApp, useRequestEvent } from '#app'
+import { useNuxtApp } from '#app/nuxt'
+import { useRequestEvent } from '#app/composables/ssr'
+import { useAsyncData } from '#app/composables/asyncData'
+import { useHead } from '#app/composables/head'
 
 const pKey = '_islandPromises'
 

packages/nuxt/src/components/templates.ts

@@ -31,7 +31,7 @@ export const componentsPluginTemplate: NuxtPluginTemplate<ComponentsTemplateCont
     const globalComponents = options.getComponents().filter(c => c.global === true)
 
     return `import { defineAsyncComponent } from 'vue'
-import { defineNuxtPlugin } from '#app'
+import { defineNuxtPlugin } from '#app/nuxt'
 
 const components = ${genObjectFromRawEntries(globalComponents.map((c) => {
   const exp = c.export === 'default' ? 'c.default || c' : `c['${c.export}']`

packages/nuxt/src/core/runtime/nitro/renderer.ts

@@ -10,7 +10,7 @@ import { renderToString as _renderToString } from 'vue/server-renderer'
 import { useRuntimeConfig, useNitroApp, defineRenderHandler, getRouteRules } from '#internal/nitro'
 import { hash } from 'ohash'
 // eslint-disable-next-line import/no-restricted-paths
-import type { NuxtApp, NuxtSSRContext } from '#app'
+import type { NuxtApp, NuxtSSRContext } from '#app/nuxt'
 // @ts-ignore
 import { appRootId, appRootTag } from '#internal/nuxt.config.mjs'
 // @ts-ignore

packages/nuxt/src/head/runtime/composables.ts

@@ -1,7 +1,7 @@
 import type { HeadEntryOptions, UseHeadInput, ActiveHeadEntry } from '@vueuse/head'
 import type { HeadAugmentations } from '@nuxt/schema'
 import { useSeoMeta as _useSeoMeta } from '@vueuse/head'
-import { useNuxtApp } from '#app'
+import { useNuxtApp } from '#app/nuxt'
 
 /**
  * You can pass in a meta object, which has keys corresponding to meta tags:

packages/nuxt/src/head/runtime/lib/vueuse-head.plugin.ts

@@ -1,6 +1,6 @@
 import { createHead, useHead } from '@vueuse/head'
 import { renderSSRHead } from '@unhead/ssr'
-import { defineNuxtPlugin } from '#app'
+import { defineNuxtPlugin } from '#app/nuxt'
 // @ts-expect-error untyped
 import { appHead } from '#build/nuxt.config.mjs'
 

packages/nuxt/src/imports/presets.ts

@@ -2,15 +2,6 @@ import type { InlinePreset } from 'unimport'
 import { defineUnimportPreset } from 'unimport'
 
 const commonPresets: InlinePreset[] = [
-  // #head
-  defineUnimportPreset({
-    from: '#head',
-    imports: [
-      'useHead',
-      'useSeoMeta',
-      'useServerSeoMeta'
-    ]
-  }),
   // vue-demi (mocked)
   defineUnimportPreset({
     from: 'vue-demi',
@@ -24,6 +15,9 @@ const commonPresets: InlinePreset[] = [
 const appPreset = defineUnimportPreset({
   from: '#app',
   imports: [
+    'useHead',
+    'useSeoMeta',
+    'useServerSeoMeta',
     'useAsyncData',
     'useLazyAsyncData',
     'useNuxtData',

packages/nuxt/src/pages/runtime/page.ts

@@ -6,7 +6,7 @@ import type { RouteLocationNormalized, RouteLocationNormalizedLoaded, RouteLocat
 
 import type { RouterViewSlotProps } from './utils'
 import { generateRouteKey, wrapInKeepAlive } from './utils'
-import { useNuxtApp } from '#app'
+import { useNuxtApp } from '#app/nuxt'
 import { _wrapIf } from '#app/components/utils'
 // @ts-ignore
 import { appPageTransition as defaultPageTransition, appKeepalive as defaultKeepaliveConfig } from '#build/nuxt.config.mjs'

packages/nuxt/src/pages/runtime/plugins/prefetch.client.ts

@@ -1,5 +1,6 @@
 import { hasProtocol } from 'ufo'
-import { defineNuxtPlugin, useNuxtApp, useRouter } from '#app'
+import { defineNuxtPlugin, useNuxtApp } from '#app/nuxt'
+import { useRouter } from '#app/composables/router'
 // @ts-ignore
 import layouts from '#build/layouts'
 // @ts-ignore

packages/nuxt/src/pages/runtime/plugins/router.ts

@@ -11,7 +11,12 @@ import {
 } from 'vue-router'
 import { createError } from 'h3'
 import { withoutBase, isEqual } from 'ufo'
-import { callWithNuxt, defineNuxtPlugin, useRuntimeConfig, showError, clearError, navigateTo, useError, useState, useRequestEvent } from '#app'
+import { callWithNuxt, defineNuxtPlugin, useRuntimeConfig } from '#app/nuxt'
+import { showError, clearError, useError } from '#app/composables/error'
+import { useRequestEvent } from '#app/composables/ssr'
+import { useState } from '#app/composables/state'
+import { navigateTo } from '#app/composables/router'
+
 // @ts-ignore
 import _routes from '#build/routes'
 // @ts-ignore

packages/nuxt/src/pages/runtime/router.options.ts

@@ -1,7 +1,7 @@
 import type { RouterConfig } from '@nuxt/schema'
 import type { RouterScrollBehavior, RouteLocationNormalized } from 'vue-router'
 import { nextTick } from 'vue'
-import { useNuxtApp } from '#app'
+import { useNuxtApp } from '#app/nuxt'
 // @ts-ignore
 import { appPageTransition as defaultPageTransition } from '#build/nuxt.config.mjs'
 

packages/nuxt/src/pages/runtime/validate.ts

@@ -1,4 +1,4 @@
-import { defineNuxtRouteMiddleware } from '#app'
+import { defineNuxtRouteMiddleware } from '#app/composables/router'
 
 export default defineNuxtRouteMiddleware(async (to) => {
   if (!to.meta?.validate) { return }

test/bundle.test.ts

@@ -29,7 +29,7 @@ describe.skipIf(isWindows)('minimal nuxt application', () => {
     expect(stats.client.totalBytes).toBeLessThan(108000)
     expect(stats.client.files.map(f => f.replace(/\..*\.js/, '.js'))).toMatchInlineSnapshot(`
       [
-        "_nuxt/composables.js",
+        "_nuxt/app.js",
         "_nuxt/entry.js",
         "_nuxt/error-404.js",
         "_nuxt/error-500.js",