Vue $root component data access or setup

If Vue project’s $root component has a reactive variable (in data or computed) f.e. isMobile, so it can be used in app’s components as $root.isMobile, then there is no way to define it in config.js or anywhere globally for storybook usage.

It would be nice to have some option to define $root component’s data, computed and methods.

Alternative solution that I use now, but it has annoying performance and usability cases: Add variable as Vue.prototype.isMobile

const localEventBus = new Vue();

Vue.mixin({
    mounted() {
        localEventBus.$on('storybook-rerender', this.storybookForceUpdate);
    },
    beforeDestroy() {
        localEventBus.$off('storybook-rerender', this.storybookForceUpdate);
    },
    methods: {
        storybookForceUpdate() {
            this.$forceUpdate();
        },
    },
});

window.addEventListener('resize', () => {
    localEventBus.$emit('storybook-rerender');
});

Does anyone have alternative solutions? or perhaps there is a way to add data or computed to root component in storybook?

[graup]

Here’s a sort of ugly workaround for this. Just add a decorator that wraps every story and manually assign $root in there. Something along the lines of this:

addDecorator({
  i18n,
  beforeCreate: function() {
    this.$root._i18n = this.$i18n;
  },
  template: '<div><slot /></div>',
})

[linasmatakas]

@naimlatifi5 I cannot offer a fix for the original issue, but if you are interested in a bit more elegant solution of how to use global variables, which also easily works in storybook as well then here is a quick try at that:

1. Example of how to create global variables. Note that this service does more than it needs for isMobile to work, but I think that is self-sufficient, so it should be easy to try it out. https://gist.github.com/linasmatakas/94a515f78228f023f250a1f959e073b0
2. main.js: 2.1. import WindowService from '@/services/window-service'; 2.2. beforeMount() { WindowService.init(); },
3. Usage in template $screen.isMobile
4. .storybook/config.js: import and WindowService.init(); anywhere