From 577573f3e870f46b6efc7fdfa0c10515731edc32 Mon Sep 17 00:00:00 2001
From: Harlan Wilton <harlan@harlanzw.com>
Date: Fri, 14 Oct 2022 02:54:06 +1100
Subject: [PATCH] perf(nuxt)!: use component loader to add meta components
 (#8167)

Co-authored-by: Daniel Roe <daniel@roe.dev>
---
 packages/nuxt/src/head/module.ts              | 20 ++++++++++++++++---
 .../runtime/{plugin.ts => mixin-plugin.ts}    | 11 ----------
 2 files changed, 17 insertions(+), 14 deletions(-)
 rename packages/nuxt/src/head/runtime/{plugin.ts => mixin-plugin.ts} (63%)

diff --git a/packages/nuxt/src/head/module.ts b/packages/nuxt/src/head/module.ts
index 68c5cfec26..263ced169b 100644
--- a/packages/nuxt/src/head/module.ts
+++ b/packages/nuxt/src/head/module.ts
@@ -1,7 +1,9 @@
 import { resolve } from 'pathe'
-import { addPlugin, defineNuxtModule } from '@nuxt/kit'
+import { addComponent, addPlugin, defineNuxtModule } from '@nuxt/kit'
 import { distDir } from '../dirs'
 
+const components = ['Script', 'NoScript', 'Link', 'Base', 'Title', 'Meta', 'Style', 'Head', 'Html', 'Body']
+
 export default defineNuxtModule({
   meta: {
     name: 'meta'
@@ -15,8 +17,20 @@ export default defineNuxtModule({
     // Add #head alias
     nuxt.options.alias['#head'] = runtimeDir
 
-    // Add generic plugin
-    addPlugin({ src: resolve(runtimeDir, 'plugin') })
+    // Register components
+    const componentsPath = resolve(runtimeDir, 'components')
+    for (const componentName of components) {
+      addComponent({
+        name: componentName,
+        filePath: componentsPath,
+        export: componentName,
+        // kebab case version of these tags is not valid
+        kebabName: componentName
+      })
+    }
+
+    // Add mixin plugin
+    addPlugin({ src: resolve(runtimeDir, 'mixin-plugin') })
 
     // Add library specific plugin
     addPlugin({ src: resolve(runtimeDir, 'lib/vueuse-head.plugin') })
diff --git a/packages/nuxt/src/head/runtime/plugin.ts b/packages/nuxt/src/head/runtime/mixin-plugin.ts
similarity index 63%
rename from packages/nuxt/src/head/runtime/plugin.ts
rename to packages/nuxt/src/head/runtime/mixin-plugin.ts
index 5ad5c81ef6..906211527b 100644
--- a/packages/nuxt/src/head/runtime/plugin.ts
+++ b/packages/nuxt/src/head/runtime/mixin-plugin.ts
@@ -1,13 +1,7 @@
 import { getCurrentInstance } from 'vue'
-import * as Components from './components'
 import { useHead } from './composables'
 import { defineNuxtPlugin, useNuxtApp } from '#app'
 
-type MetaComponents = typeof Components
-declare module '@vue/runtime-core' {
-  export interface GlobalComponents extends MetaComponents {}
-}
-
 const metaMixin = {
   created () {
     const instance = getCurrentInstance()
@@ -27,9 +21,4 @@ const metaMixin = {
 
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.mixin(metaMixin)
-
-  for (const name in Components) {
-    // eslint-disable-next-line import/namespace
-    nuxtApp.vueApp.component(name, (Components as any)[name])
-  }
 })