Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Minor grammar fixes and clarification to Vue documentation #1756

Merged
merged 1 commit into from
Aug 28, 2017
Merged

Minor grammar fixes and clarification to Vue documentation #1756

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions docs/pages/basics/guide-vue/index.md
View file
Open in desktop
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