如何在Storybook中使用含v-tippy的Vue3组件？报错求助

问题场景 #

在为使用v-tippy的Vue3组件编写Storybook故事时触发报错，组件核心代码如下：

<template>
    <div class="flex items-center" :class="[labelBellowStars ? 'flex-col justify-center': '']">
        <div class="flex items-center">
            <IconBase
                v-tippy="{ content: 'Tooltip content', placement: 'bottom' }"
                :class="[star.active ? 'fill-yellow-500 hover:fill-yellow-300 dark:fill-yellow-300 dark:hover:fill-yellow-500' : 'fill-grayblue-10 dark:fill-grayblue-70', isEditable ? 'cursor-pointer' : '']"
                class="border-none focus:border-none focus:outline-none focus:shadow-transparent"
                v-for="star in stars" :size="iconSize"
                @mouseleave="hoverStar(0)"
                @mouseover="hoverStar(star.id)"
                @click="selectStar(star.id)">
                <IconStar/>
            </IconBase>
        </div>
        <div>
            <small :class="[labelBellowStars ? 'ml-0': 'ml-4']" v-if="hasLabel">
                {{ label }}
            </small>
        </div>
    </div>
</template>
<script>
import 'tippy.js/dist/tippy.css';
import VueTippy from 'vue-tippy';
import './styles.sass';
import {
    IconBase,
    IconStar
} from '../../components/Icons';

export default {
    name: "StarsRating",
    components: {IconStar, IconBase},
    directives: {
        Tippy: VueTippy.directive,
    },
    // 剩余组件逻辑...
};
</script>

报错信息 #

TypeError: Cannot read properties of undefined (reading 'deep')
at withDirectives

解决方案 #

1. 确认vue-tippy版本适配Vue3
   确保安装的是支持Vue3的vue-tippy@v6.x版本，执行安装命令：

   npm install vue-tippy@6 --save
   # 或
   yarn add vue-tippy@6
   

2. 改用插件方式注册v-tippy
   不要在组件内手动提取并注册Tippy指令，而是通过Vue插件全局注册，推荐在Storybook的preview.js中全局配置：

   // .storybook/preview.js
   import { app } from '@storybook/vue3';
   import { TippyPlugin } from 'vue-tippy';
   import 'tippy.js/dist/tippy.css';
   
   app.use(TippyPlugin, {
     // 可配置全局默认属性
     defaultProps: {
       placement: 'bottom',
     }
   });
   

   注册后，组件内直接使用v-tippy指令即可，无需在directives选项中手动声明。

3. 排查版本冲突
   检查项目中vue、@storybook/vue3和vue-tippy的版本是否兼容，避免因依赖版本不匹配导致的内部逻辑报错。

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