perf(nuxt)!: use component loader to add meta components (#8167)

Co-authored-by: Daniel Roe <daniel@roe.dev>
nuxt · Oct 13, 2022 · 577573f · 577573f
1 parent 6ad0f3f
commit 577573f
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 14 deletions.
diff --git 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 → ...ges/nuxt/src/head/runtime/mixin-plugin.ts b/packages/nuxt/src/head/runtime/plugin.ts → ...ges/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])
-  }
 })