Skip to content

Commit

Permalink
Merge branch 'release/3.3' into master
Browse files Browse the repository at this point in the history
  • Loading branch information
Hypnosphi authored Aug 30, 2017
2 parents a2b0db0 + c1c1648 commit cccadb4
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 9 deletions.
16 changes: 8 additions & 8 deletions docs/pages/basics/guide-vue/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@ title: 'Storybook for Vue'

You may have tried to use our quick start guide to setup your project for Storybook. If you want to set up Storybook manually, this is the guide for you.

> This will also help you to understand how Storybook works.
> This will also help you understand how Storybook works.
## Starter Guide Vue

Storybook has its own Webpack setup and a dev server.
Webpack setup is very similar to [Vue CLI](https://github.com/vuejs/vue-cli), but allows you to [configure as you want](/configurations/custom-webpack-config/).
The Webpack setup is very similar to [Vue CLI's](https://github.com/vuejs/vue-cli), but allows you to [configure it however you want](/configurations/custom-webpack-config/).

In this guide, we are trying to set up Storybook for your Vue project.

Expand Down Expand Up @@ -43,13 +43,13 @@ 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 3 things you need to tell Storybook to do:
There are 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`.
1. Import and globally register with [`Vue.component()`](https://vuejs.org/v2/api/#Vue-component) any global custom components just like you did with your project. (Note: [components registered locally](https://vuejs.org/v2/guide/components.html#Local-Registration) will be brought in automatically).
2. For any required Vue plugins (e.g. `vuex`), you'll also need to [install these with `Vue.use`](https://vuejs.org/v2/api/#Vue-use).
3. Require your stories.

To do that, simply create a file at `.storybook/config.js` with the following content:
Here's an example `.storybook/config.js` to get you started:

```js
import { configure } from '@storybook/vue';
Expand All @@ -74,9 +74,9 @@ function loadStories() {
configure(loadStories, module);
```

That'll register all your custom components, install all Vue plugins and load stories in `../stories/index.js`.
This example registered your custom `Button.vue` component, installed the Vuex plugin, and loaded you Storybook stories defined in `../stories/index.js`.

All custom components and All Vue plugins should be registered before calling `configure`.
All custom components and 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
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
"husky": "^0.14.3",
"jest": "^20.0.4",
"jest-enzyme": "^3.6.1",
"lerna": "2.1.0",
"lerna": "2.1.1",
"lint-staged": "^4.0.2",
"lodash": "^4.17.4",
"nodemon": "^1.11.0",
Expand Down

0 comments on commit cccadb4

Please sign in to comment.