How to register global Vue components in Storybook?

Question

Is there a way to register global Vue components in Storybook so it is compatible with globally registered Vue components in Vue-CLI?

Answer 1

You just need to add a few lines to .storybook/preview.js file.

Vue.js 3

import {app} from '@storybook/vue3';

app.component('router-link', MockRouterLink);

Vue.js 2

import Vue from 'vue';

Vue.component('router-link', MockRouterLink);

But I haven't tested the latter one because I only use Storybook with Vue.js 3 apps.

Answer 2

You can just use these lines in preview.js

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);
Vue.component('router-link', Vue.component('RouterLink'));

export const decorators = [(story) => ({
    components: {story},
    template: '<story />',
    router: new VueRouter()
})];

My vue-router problem is solved by this