feat(nuxt): allow configuring default `<NuxtLink>` options (#23724)

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

@@ -9,6 +9,9 @@ import { navigateTo, useRouter } from '../composables/router'
 import { useNuxtApp } from '../nuxt'
 import { cancelIdleCallback, requestIdleCallback } from '../compat/idle-callback'
 
+// @ts-expect-error virtual file
+import { nuxtLinkDefaults } from '#build/nuxt.config.mjs'
+
 const firstNonUndefined = <T> (...args: (T | undefined)[]) => args.find(arg => arg !== undefined)
 
 const DEFAULT_EXTERNAL_REL_ATTRIBUTE = 'noopener noreferrer'
@@ -332,7 +335,7 @@ export function defineNuxtLink (options: NuxtLinkOptions) {
   }) as unknown as DefineComponent<NuxtLinkProps>
 }
 
-export default defineNuxtLink({ componentName: 'NuxtLink' })
+export default defineNuxtLink(nuxtLinkDefaults)
 
 // --- Prefetching utils ---
 type CallbackFn = () => void

packages/nuxt/src/core/templates.ts

@@ -347,6 +347,7 @@ export const nuxtConfigTemplate = {
       `export const remoteComponentIslands = ${ctx.nuxt.options.experimental.componentIslands === 'local+remote'}`,
       `export const devPagesDir = ${ctx.nuxt.options.dev ? JSON.stringify(ctx.nuxt.options.dir.pages) : 'null'}`,
       `export const devRootDir = ${ctx.nuxt.options.dev ? JSON.stringify(ctx.nuxt.options.rootDir) : 'null'}`,
+      `export const nuxtLinkDefaults = ${JSON.stringify(ctx.nuxt.options.experimental.defaults.nuxtLink)}`,
       `export const vueAppRootContainer = ${ctx.nuxt.options.app.rootId ? `'#${ctx.nuxt.options.app.rootId}'` : `'body > ${ctx.nuxt.options.app.rootTag}'`}`
     ].join('\n\n')
   }

packages/schema/build.config.ts

@@ -20,6 +20,7 @@ export default defineBuildConfig({
   ],
   externals: [
     // Type imports
+    '#app/components/nuxt-link',
     'vue-router',
     '@nuxt/telemetry',
     'vue-bundle-renderer',

packages/schema/src/config/experimental.ts

@@ -246,6 +246,19 @@ export default defineUntypedSchema({
      * For more control, such as if you are using a custom `path` or `alias` set in the page's `definePageMeta`, you
      * should set `routeRules` directly within your `nuxt.config`.
      */
-    inlineRouteRules: false
+    inlineRouteRules: false,
+
+    /**
+     * This allows specifying the default options for core Nuxt components and composables.
+     *
+     * These options will likely be moved elsewhere in the future, such as into `app.config` or into the
+     * `app/` directory.
+     */
+    defaults: {
+      /** @type {typeof import('#app/components/nuxt-link')['NuxtLinkOptions']} */
+      nuxtLink: {
+        componentName: 'NuxtLink'
+      }
+    }
   }
 })

test/mocks/nuxt-config.ts

@@ -0,0 +1,3 @@
+export const nuxtLinkDefaults = {
+  componentName: 'NuxtLink'
+}

vitest.config.ts

@@ -6,6 +6,7 @@ import { isWindows } from 'std-env'
 export default defineConfig({
   resolve: {
     alias: {
+      '#build/nuxt.config.mjs': resolve('./test/mocks/nuxt-config'),
       '#app': resolve('./packages/nuxt/dist/app/index'),
       '@nuxt/test-utils/experimental': resolve('./packages/test-utils/src/experimental.ts'),
       '@nuxt/test-utils': resolve('./packages/test-utils/src/index.ts')