Skip to content

Commit

Permalink
📝 docs: update vue guide
Browse files Browse the repository at this point in the history
  • Loading branch information
kazupon committed Jun 17, 2017
1 parent 838730f commit 2e3170d
Showing 1 changed file with 17 additions and 6 deletions.
23 changes: 17 additions & 6 deletions docs/pages/basics/guide-vue/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,17 +43,28 @@ npm i --save vue
Storybook can be configured in several different ways.
That’s why we need a config directory. We've added a `-c` option to the above NPM script mentioning `.storybook` as the config directory.

There's 2 things you need to tell Storybook to do: Add you Vue components and require your stories.
There's 3 things you need to tell Storybook to do:

1. In stories, if use the custom components without Vue `components` option, you need to register these with `Vue.component`.
2. In stories, if use the Vue plugins (e.g. `vuex`), you need to install these with `Vue.use`.
3. Require your stories.

To do that, simply create a file at `.storybook/config.js` with the following content:

```js
import Vue from 'vue'
import { configure } from '@storybook/vue';

import MyButton from '../src/stories/Button.vue'
import Vue from 'vue';
import Vuex from 'vuex'; // Vue plugins

// Import your custom components.
import Mybutton from '../src/stories/Button.vue';

// Install Vue plugins.
Vue.use(Vuex);

Vue.component('my-button', MyButton)
// Register custom components.
Vue.component('my-button', Mybutton);

function loadStories() {
// You can require as many stories as you need.
Expand All @@ -63,9 +74,9 @@ function loadStories() {
configure(loadStories, module);
```

That'll register all your custom components with Vue and load stories in `../stories/index.js`.
That'll register all your custom components, install all Vue plugins and load stories in `../stories/index.js`.

All custom components should be registered before calling `configure`.
All custom components and All Vue plugins should be registered before calling `configure`.

> This stories folder is just an example, you can load stories from wherever you want to.
> We think stories are best located close to the source files.
Expand Down

1 comment on commit 2e3170d

@jessegavin
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This guide fails to mention the need to declare an npm script in package.json as in the following example.

"scripts": {
  "storybook": "start-storybook -p 6006"
},

Please sign in to comment.