如何在NuxtJS中全局注册Vue 3组合式API组件库？

要让基于<script setup>编写的组件能以自定义名称全局注册，需要解决两个核心问题：让组件暴露自定义名称，以及在插件中正确获取并使用该名称注册。

步骤1：让组件暴露自定义名称 #

<script setup>编译后不会自动将内部定义的name变量挂载到组件实例上，所以需要通过以下两种方式之一显式暴露组件名称：

方法A：使用defineOptions（Vue3.3+ 推荐） #

在<script setup>中直接调用defineOptions定义组件名称，这是Vue3.3新增的语法，专门用于在<script setup>中设置组件选项：

<template>
    <div class="panel">
        <div class="header" v-if="title">{{ title }}</div>
        {{ content }}
    </div>
</template>

<style>
.panel .header {
    background-color: #7f7f7f;
    color: #fff;
}
</style>

<script setup lang="ts">
interface Props {
    title?: string;
    content?: string;
}

// 直接定义组件名称
defineOptions({
    name: 'my-panel'
})

const props = defineProps<Props>();
</script>

方法B：添加独立的<script>标签 #

如果你的Vue版本低于3.3，可以添加一个普通的<script>标签，在其中导出组件名称（普通<script>和<script setup>可以共存）：

<template>
    <div class="panel">
        <div class="header" v-if="title">{{ title }}</div>
        {{ content }}
    </div>
</template>

<style>
.panel .header {
    background-color: #7f7f7f;
    color: #fff;
}
</style>

<script setup lang="ts">
interface Props {
    title?: string;
    content?: string;
}

const props = defineProps<Props>();
</script>

<!-- 单独的script标签导出名称 -->
<script lang="ts">
export default {
    name: 'my-panel'
}
</script>

步骤2：修改插件注册逻辑 #

在lib.ts中，需要获取每个组件暴露的name属性，再调用Vue.component()完成全局注册：

import * as components from './components';
import { App } from '@vue/runtime-core';

const plugin = {
    install(Vue: App) {
        Object.values(components).forEach((component) => {
            // 确保组件存在name属性，再进行注册
            if (component.name) {
                Vue.component(component.name, component);
            }
        });
    },
};

export default plugin;

步骤3：在NuxtJS中加载插件 #

在NuxtJS项目的plugins目录下创建一个插件文件（比如my-components-plugin.ts），导入你的组件库插件并注册：

import MyComponentsPlugin from '~/path/to/your/lib.ts';

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(MyComponentsPlugin);
});

这样配置后，你的组件就能以my-panel的名称在NuxtJS应用中全局使用了。

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