How to globally register a custom Vue 3 directive in Storybook?

[mathildebuenerd]

Summary

I'm working on a Vue 3 project and trying to globally register a custom directive (a tooltip) for use in all stories. The directive is implemented as a plugin with an install method:

// src/components/TooltipDirective.directive.js
export default {
  install(app) {
    app.directive('tooltip', {
        // tooltip logic...
    });
  }
}

Following the Storybook 7 migration guide for Vue 3, I added this to .storybook/preview.js:

import { setup } from '@storybook/vue3'
import TooltipDirective from '../src/components/TooltipDirective.directive'

const preview = {
  parameters: {
    // other parameters...
  },
  decorators: [
    // other decorators...
  ],
  setup(app) {
    app.use(TooltipDirective)
  },
}

However, when I render the story of a component that uses the v-tooltip directive, the tooltip doesn't show and I get the following error in the browser:

[Vue warn]: Failed to resolve directive: tooltip

Question: Is setup(app) in .storybook/preview.js the correct place to globally register Vue 3 plugins or directives in Storybook? If not, what is the recommended way to make a custom directive available in all stories?

Additional information

No response

Create a reproduction

No response

[mathildebuenerd]

Realized after a fresh look: I mistakenly placed the setup function inside the preview object, but it needs to be defined at the root level of the file.

const preview = {
  // preview object
}

setup((app) => {
  app.use(GiaTooltipDirective)
})

Issue resolved — closing it now 🙏