diff --git a/packages/kit/src/module/utils.ts b/packages/kit/src/module/utils.ts
index 9568fb8d5d..4dc96ed2be 100644
--- a/packages/kit/src/module/utils.ts
+++ b/packages/kit/src/module/utils.ts
@@ -10,6 +10,7 @@ import { NuxtCompatibilityConstraints, NuxtCompatibilityIssues } from '../types/
 import { Nuxt } from '../types/nuxt'
 import { useNuxt } from '../nuxt'
 import type { NuxtTemplate, NuxtPlugin, NuxtPluginTemplate } from '../types/nuxt'
+import type { ComponentsDir } from '../types/components'
 
 /**
  * Renders given template using lodash template during build into the project buildDir
@@ -289,7 +290,19 @@ export async function compileTemplate (template: NuxtTemplate, ctx: any) {
   throw new Error('Invalid template: ' + JSON.stringify(template))
 }
 
-const serialize = data => JSON.stringify(data, null, 2).replace(/"{(.+)}"/g, '$1')
+/**
+ * Register a directory to be scanned for components and imported only when used.
+ *
+ * Requires Nuxt 2.13+
+ */
+export function addComponentsDir (dir: ComponentsDir) {
+  const nuxt = useNuxt()
+  ensureNuxtCompatibility({ nuxt: '>=2.13' }, nuxt)
+  nuxt.options.components = nuxt.options.components || []
+  nuxt.hook('components:dirs', (dirs) => { dirs.push(dir) })
+}
+
+const serialize = (data: any) => JSON.stringify(data, null, 2).replace(/"{(.+)}"/g, '$1')
 
 const importName = (src: string) => `${camelCase(basename(src, extname(src))).replace(/[^a-zA-Z?\d\s:]/g, '')}_${hash(src)}`