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

Co-authored-by: Daniel Roe <daniel@roe.dev>
This commit is contained in:
Harlan Wilton 2022-10-14 02:54:06 +11:00 committed by GitHub
parent 6ad0f3f157
commit 577573f3e8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 14 deletions

View File

@ -1,7 +1,9 @@
import { resolve } from 'pathe' import { resolve } from 'pathe'
import { addPlugin, defineNuxtModule } from '@nuxt/kit' import { addComponent, addPlugin, defineNuxtModule } from '@nuxt/kit'
import { distDir } from '../dirs' import { distDir } from '../dirs'
const components = ['Script', 'NoScript', 'Link', 'Base', 'Title', 'Meta', 'Style', 'Head', 'Html', 'Body']
export default defineNuxtModule({ export default defineNuxtModule({
meta: { meta: {
name: 'meta' name: 'meta'
@ -15,8 +17,20 @@ export default defineNuxtModule({
// Add #head alias // Add #head alias
nuxt.options.alias['#head'] = runtimeDir nuxt.options.alias['#head'] = runtimeDir
// Add generic plugin // Register components
addPlugin({ src: resolve(runtimeDir, 'plugin') }) 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 // Add library specific plugin
addPlugin({ src: resolve(runtimeDir, 'lib/vueuse-head.plugin') }) addPlugin({ src: resolve(runtimeDir, 'lib/vueuse-head.plugin') })

View File

@ -1,13 +1,7 @@
import { getCurrentInstance } from 'vue' import { getCurrentInstance } from 'vue'
import * as Components from './components'
import { useHead } from './composables' import { useHead } from './composables'
import { defineNuxtPlugin, useNuxtApp } from '#app' import { defineNuxtPlugin, useNuxtApp } from '#app'
type MetaComponents = typeof Components
declare module '@vue/runtime-core' {
export interface GlobalComponents extends MetaComponents {}
}
const metaMixin = { const metaMixin = {
created () { created () {
const instance = getCurrentInstance() const instance = getCurrentInstance()
@ -27,9 +21,4 @@ const metaMixin = {
export default defineNuxtPlugin((nuxtApp) => { export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.mixin(metaMixin) nuxtApp.vueApp.mixin(metaMixin)
for (const name in Components) {
// eslint-disable-next-line import/namespace
nuxtApp.vueApp.component(name, (Components as any)[name])
}
}) })