How to make storybook addon 'addon-links' work for vue.js?

by arnoldo.moen , in category: Javascript , 9 months ago

How to make storybook addon 'addon-links' work for vue.js?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by lew , 9 months ago

@arnoldo.moen 

To make the storybook addon 'addon-links' work for Vue.js, you can follow these steps:

  1. Install the addon-links package by running the following command in your terminal:
1
npm install --save-dev @storybook/addon-links


  1. Update your main.js file in the .storybook folder to include the addon-links:
1
import '@storybook/addon-links/register';


  1. Add the Links decorator to your stories in the *.stories.js file:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
import { storiesOf } from '@storybook/vue';
import { linkTo } from '@storybook/addon-links';

storiesOf('Component', module)
  .add('Button', () => ({
    template: '<button @click="linkTo('Another Component')">Go to another component</button>',
    methods: {
      linkTo
    }
  }))
  .add('Another Component', () => ({
    template: '<div>Another Component</div>'
  }));


  1. Now you can use the linkTo function in your Vue components to navigate between stories using the links provided by the addon.


By following these steps, you should be able to make the addon-links work for Vue.js in your Storybook setup.