perf(nuxt): use granular imports for auto-importing composables (#23951)

.eslintrc

@@ -70,6 +70,11 @@
             "target": "packages/nuxt/src/app",
             "message": "app should not directly import from modules."
           },
+          {
+            "from": "packages/nuxt/src/app/**/index.ts",
+            "target": "packages/nuxt/src",
+            "message": "should not import from barrel/index files"
+          },
           {
             "from": "packages/nitro",
             "target": "packages/!(nitro)/**/*",

docs/3.api/5.kit/10.templates.md

@@ -112,7 +112,7 @@ export default defineNuxtModule({
 
 ```ts [plugin.ts]
 import { createHead as createClientHead, createServerHead } from '@unhead/vue'
-import { defineNuxtPlugin } from '#app'
+import { defineNuxtPlugin } from '#imports'
 // @ts-ignore
 import metaConfig from '#build/meta.config.mjs'
 

docs/3.api/5.kit/9.plugins.md

@@ -234,7 +234,7 @@ export default defineNuxtModule({
 
 ```ts [runtime/plugin.ejs]
 import { VueFire, useSSRInitialState } from 'vuefire'
-import { defineNuxtPlugin } from '#app'
+import { defineNuxtPlugin } from '#imports'
 
 export default defineNuxtPlugin((nuxtApp) => {
   const firebaseApp = nuxtApp.$firebaseApp

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

@@ -1,9 +1,10 @@
 import type { defineAsyncComponent } from 'vue'
 import { createVNode, defineComponent } from 'vue'
 
+import { createError } from '../composables/error'
+
 // @ts-expect-error virtual file
 import * as islandComponents from '#build/components.islands.mjs'
-import { createError } from '#app/composables/error'
 
 export default defineComponent({
   props: {

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

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

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

@@ -9,9 +9,9 @@ import type { FetchResponse } from 'ofetch'
 
 // eslint-disable-next-line import/no-restricted-paths
 import type { NuxtIslandResponse } from '../../core/runtime/nitro/renderer'
+import { useNuxtApp, useRuntimeConfig } from '../nuxt'
+import { prerenderRoutes, useRequestEvent } from '../composables/ssr'
 import { getFragmentHTML, getSlotProps } from './utils'
-import { useNuxtApp, useRuntimeConfig } from '#app/nuxt'
-import { prerenderRoutes, useRequestEvent } from '#app/composables/ssr'
 
 // @ts-expect-error virtual file
 import { remoteComponentIslands } from '#build/nuxt.config.mjs'

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

@@ -1,12 +1,15 @@
 import type { DefineComponent, MaybeRef, VNode } from 'vue'
 import { Suspense, Transition, computed, defineComponent, h, inject, mergeProps, nextTick, onMounted, provide, ref, unref } from 'vue'
 import type { RouteLocationNormalizedLoaded } from 'vue-router'
+
+// eslint-disable-next-line import/no-restricted-paths
+import type { PageMeta } from '../../pages/runtime/composables'
+
+import { useRoute } from '../composables/router'
+import { useNuxtApp } from '../nuxt'
 import { _wrapIf } from './utils'
 import { LayoutMetaSymbol, PageRouteSymbol } from './injections'
-import type { PageMeta } from '#app'
 
-import { useRoute } from '#app/composables/router'
-import { useNuxtApp } from '#app/nuxt'
 // @ts-expect-error virtual file
 import { useRoute as useVueRouterRoute } from '#build/pages'
 // @ts-expect-error virtual file

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

@@ -1,7 +1,7 @@
 import { computed, defineComponent, h, onBeforeUnmount, ref } from 'vue'
+import { useNuxtApp } from '../nuxt'
+import { useRouter } from '../composables/router'
 import { isChangingPage } from './utils'
-import { useNuxtApp } from '#app/nuxt'
-import { useRouter } from '#app/composables/router'
 
 // @ts-expect-error virtual file
 import { globalMiddleware } from '#build/middleware'

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

@@ -9,10 +9,10 @@
 
 <script setup>
 import { defineAsyncComponent, onErrorCaptured, onServerPrefetch, provide } from 'vue'
-import { useNuxtApp } from '#app/nuxt'
-import { isNuxtError, showError, useError } from '#app/composables/error'
-import { useRoute } from '#app/composables/router'
-import { PageRouteSymbol } from '#app/components/injections'
+import { useNuxtApp } from '../nuxt'
+import { isNuxtError, showError, useError } from '../composables/error'
+import { useRoute } from '../composables/router'
+import { PageRouteSymbol } from '../components/injections'
 import AppComponent from '#build/app-component.mjs'
 import ErrorComponent from '#build/error-component.mjs'
 

packages/nuxt/src/app/components/route-provider.ts

@@ -1,7 +1,7 @@
 import { defineComponent, h, nextTick, onMounted, provide, shallowReactive } from 'vue'
 import type { Ref, VNode } from 'vue'
 import type { RouteLocation, RouteLocationNormalizedLoaded } from '#vue-router'
-import { PageRouteSymbol } from '#app/components/injections'
+import { PageRouteSymbol } from './injections'
 
 export const RouteProvider = defineComponent({
   name: 'RouteProvider',

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

@@ -1,5 +1,5 @@
 import destr from 'destr'
-import { useNuxtApp } from '#app/nuxt'
+import { useNuxtApp } from '../nuxt'
 
 export interface ReloadNuxtAppOptions {
   /**

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

@@ -1,5 +1,5 @@
 import { useNuxtApp } from '../nuxt'
-import type { NuxtPayload } from '#app'
+import type { NuxtPayload } from '../nuxt'
 
 /**
  * Allows full control of the hydration cycle to set and receive data from the server.

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

@@ -1,7 +1,7 @@
 import type { MatcherExport, RouteMatcher } from 'radix3'
 import { createMatcherFromExport } from 'radix3'
 import { defu } from 'defu'
-import { useAppConfig } from '#app'
+import { useAppConfig } from '../config'
 // @ts-expect-error virtual file
 import { appManifest as isAppManifestEnabled } from '#build/nuxt.config.mjs'
 // @ts-expect-error virtual file

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

@@ -4,8 +4,8 @@ import { useHead } from '@unhead/vue'
 import { getCurrentInstance } from 'vue'
 import { useNuxtApp, useRuntimeConfig } from '../nuxt'
 
-import { getAppManifest, getRouteRules } from '#app/composables/manifest'
-import { useRoute } from '#app/composables'
+import { useRoute } from './router'
+import { getAppManifest, getRouteRules } from './manifest'
 
 // @ts-expect-error virtual import
 import { appManifest, payloadExtraction, renderJsonPayloads } from '#build/nuxt.config.mjs'

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

@@ -4,13 +4,14 @@ import type { NavigationFailure, NavigationGuard, RouteLocationNormalized, Route
 import { sanitizeStatusCode } from 'h3'
 import { hasProtocol, isScriptProtocol, joinURL, parseURL, withQuery } from 'ufo'
 
+// eslint-disable-next-line import/no-restricted-paths
+import type { PageMeta } from '../../pages/runtime/composables'
+
 import { useNuxtApp, useRuntimeConfig } from '../nuxt'
+import { PageRouteSymbol } from '../components/injections'
 import type { NuxtError } from './error'
 import { createError, showError } from './error'
 
-import type { PageMeta } from '#app'
-import { PageRouteSymbol } from '#app/components/injections'
-
 export const useRouter: typeof _useRouter = () => {
   return useNuxtApp()?.$router as Router
 }

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

@@ -1,7 +1,7 @@
 import { getRequestURL } from 'h3'
 import { joinURL } from 'ufo'
+import { useRuntimeConfig } from '../nuxt'
 import { useRequestEvent } from './ssr'
-import { useRuntimeConfig } from '#app'
 
 export function useRequestURL () {
   if (import.meta.server) {

packages/nuxt/src/app/entry.async.ts

@@ -1,4 +1,4 @@
-import type { CreateOptions } from '#app'
+import type { CreateOptions } from './nuxt'
 
 const entry = import.meta.server
   ? (ctx?: CreateOptions['ssrContext']) => import('#app/entry').then(m => m.default(ctx))

packages/nuxt/src/app/entry.ts

@@ -5,8 +5,8 @@ import { createApp, createSSRApp, nextTick } from 'vue'
 import '#build/paths.mjs'
 import '#build/fetch.mjs'
 
-import type { CreateOptions } from '#app'
-import { applyPlugins, createNuxtApp } from '#app/nuxt'
+import { applyPlugins, createNuxtApp } from './nuxt'
+import type { CreateOptions } from './nuxt'
 
 import '#build/css'
 // @ts-expect-error virtual file

packages/nuxt/src/app/index.ts

@@ -1,7 +1,9 @@
 /// <reference path="types/augments.d.ts" />
 
 export * from './nuxt'
+// eslint-disable-next-line import/no-restricted-paths
 export * from './composables/index'
+// eslint-disable-next-line import/no-restricted-paths
 export * from './components/index'
 export * from './config'
 export * from './compat/idle-callback'

packages/nuxt/src/app/middleware/manifest-route-rule.ts

@@ -1,5 +1,5 @@
-import { defineNuxtRouteMiddleware } from '#app/composables/router'
-import { getRouteRules } from '#app/composables/manifest'
+import { defineNuxtRouteMiddleware } from '../composables/router'
+import { getRouteRules } from '../composables/manifest'
 
 export default defineNuxtRouteMiddleware(async (to) => {
   if (import.meta.server || import.meta.test) { return }

packages/nuxt/src/app/nuxt.ts

@@ -9,14 +9,14 @@ import type { SSRContext, createRenderer } from 'vue-bundle-renderer/runtime'
 import type { H3Event } from 'h3'
 import type { AppConfig, AppConfigInput, RuntimeConfig } from 'nuxt/schema'
 import type { RenderResponse } from 'nitropack'
-
 import type { MergeHead, VueHeadClient } from '@unhead/vue'
+
 // eslint-disable-next-line import/no-restricted-paths
 import type { NuxtIslandContext } from '../core/runtime/nitro/renderer'
-import type { RouteMiddleware } from '../../app'
+import type { RouteMiddleware } from '../app/composables/router'
 import type { NuxtError } from '../app/composables/error'
 import type { AsyncDataRequestStatus } from '../app/composables/asyncData'
-import type { NuxtAppManifestMeta } from '#app/composables'
+import type { NuxtAppManifestMeta } from '../app/composables/manifest'
 
 const nuxtAppCtx = /* #__PURE__ */ getContext<NuxtApp>('nuxt-app', {
   asyncContext: !!process.env.NUXT_ASYNC_CONTEXT && process.server

packages/nuxt/src/app/plugins/check-outdated-build.client.ts

@@ -1,5 +1,7 @@
-import type { NuxtAppManifestMeta } from '#app'
-import { defineNuxtPlugin, getAppManifest, onNuxtReady } from '#app'
+import { defineNuxtPlugin } from '../nuxt'
+import { getAppManifest } from '../composables/manifest'
+import type { NuxtAppManifestMeta } from '../composables/manifest'
+import { onNuxtReady } from '../composables/ready'
 // @ts-expect-error virtual file
 import { buildAssetsURL } from '#build/paths.mjs'
 

packages/nuxt/src/app/plugins/chunk-reload.client.ts

@@ -1,8 +1,8 @@
 import { joinURL } from 'ufo'
 import type { RouteLocationNormalized } from 'vue-router'
-import { defineNuxtPlugin, useRuntimeConfig } from '#app/nuxt'
-import { useRouter } from '#app/composables/router'
-import { reloadNuxtApp } from '#app/composables/chunk'
+import { defineNuxtPlugin, useRuntimeConfig } from '../nuxt'
+import { useRouter } from '../composables/router'
+import { reloadNuxtApp } from '../composables/chunk'
 
 export default defineNuxtPlugin({
   name: 'nuxt:chunk-reload',

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

@@ -1,7 +1,7 @@
 import { ref } from 'vue'
 import { parseURL } from 'ufo'
 import { useHead } from '@unhead/vue'
-import { defineNuxtPlugin } from '#app/nuxt'
+import { defineNuxtPlugin } from '../nuxt'
 
 export default defineNuxtPlugin({
   name: 'nuxt:cross-origin-prefetch',

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

@@ -1,5 +1,5 @@
 import { createDebugger } from 'hookable'
-import { defineNuxtPlugin } from '#app/nuxt'
+import { defineNuxtPlugin } from '../nuxt'
 
 export default defineNuxtPlugin({
   name: 'nuxt:debug',

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

@@ -1,9 +1,9 @@
 import { parseURL } from 'ufo'
-import { defineNuxtPlugin } from '#app/nuxt'
-import { loadPayload } from '#app/composables/payload'
-import { onNuxtReady } from '#app/composables/ready'
-import { useRouter } from '#app/composables/router'
-import { getAppManifest } from '#app/composables/manifest'
+import { defineNuxtPlugin } from '../nuxt'
+import { loadPayload } from '../composables/payload'
+import { onNuxtReady } from '../composables/ready'
+import { useRouter } from '../composables/router'
+import { getAppManifest } from '../composables/manifest'
 // @ts-expect-error virtual file
 import { appManifest as isAppManifestEnabled } from '#build/nuxt.config.mjs'
 

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

@@ -1,4 +1,4 @@
-import { defineNuxtPlugin } from '#app/nuxt'
+import { defineNuxtPlugin } from '../nuxt'
 
 export default defineNuxtPlugin({
   name: 'nuxt:webpack-preload',

packages/nuxt/src/app/plugins/restore-state.client.ts

@@ -1,5 +1,5 @@
 import destr from 'destr'
-import { defineNuxtPlugin, useNuxtApp } from '#app/nuxt'
+import { defineNuxtPlugin, useNuxtApp } from '../nuxt'
 
 export default defineNuxtPlugin({
   name: 'nuxt:restore-state',

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

@@ -1,8 +1,8 @@
 import { reactive, ref, shallowReactive, shallowRef } from 'vue'
 import destr from 'destr'
-import { definePayloadReviver, getNuxtClientPayload } from '#app/composables/payload'
-import { createError } from '#app/composables/error'
-import { defineNuxtPlugin, useNuxtApp } from '#app/nuxt'
+import { definePayloadReviver, getNuxtClientPayload } from '../composables/payload'
+import { createError } from '../composables/error'
+import { defineNuxtPlugin, useNuxtApp } from '../nuxt'
 
 // @ts-expect-error Virtual file.
 import { componentIslands } from '#build/nuxt.config.mjs'

packages/nuxt/src/app/plugins/revive-payload.server.ts

@@ -1,7 +1,7 @@
 import { isReactive, isRef, isShallow, toRaw } from 'vue'
-import { definePayloadReducer } from '#app/composables/payload'
-import { isNuxtError } from '#app/composables/error'
-import { defineNuxtPlugin } from '#app/nuxt'
+import { definePayloadReducer } from '../composables/payload'
+import { isNuxtError } from '../composables/error'
+import { defineNuxtPlugin } from '../nuxt'
 
 // @ts-expect-error Virtual file.
 import { componentIslands } from '#build/nuxt.config.mjs'

packages/nuxt/src/app/plugins/view-transitions.client.ts

@@ -1,6 +1,6 @@
-import { isChangingPage } from '#app/components/utils'
-import { useRouter } from '#app/composables/router'
-import { defineNuxtPlugin } from '#app/nuxt'
+import { isChangingPage } from '../components/utils'
+import { useRouter } from '../composables/router'
+import { defineNuxtPlugin } from '../nuxt'
 
 export default defineNuxtPlugin((nuxtApp) => {
   if (!document.startViewTransition) { return }

packages/nuxt/src/core/templates.ts

@@ -285,7 +285,7 @@ export const appConfigTemplate: NuxtTemplate = {
   write: true,
   getContents: async ({ app, nuxt }) => {
     return `
-import { updateAppConfig } from '#app'
+import { updateAppConfig } from '#app/config'
 import { defuFn } from '${await _resolveId('defu')}'
 
 const inlineConfig = ${JSON.stringify(nuxt.options.appConfig, null, 2)}

packages/nuxt/src/head/runtime/plugins/unhead.ts

@@ -1,7 +1,6 @@
 import { createHead as createClientHead, setHeadInjectionHandler } from '@unhead/vue'
 import { renderDOMHead } from '@unhead/dom'
-import { defineNuxtPlugin } from '#app/nuxt'
-import { useNuxtApp } from '#app'
+import { defineNuxtPlugin, useNuxtApp } from '#app/nuxt'
 
 // @ts-expect-error virtual file
 import unheadPlugins from '#build/unhead-plugins.mjs'

packages/nuxt/src/imports/presets.ts

@@ -12,70 +12,89 @@ const commonPresets: InlinePreset[] = [
   })
 ]
 
-const appPreset = defineUnimportPreset({
-  from: '#app',
-  imports: [
-    'useAsyncData',
-    'useLazyAsyncData',
-    'useNuxtData',
-    'refreshNuxtData',
-    'clearNuxtData',
-    'defineNuxtComponent',
-    'useNuxtApp',
-    'defineNuxtPlugin',
-    'definePayloadPlugin',
-    'reloadNuxtApp',
-    'useRuntimeConfig',
-    'useState',
-    'clearNuxtState',
-    'useFetch',
-    'useLazyFetch',
-    'useCookie',
-    'useRequestHeaders',
-    'useRequestEvent',
-    'useRequestFetch',
-    'useRequestURL',
-    'setResponseStatus',
-    'setPageLayout',
-    'prerenderRoutes',
-    'onNuxtReady',
-    'useRouter',
-    'useRoute',
-    'defineNuxtRouteMiddleware',
-    'navigateTo',
-    'abortNavigation',
-    'addRouteMiddleware',
-    'showError',
-    'clearError',
-    'isNuxtError',
-    'useError',
-    'createError',
-    'defineNuxtLink',
-    'useAppConfig',
-    'updateAppConfig',
-    'defineAppConfig',
-    'preloadComponents',
-    'preloadRouteComponents',
-    'prefetchComponents',
-    'loadPayload',
-    'preloadPayload',
-    'isPrerendered',
-    'getAppManifest',
-    'getRouteRules',
-    'definePayloadReducer',
-    'definePayloadReviver',
-    'requestIdleCallback',
-    'cancelIdleCallback'
+const granularAppPresets: InlinePreset[] = [
+  {
+    from: '#app/components/nuxt-link',
+    imports: ['defineNuxtLink']
+  },
+  {
+    imports: ['useNuxtApp', 'defineNuxtPlugin', 'definePayloadPlugin', 'useRuntimeConfig', 'defineAppConfig'],
+    from: '#app/nuxt'
+  },
+  {
+    imports: ['requestIdleCallback', 'cancelIdleCallback'],
+    from: '#app/compat/idle-callback'
+  },
+  {
+    imports: ['useAppConfig', 'updateAppConfig'],
+    from: '#app/config'
+  },
+  {
+    imports: ['defineNuxtComponent'],
+    from: '#app/composables/component'
+  },
+  {
+    imports: ['useAsyncData', 'useLazyAsyncData', 'useNuxtData', 'refreshNuxtData', 'clearNuxtData'],
+    from: '#app/composables/asyncData'
+  },
+  {
+    imports: ['useHydration'],
+    from: '#app/composables/hydrate'
+  },
+  {
+    imports: ['useState', 'clearNuxtState'],
+    from: '#app/composables/state'
+  },
+  {
+    imports: ['clearError', 'createError', 'isNuxtError', 'showError', 'useError'],
+    from: '#app/composables/error'
+  },
+  {
+    imports: ['useFetch', 'useLazyFetch'],
+    from: '#app/composables/fetch'
+  },
+  {
+    imports: ['useCookie'],
+    from: '#app/composables/cookie'
+  },
+  {
+    imports: ['prerenderRoutes', 'useRequestHeaders', 'useRequestEvent', 'useRequestFetch', 'setResponseStatus'],
+    from: '#app/composables/ssr'
+  },
+  {
+    imports: ['onNuxtReady'],
+    from: '#app/composables/ready'
+  },
+  {
+    imports: ['preloadComponents', 'prefetchComponents', 'preloadRouteComponents'],
+    from: '#app/composables/preload'
+  },
+  {
+    imports: ['abortNavigation', 'addRouteMiddleware', 'defineNuxtRouteMiddleware', 'setPageLayout', 'navigateTo', 'useRoute', 'useRouter'],
+    from: '#app/composables/router'
+  },
+  {
+    imports: ['isPrerendered', 'loadPayload', 'preloadPayload', 'definePayloadReducer', 'definePayloadReviver'],
+    from: '#app/composables/payload'
+  },
+  {
+    imports: ['getAppManifest', 'getRouteRules'],
+    from: '#app/composables/manifest'
+  },
+  {
+    imports: ['reloadNuxtApp'],
+    from: '#app/composables/chunk'
+  },
+  {
+    imports: ['useRequestURL'],
+    from: '#app/composables/url'
+  }
 ]
-})
 
-// vue-router
+// This is a separate preset as we'll swap these out for import from `vue-router` itself in `pages` module
 const routerPreset = defineUnimportPreset({
-  from: '#app',
-  imports: [
-    'onBeforeRouteLeave',
-    'onBeforeRouteUpdate'
-  ]
+  imports: ['onBeforeRouteLeave', 'onBeforeRouteUpdate'],
+  from: '#app/composables/router'
 })
 
 // vue
@@ -180,7 +199,7 @@ const vueTypesPreset = defineUnimportPreset({
 
 export const defaultPresets: InlinePreset[] = [
   ...commonPresets,
-  appPreset,
+  ...granularAppPresets,
   routerPreset,
   vuePreset,
   vueTypesPreset

packages/nuxt/src/pages/module.ts

@@ -182,7 +182,7 @@ export default defineNuxtModule({
 
     // Add vue-router route guard imports
     nuxt.hook('imports:sources', (sources) => {
-      const routerImports = sources.find(s => s.from === '#app' && s.imports.includes('onBeforeRouteLeave'))
+      const routerImports = sources.find(s => s.from === '#app/composables/router' && s.imports.includes('onBeforeRouteLeave'))
       if (routerImports) {
         routerImports.from = '#vue-router'
       }

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

@@ -3,7 +3,7 @@ import { getCurrentInstance } from 'vue'
 import type { RouteLocationNormalized, RouteLocationNormalizedLoaded, RouteRecordRedirectOption } from '#vue-router'
 import { useRoute } from 'vue-router'
 import type { NitroRouteConfig } from 'nitropack'
-import type { NuxtError } from '#app'
+import type { NuxtError } from '#app/composables/error'
 
 export interface PageMeta {
   [key: string]: unknown

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

@@ -11,7 +11,10 @@ import {
 import { createError } from 'h3'
 import { isEqual, withoutBase } from 'ufo'
 
-import type { PageMeta, Plugin, RouteMiddleware } from '../../../app/index'
+import type { PageMeta } from '../composables'
+
+import type { RouteMiddleware } from '#app/composables/router'
+import type { Plugin } from '#app/nuxt'
 import { defineNuxtPlugin, useRuntimeConfig } from '#app/nuxt'
 import { clearError, showError, useError } from '#app/composables/error'
 import { navigateTo } from '#app/composables/router'

packages/nuxt/test/auto-imports.test.ts

@@ -68,7 +68,7 @@ describe('imports:nuxt', () => {
         continue
       }
       it(`should register ${name} globally`, () => {
-        expect(defaultPresets.flatMap(a => a.from === '#app' ? a.imports : [])).to.include(name)
+        expect(defaultPresets.flatMap(a => a.from.startsWith('#app/') ? a.imports : [])).to.include(name)
       })
     }
   } catch (e) {