Vue3集成Storybook与PrimeVue：项目创建及组件渲染问题求助

问题概述 #

在Vue3+TypeScript项目中集成Storybook与PrimeVue，自定义组件内使用PrimeVue的InputText组件时，控制台抛出警告：

[Vue warn]: Failed to resolve component: InputText
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at <Button primary=false label="Button" size="small" ... >
at
at

已尝试在项目根目录的Main.ts中全局注册PrimeVue和InputText，甚至改用Storybook的setup方法注册，但问题未解决。

核心原因 #

Storybook运行时拥有独立的Vue应用上下文，不会直接复用项目根目录Main.ts中的全局配置。之前的注册操作仅对项目主应用生效，并未同步到Storybook的渲染环境中。

解决方案 #

方案1：在Storybook预览配置中全局注册PrimeVue #

在项目的.storybook目录下创建或修改preview.ts文件，在此处完成PrimeVue的全局注册：

import type { Preview } from "@storybook/vue3";
import PrimeVue from 'primevue/config';
import InputText from 'primevue/inputtext';
// 引入PrimeVue必要样式
import "primevue/resources/themes/lara-light-indigo/theme.css";
import "primevue/resources/primevue.min.css";
import "primeicons/primeicons.css";

const preview: Preview = {
  decorators: [
    (story) => ({
      components: { story },
      setup() {
        const { app } = import.meta.env.STORYBOOK_VUE_APP;
        app.use(PrimeVue, { ripple: true });
        app.component('InputText', InputText);
      },
      template: '<story />',
    }),
  ],
  // 其他Storybook配置（如参数、全局参数等）
};

export default preview;

方案2：在自定义组件中局部导入InputText #

如果不需要全局注册PrimeVue组件，可直接在自定义组件中局部导入InputText：
修改自定义组件的<script lang="ts" setup>部分：

import './button.css'
import { computed, ref } from 'vue'
import InputText from 'primevue/inputtext'; // 新增局部导入

// 原组件逻辑保持不变
const props = withDefaults(defineProps<{
  label: string,
  primary?: boolean,
  size?: 'small' | 'medium' | 'large',
  backgroundColor?: string,
}>(), { primary: false });
// ... 其余代码

验证 #

重启Storybook开发服务，查看自定义组件中的InputText是否正常渲染，控制台警告是否消失。

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