bug: vue directives are erased

[pa-bouly]

Hey, Thanks for this storybook plugin! :)

I just set up storybook 7 on a project. I have a component that has a custom directive. I add my directive like this in preview.ts

import SanitizeHtmlDirective from '../src/components/directives/SanitizeHtml'

setup((app) => {
  app.directive('sanitize-html', SanitizeHtmlDirective)
})

it works well, but when i add a router-link in my component and the vueRouter() decorator I have this warning :

import { vueRouter } from 'storybook-vue3-router'
import FiftyYolo from './FiftyYolo.vue'

export default {
  component: FiftyYolo,
  decorators: [vueRouter()],
}

Any idea why?

Dependancies: "storybook": "^7.0.23", "storybook-vue3-router": "^4.0.0",

[NickMcBurney]

There was previously and issue with storybook 7 where is did not allow global decorators added via preview.ts (as it clashes with decorators added by plugins such as this package), this was resolved but I'm wondering if this is a similar/related issue.

I will try and investigate, could you provide a reproduction which I can use, this will make it easier/faster on my side.

[pa-bouly]

ok, yes it looks like a similar issue.

I created a repository : https://github.com/pa-bouly/vue3-storybook-and-vue-router

I created a component with a directive and a routerLink, then a story : here

If you uncomment the line 14 for the vueRouter, on the debug console we have the warning message: Failed to resolve directive

Hope it helps to investigate 🙏 Let me know if i can help, thanks !

[jamiewood678]

Any news on this? Having the same issue when registering a vue plugin in the preview.ts via app.use(createPinia()) in the setup function. Happy to share information if requested.

[NickMcBurney]

Sorry for delay on update, Ive been able to replicate the issue (the specific directive shouldn't matter) and wasn't able to find any specific issue within my plugin so I need to raise an issue within storybook repo.

[pa-bouly]

Thanks @NickMcBurney ! Could you link the issue here to follow it please? And maybe if we can help on this issue too 👍

[kevinvalk]

Same here, whenever vueRouter is used the setup() method in preview.ts is not executed.

// .storybook/preview.ts
import { setup } from '@storybook/vue3';

// We can use to provide any global to our Vue instance
setup((app) => {
  throw Error('Not thrown when vueRouter decorator is used in a story');
});

References original issue https://github.com/NickMcBurney/storybook-vue3-router/issues/46, PR that should have resolved this https://github.com/storybookjs/storybook/pull/22170.

[NickMcBurney]

Issue resolved and packaged published: 4.0.1