如何在Nuxt 2模块的ready钩子中全局导入Vue组件？

由于项目限制无法使用components:dirs钩子且未启用组件自动导入，可直接在ready钩子中通过Vue实例的component方法完成全局组件注册，具体实现如下：

修改后的模块代码 #

import type { Module } from '@nuxt/types'
import { resolve } from 'path'

const sharedModule: Module = function () {
  const { nuxt } = this
  nuxt.hook('ready', (nxt: any) => {
    // 注册单个全局组件
    const MyGlobalComponent = require(resolve(__dirname, '../components/MyGlobalComponent.vue')).default
    nxt.app.component('MyGlobalComponent', MyGlobalComponent)

    // 批量注册示例（可选）
    // 引入fs模块遍历指定组件目录
    // const fs = require('fs')
    // const globalComponentsDir = resolve(__dirname, '../components/global')
    // fs.readdirSync(globalComponentsDir).forEach(file => {
    //   if (file.endsWith('.vue')) {
    //     // 可根据需求调整组件命名规则，比如转为大驼峰
    //     const componentName = file.replace('.vue', '')
    //     const component = require(resolve(globalComponentsDir, file)).default
    //     nxt.app.component(componentName, component)
    //   }
    // })
  })
}

export default sharedModule

关键说明 #

• nxt.app是Nuxt初始化完成后的Vue根实例，调用它的component方法注册的组件会成为全局组件，项目内所有页面和组件无需导入即可直接使用对应的组件标签。
• 使用resolve方法确保组件路径解析正确，__dirname指向当前模块文件所在目录，需根据你的组件实际存放位置调整相对路径。
• 若需批量注册，可借助Node.js的fs模块遍历指定目录，自动读取并注册所有.vue文件，注意根据项目规范调整组件命名规则。

内容的提问来源于stack exchange，提问作者Alexander Kim