You may have tried to use our quick start guide to setup your project for Storybook. If it failed because it couldn't detect you're using vue, you could try forcing it to use vue:
If you want to set up Storybook manually for your Vue project, this is the guide for you.
Add @storybook/vue
to your project. To do that, run:
Make sure that you have vue
, vue-loader
, vue-template-compiler
, @babel/core
, babel-loader
and babel-preset-vue
in your dependencies as well, because we list these as a peer dependencies:
Then add the following NPM script to your package.json
in order to start the storybook later in this guide:
For a basic Storybook configuration, the only thing you need to do is tell Storybook where to find stories.
To do that, create a file at .storybook/config.js
with the following content:
That will load all the stories underneath your ../src
directory that match the pattern *.stories.js
. We recommend co-locating your stories with your source files, but you can place them wherever you choose.
You might be using global components or vue plugins such as vuex, in that case you'll need to register them in this
config.js
file.details
This example registered your custom
Button.vue
component, installed the Vuex plugin, and loaded your Storybook stories defined in../src/index.stories.js
.All custom components and Vue plugins should be registered before calling
configure()
.
Now create a ../stories/index.js
file, and write your first story like this:
Each story is a single state of your component. In the above case, there are three stories for the demo button component:
If your story is returning a plain template you can only use globally registered components.
To register them, use
Vue.component('my-button', Mybutton)
in yourconfig.js
file.details
If your story returns a plain string like below, you will need to register globally each VueJs component that it uses.
In big solutions, globally registered components can conflict with each other.
Here are two other ways to use components in your stories without globally registering them.
- register components locally in the "components" member of the vue component object. See the story "as a component" above.
- use a JSX render function like below. No need to register anything.
Now everything is ready. Run your storybook with:
Storybook should start, on a random open port in dev-mode.
Now you can develop your components and write stories and see the changes in Storybook immediately since it uses Webpack's hot module reloading.
Go to this Abstract link to check the latest styles