From 52ad910abeb5e36e078da025f3c47deb4b0ee873 Mon Sep 17 00:00:00 2001 From: Harlan Wilton Date: Fri, 14 Oct 2022 01:05:54 +1100 Subject: [PATCH 1/3] fix(nuxt): on-demand head components --- packages/nuxt/src/head/module.ts | 32 +++++++++++++++++-- .../runtime/{plugin.ts => mixin-plugin.ts} | 11 ------- 2 files changed, 30 insertions(+), 13 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 68c5cfec26e..23a42f44ed9 100644 --- a/packages/nuxt/src/head/module.ts +++ b/packages/nuxt/src/head/module.ts @@ -15,8 +15,36 @@ export default defineNuxtModule({ // Add #head alias nuxt.options.alias['#head'] = runtimeDir - // Add generic plugin - addPlugin({ src: resolve(runtimeDir, 'plugin') }) + const componentsPath = resolve(runtimeDir, 'components') + const headComponents = [ + 'Script', + 'NoScript', + 'Link', + 'Base', + 'Title', + 'Meta', + 'Style', + 'Head', + 'Html', + 'Body' + ].map(c => ({ + // kebab case version of these tags is not valid + kebabName: c, + pascalName: c, + export: c, + preload: false, + prefetch: false, + filePath: componentsPath, + import: `require(${JSON.stringify(componentsPath)})['${c}']`, + chunkName: `components/${c}`, + shortPath: componentsPath + })) + nuxt.hook('components:extend', (components) => { + components.push(...headComponents) + }) + + // 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 5ad5c81ef62..906211527be 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]) - } }) From 2606acfd9efb4c51559eec79df3288148e7ee59e Mon Sep 17 00:00:00 2001 From: Harlan Wilton Date: Fri, 14 Oct 2022 01:26:56 +1100 Subject: [PATCH 2/3] chore: useAddComponent --- packages/nuxt/src/head/module.ts | 29 ++++++++++++----------------- 1 file changed, 12 insertions(+), 17 deletions(-) diff --git a/packages/nuxt/src/head/module.ts b/packages/nuxt/src/head/module.ts index 23a42f44ed9..877e85b729f 100644 --- a/packages/nuxt/src/head/module.ts +++ b/packages/nuxt/src/head/module.ts @@ -1,5 +1,5 @@ import { resolve } from 'pathe' -import { addPlugin, defineNuxtModule } from '@nuxt/kit' +import { addComponent, addPlugin, defineNuxtModule } from '@nuxt/kit' import { distDir } from '../dirs' export default defineNuxtModule({ @@ -15,8 +15,9 @@ export default defineNuxtModule({ // Add #head alias nuxt.options.alias['#head'] = runtimeDir + // Register components const componentsPath = resolve(runtimeDir, 'components') - const headComponents = [ + for (const componentName of [ 'Script', 'NoScript', 'Link', @@ -27,21 +28,15 @@ export default defineNuxtModule({ 'Head', 'Html', 'Body' - ].map(c => ({ - // kebab case version of these tags is not valid - kebabName: c, - pascalName: c, - export: c, - preload: false, - prefetch: false, - filePath: componentsPath, - import: `require(${JSON.stringify(componentsPath)})['${c}']`, - chunkName: `components/${c}`, - shortPath: componentsPath - })) - nuxt.hook('components:extend', (components) => { - components.push(...headComponents) - }) + ]) { + 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') }) From 4cca10a8607e9fb9fcdab6aa3bc85956ce073924 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Thu, 13 Oct 2022 15:32:43 +0100 Subject: [PATCH 3/3] refactor: extract component names --- packages/nuxt/src/head/module.ts | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/packages/nuxt/src/head/module.ts b/packages/nuxt/src/head/module.ts index 877e85b729f..263ced169b3 100644 --- a/packages/nuxt/src/head/module.ts +++ b/packages/nuxt/src/head/module.ts @@ -2,6 +2,8 @@ import { resolve } from 'pathe' 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' @@ -17,18 +19,7 @@ export default defineNuxtModule({ // Register components const componentsPath = resolve(runtimeDir, 'components') - for (const componentName of [ - 'Script', - 'NoScript', - 'Link', - 'Base', - 'Title', - 'Meta', - 'Style', - 'Head', - 'Html', - 'Body' - ]) { + for (const componentName of components) { addComponent({ name: componentName, filePath: componentsPath,