From 5adbc5f902a3562a3e233c06f99f9be30254741a Mon Sep 17 00:00:00 2001
From: Sarah Drasner <sarah.drasner@gmail.com>
Date: Mon, 26 Mar 2018 08:48:06 -0500
Subject: [PATCH] Moving Components Page into its Own Category (#1482)

* create components sidebar

* break up first two sections

* break it up further

* split up the rest

* clean up

* initial pass, creating new, much slimmer components intro page that links to more in-depth pages

* finish initial component registration page

* finish initial refactor of component props page

* beginning work on components custom events page

* finish initial components custom events page

* finish initial components slots page

* finish initial dynamic and async components page

* finish initial dynamic-async and edge-cases components pages

* components review and tweaks up to the props page

* fix components mistakes found by @phanan

* fix typo in components-edge-cases

* reorder Compiliation Scope in components-slots

* fix link in components basics

* fix codeblock language typo in components

* add example of local registration in es2015 modules

* add keep-alive example

* remove redundant word in components

* make dom template parsing caveats h2

* change simple example to base example in components

* add async import example to circular references

* fix typo in components-custom-events

* remove redundand language in componenents-custom-events

* add missing comma in components-custom-events

* restate context in component-dynamic-async

* remove redundant actuallys in components-dynamic-async

* clarify .sync modifier usage

* set up hash redirects for all old components sections

* remove note about intentional single root elements

* fix dom template parsing caveats example

* fix closing </code> tags in components-edge-cases

* fix typo in components-edge-cases

* fix typo in components-edge-cases

* remove extra 'a' in components-registration

* add name casing and various tweaks to components-registration

* complete custom v-model example in components-custom-events

* minor tweaks to components pages

* rename signature to definition for clarity
---
 _config.yml                              |    1 -
 package.json                             |    2 +-
 src/v2/api/index.md                      |    2 +-
 src/v2/guide/components-custom-events.md |  168 +++
 src/v2/guide/components-dynamic-async.md |  273 ++++
 src/v2/guide/components-edge-cases.md    |  319 ++++
 src/v2/guide/components-props.md         |  314 ++++
 src/v2/guide/components-registration.md  |  226 +++
 src/v2/guide/components-slots.md         |  229 +++
 src/v2/guide/components.md               | 1732 ++++++----------------
 themes/vue/layout/partials/toc.ejs       |    3 +
 themes/vue/source/css/_demo.styl         |   15 +-
 themes/vue/source/js/common.js           |  102 +-
 yarn.lock                                |  470 ++++--
 14 files changed, 2375 insertions(+), 1481 deletions(-)
 create mode 100644 src/v2/guide/components-custom-events.md
 create mode 100644 src/v2/guide/components-dynamic-async.md
 create mode 100644 src/v2/guide/components-edge-cases.md
 create mode 100644 src/v2/guide/components-props.md
 create mode 100644 src/v2/guide/components-registration.md
 create mode 100644 src/v2/guide/components-slots.md

diff --git a/_config.yml b/_config.yml
index 2eb260398d..3c5d26a12b 100644
--- a/_config.yml
+++ b/_config.yml
@@ -187,4 +187,3 @@ alias:
   examples/svg.html: v2/examples/svg.html
   examples/todomvc.html: v2/examples/todomvc.html
   examples/tree-view.html: v2/examples/tree-view.html
-
diff --git a/package.json b/package.json
index 287873960d..f0bc748e4e 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "vuejs.org",
   "private": true,
   "hexo": {
-    "version": "3.4.2"
+    "version": "3.6.0"
   },
   "scripts": {
     "start": "hexo server",
diff --git a/src/v2/api/index.md b/src/v2/api/index.md
index 74bb867e9c..3dc22d00c3 100644
--- a/src/v2/api/index.md
+++ b/src/v2/api/index.md
@@ -1432,7 +1432,7 @@ type: api
 
 - **Details:**
 
-  Contains parent-scope `v-on` event listeners (without `.native` modifiers). This can be passed down to an inner component via `v-on="$listeners"` - useful when creating higher-order components.
+  Contains parent-scope `v-on` event listeners (without `.native` modifiers). This can be passed down to an inner component via `v-on="$listeners"` - useful when creating transparent wrapper components.
 
 ## Instance Methods / Data
 
diff --git a/src/v2/guide/components-custom-events.md b/src/v2/guide/components-custom-events.md
new file mode 100644
index 0000000000..de393a0a53
--- /dev/null
+++ b/src/v2/guide/components-custom-events.md
@@ -0,0 +1,168 @@
+---
+title: Custom Events
+type: guide
+order: 103
+---
+
+> This page assumes you've already read the [Components Basics](components.html). Read that first if you are new to components.
+
+## Event Names
+
+Unlike components and props, event names don't provide any automatic case transformation. Instead, the name of an emitted event must exactly match the name used to listen to that event. For example, if emitting a camelCased event name:
+
+```js
+this.$emit('myEvent')
+```
+
+Listening to the kebab-cased version will have no effect:
+
+```html
+<my-component v-on:my-event="doSomething"></my-component>
+```
+
+Unlike components and props, event names will never be used as variable or property names in JavaScript, so there's no reason to use camelCase or PascalCase. Additionally, `v-on` event listeners inside DOM templates will be automatically transformed to lowercase (due to HTML's case-insensitivity), so `v-on:myEvent` would become `v-on:myevent` -- making `myEvent` impossible to listen to.
+
+For these reasons, we recommend you **always use kebab-case for event names**.
+
+## Customizing Component `v-model`
+
+> New in 2.2.0+
+
+By default, `v-model` on a component uses `value` as the prop and `input` as the event, but some input types such as checkboxes and radio buttons may want to use the `value` attribute for a [different purpose](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Value). Using the `model` option can avoid a conflict in such cases:
+
+```js
+Vue.component('base-checkbox', {
+  model: {
+    prop: 'checked',
+    event: 'change'
+  },
+  props: {
+    checked: Boolean
+  },
+  template: `
+    <input
+      type="checkbox"
+      v-bind:checked="checked"
+      v-on:change="$emit('change', $event.target.value)"
+    >
+  `
+})
+```
+
+Now when using `v-model` on this component:
+
+```js
+<base-checkbox v-model="lovingVue"></base-checkbox>
+```
+
+the value of `lovingVue` will be passed to the `checked` prop. The `lovingVue` property will then be updated when `<base-checkbox>` emits a `change` event with a new value.
+
+<p class="tip">Note that you still have to declare the <code>checked</code> prop in component's <code>props</code> option.</p>
+
+## Binding Native Events to Components
+
+There may be times when you want to listen directly to a native event on the root element of a component. In these cases, you can use the `.native` modifier for `v-on`:
+
+```html
+<base-input v-on:focus.native="onFocus"></base-input>
+```
+
+This can be useful sometimes, but it's not a good idea when you're trying to listen on a very specific element, like an `<input>`. For example, the `<base-input>` component above might refactor so that the root element is actually a `<label>` element:
+
+```html
+<label>
+  {{ label }}
+  <input
+    v-bind="$attrs"
+    v-bind:value="value"
+    v-on:input="$emit('input', $event.target.value)"
+  >
+</label>
+```
+
+In that case, the `.native` listener in the parent would silently break. There would be no errors, but the `onFocus` handler wouldn't be called when we expected it to.
+
+To solve this problem, Vue provides a `$listeners` property containing an object of listeners being used on the component. For example:
+
+```js
+{
+  focus: function (event) { /* ... */ }
+  input: function (value) { /* ... */ },
+}
+```
+
+Using the `$listeners` property, you can forward all event listeners on the component to a specific child element with `v-on="$listeners"`. For elements like `<input>`, that you also want to work with `v-model`, it's often useful to create a new computed property for listeners, like `inputListeners` below:
+
+```js
+Vue.component('base-input', {
+  inheritAttrs: false,
+  props: ['label', 'value'],
+  computed: {
+    inputListeners: function () {
+      var vm = this
+      // `Object.assign` merges objects together to form a new object
+      return Object.assign({},
+        // We add all the listeners from the parent
+        this.$listeners,
+        // Then we can add custom listeners or override the
+        // behavior of some listeners.
+        {
+          // This ensures that the component works with v-model
+          input: function (event) {
+            vm.$emit('input', event.target.value)
+          }
+        }
+      )
+    }
+  },
+  template: `
+    <label>
+      {{ label }}
+      <input
+        v-bind="$attrs"
+        v-bind:value="value"
+        v-on="inputListeners"
+      >
+    </label>
+  `
+})
+```
+
+Now the `<base-input>` component is a **fully transparent wrapper**, meaning it can be used exactly like a normal `<input>` element: all the same attributes and listeners will work.
+
+## `.sync` Modifier
+
+> New in 2.3.0+
+
+In some cases, we may need "two-way binding" for a prop. Unfortunately, true two-way binding can create maintenance issues, because child components can mutate the parent without the source of that mutation being obvious in both the parent and the child.
+
+That's why instead, we recommend emitting events in the pattern of `update:my-prop-name`. For example, in a hypothetical component with a `title` prop, we could communicate the intent of assigning a new value with:
+
+```js
+this.$emit('update:title', newTitle)
+```
+
+Then the parent can listen to that event and update a local data property, if it wants to. For example:
+
+```html
+<text-document
+  v-bind:title="doc.title"
+  v-on:update:title="doc.title = $event"
+></text-document>
+```
+
+For convenience, we offer a shorthand for this pattern with the `.sync` modifier:
+
+```html
+<text-document v-bind:title.sync="doc.title"></text-document>
+```
+
+The `.sync` modifier can also be used with `v-bind` when using an object to set multiple props at once:
+
+```html
+<text-document v-bind.sync="doc"></text-document>
+```
+
+This passes each property in the `doc` object (e.g. `title`) as an individual prop, then adds `v-on` update listeners for each one.
+
+<p class="tip">Using <code>v-bind.sync</code> with a literal object, such as in <code>v-bind.sync="{ title: doc.title }"</code>, will not work. If you want to include multiple, unrelated data properties in the same <code>v-bind.sync</code>, we recommend creating a computed property that returns an object.</p>
diff --git a/src/v2/guide/components-dynamic-async.md b/src/v2/guide/components-dynamic-async.md
new file mode 100644
index 0000000000..1f6391b971
--- /dev/null
+++ b/src/v2/guide/components-dynamic-async.md
@@ -0,0 +1,273 @@
+---
+title: Dynamic & Async Components
+type: guide
+order: 105
+---
+
+> This page assumes you've already read the [Components Basics](components.html). Read that first if you are new to components.
+
+## `keep-alive` with Dynamic Components
+
+Earlier, we used the `is` attribute to switch between components in a tabbed interface:
+
+```html
+<component v-bind:is="currentTabComponent"></component>
+```
+
+When switching between these components though, you'll sometimes want to maintain their state or avoid re-rendering for performance reasons. For example, when expanding our tabbed interface a little:
+
+{% raw %}
+<div id="dynamic-component-demo" class="demo">
+  <button
+    v-for="tab in tabs"
+    v-bind:key="tab"
+    v-bind:class="['dynamic-component-demo-tab-button', { 'dynamic-component-demo-active': currentTab === tab }]"
+    v-on:click="currentTab = tab"
+  >{{ tab }}</button>
+  <component
+    v-bind:is="currentTabComponent"
+    class="dynamic-component-demo-tab"
+  ></component>
+</div>
+<script>
+Vue.component('tab-posts', {
+  data: function () {
+    return {
+      posts: [
+        {
+          id: 1,
+          title: 'Cat Ipsum',
+          content: '<p>Dont wait for the storm to pass, dance in the rain kick up litter decide to want nothing to do with my owner today demand to be let outside at once, and expect owner to wait for me as i think about it cat cat moo moo lick ears lick paws so make meme, make cute face but lick the other cats. Kitty poochy chase imaginary bugs, but stand in front of the computer screen. Sweet beast cat dog hate mouse eat string barf pillow no baths hate everything stare at guinea pigs. My left donut is missing, as is my right loved it, hated it, loved it, hated it scoot butt on the rug cat not kitten around</p>'
+        },
+        {
+          id: 2,
+          title: 'Hipster Ipsum',
+          content: '<p>Bushwick blue bottle scenester helvetica ugh, meh four loko. Put a bird on it lumbersexual franzen shabby chic, street art knausgaard trust fund shaman scenester live-edge mixtape taxidermy viral yuccie succulents. Keytar poke bicycle rights, crucifix street art neutra air plant PBR&B hoodie plaid venmo. Tilde swag art party fanny pack vinyl letterpress venmo jean shorts offal mumblecore. Vice blog gentrify mlkshk tattooed occupy snackwave, hoodie craft beer next level migas 8-bit chartreuse. Trust fund food truck drinking vinegar gochujang.</p>'
+        },
+        {
+          id: 3,
+          title: 'Cupcake Ipsum',
+          content: '<p>Icing dessert soufflé lollipop chocolate bar sweet tart cake chupa chups. Soufflé marzipan jelly beans croissant toffee marzipan cupcake icing fruitcake. Muffin cake pudding soufflé wafer jelly bear claw sesame snaps marshmallow. Marzipan soufflé croissant lemon drops gingerbread sugar plum lemon drops apple pie gummies. Sweet roll donut oat cake toffee cake. Liquorice candy macaroon toffee cookie marzipan.</p>'
+        }
+      ],
+      selectedPost: null
+    }
+  },
+  template: '\
+    <div class="dynamic-component-demo-posts-tab">\
+      <ul class="dynamic-component-demo-posts-sidebar">\
+        <li\
+          v-for="post in posts"\
+          v-bind:key="post.id"\
+          v-bind:class="{ \'dynamic-component-demo-active\': post === selectedPost }"\
+          v-on:click="selectedPost = post"\
+        >\
+          {{ post.title }}\
+        </li>\
+      </ul>\
+      <div class="dynamic-component-demo-post-container">\
+        <div \
+          v-if="selectedPost"\
+          class="dynamic-component-demo-post"\
+        >\
+          <h3>{{ selectedPost.title }}</h3>\
+          <div v-html="selectedPost.content"></div>\
+        </div>\
+        <strong v-else>\
+          Click on a blog title to the left to view it.\
+        </strong>\
+      </div>\
+    </div>\
+  '
+})
+Vue.component('tab-archive', {
+  template: '<div>Archive component</div>'
+})
+new Vue({
+  el: '#dynamic-component-demo',
+  data: {
+    currentTab: 'Posts',
+    tabs: ['Posts', 'Archive']
+  },
+  computed: {
+    currentTabComponent: function () {
+      return 'tab-' + this.currentTab.toLowerCase()
+    }
+  }
+})
+</script>
+<style>
+.dynamic-component-demo-tab-button {
+  padding: 6px 10px;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  border: 1px solid #ccc;
+  cursor: pointer;
+  background: #f0f0f0;
+  margin-bottom: -1px;
+  margin-right: -1px;
+}
+.dynamic-component-demo-tab-button:hover {
+  background: #e0e0e0;
+}
+.dynamic-component-demo-tab-button.dynamic-component-demo-active {
+  background: #e0e0e0;
+}
+.dynamic-component-demo-tab {
+  border: 1px solid #ccc;
+  padding: 10px;
+}
+.dynamic-component-demo-posts-tab {
+  display: flex;
+}
+.dynamic-component-demo-posts-sidebar {
+  max-width: 40vw;
+  margin: 0 !important;
+  padding: 0 10px 0 0 !important;
+  list-style-type: none;
+  border-right: 1px solid #ccc;
+}
+.dynamic-component-demo-posts-sidebar li {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  cursor: pointer;
+}
+.dynamic-component-demo-posts-sidebar li:hover {
+  background: #eee;
+}
+.dynamic-component-demo-posts-sidebar li.dynamic-component-demo-active {
+  background: lightblue;
+}
+.dynamic-component-demo-post-container {
+  padding-left: 10px;
+}
+.dynamic-component-demo-post > :first-child {
+  margin-top: 0 !important;
+  padding-top: 0 !important;
+}
+</style>
+{% endraw %}
+
+You'll notice that if you select a post, switch to the _Archive_ tab, then switch back to _Posts_, it's no longer showing the post you selected. That's because each time you switch to a new tab, Vue creates a new instance of the `currentTabComponent`.
+
+Recreating dynamic components is normally useful behavior, but in this case, we'd really like those tab component instances to be cached once they're created for the first time. To solve this problem, we can wrap our dynamic component with a `<keep-alive>` element:
+
+``` html
+<!-- Inactive components will be cached! -->
+<keep-alive>
+  <component v-bind:is="currentTabComponent"></component>
+</keep-alive>
+```
+
+Check out the result below:
+
+{% raw %}
+<div id="dynamic-component-keep-alive-demo" class="demo">
+  <button
+    v-for="tab in tabs"
+    v-bind:key="tab"
+    v-bind:class="['dynamic-component-demo-tab-button', { 'dynamic-component-demo-active': currentTab === tab }]"
+    v-on:click="currentTab = tab"
+  >{{ tab }}</button>
+  <keep-alive>
+    <component
+      v-bind:is="currentTabComponent"
+      class="dynamic-component-demo-tab"
+    ></component>
+  </keep-alive>
+</div>
+<script>
+new Vue({
+  el: '#dynamic-component-keep-alive-demo',
+  data: {
+    currentTab: 'Posts',
+    tabs: ['Posts', 'Archive']
+  },
+  computed: {
+    currentTabComponent: function () {
+      return 'tab-' + this.currentTab.toLowerCase()
+    }
+  }
+})
+</script>
+{% endraw %}
+
+Now the _Posts_ tab maintains its state (the selected post) even when it's not rendered. See [this fiddle](https://jsfiddle.net/chrisvfritz/Lp20op9o/) for the complete code.
+
+<p class="tip">Note that `<keep-alive>` requires the components being switched between to all have names, either using the `name` option on a component, or through local/global registration.</p>
+
+Check out more details on `<keep-alive>` in the [API reference](../api/#keep-alive).
+
+## Async Components
+
+In large applications, we may need to divide the app into smaller chunks and only load a component from the server when it's needed. To make that easier, Vue allows you to define your component as a factory function that asynchronously resolves your component definition. Vue will only trigger the factory function when the component needs to be rendered and will cache the result for future re-renders. For example:
+
+``` js
+Vue.component('async-example', function (resolve, reject) {
+  setTimeout(function () {
+    // Pass the component definition to the resolve callback
+    resolve({
+      template: '<div>I am async!</div>'
+    })
+  }, 1000)
+})
+```
+
+As you can see, the factory function receives a `resolve` callback, which should be called when you have retrieved your component definition from the server. You can also call `reject(reason)` to indicate the load has failed. The `setTimeout` here is for demonstration; how to retrieve the component is up to you. One recommended approach is to use async components together with [Webpack's code-splitting feature](https://webpack.js.org/guides/code-splitting/):
+
+``` js
+Vue.component('async-webpack-example', function (resolve) {
+  // This special require syntax will instruct Webpack to
+  // automatically split your built code into bundles which
+  // are loaded over Ajax requests.
+  require(['./my-async-component'], resolve)
+})
+```
+
+You can also return a `Promise` in the factory function, so with Webpack 2 and ES2015 syntax you can do:
+
+``` js
+Vue.component(
+  'async-webpack-example',
+  // The `import` function returns a Promise.
+  () => import('./my-async-component')
+)
+```
+
+When using [local registration](components.html#Local-Registration), you can also directly provide a function that returns a `Promise`:
+
+``` js
+new Vue({
+  // ...
+  components: {
+    'my-component': () => import('./my-async-component')
+  }
+})
+```
+
+<p class="tip">If you're a <strong>Browserify</strong> user that would like to use async components, its creator has unfortunately [made it clear](https://github.com/substack/node-browserify/issues/58#issuecomment-21978224) that async loading "is not something that Browserify will ever support." Officially, at least. The Browserify community has found [some workarounds](https://github.com/vuejs/vuejs.org/issues/620), which may be helpful for existing and complex applications. For all other scenarios, we recommend using Webpack for built-in, first-class async support.</p>
+
+### Handling Loading State
+
+> New in 2.3.0+
+
+The async component factory can also return an object of the following format:
+
+``` js
+const AsyncCompontent = () => ({
+  // The component to load (should be a Promise)
+  component: import('./MyComponent.vue'),
+  // A component to use while the async component is loading
+  loading: LoadingComponent,
+  // A component to use if the load fails
+  error: ErrorComponent,
+  // Delay before showing the loading component. Default: 200ms.
+  delay: 200,
+  // The error component will be displayed if a timeout is
+  // provided and exceeded. Default: Infinity.
+  timeout: 3000
+})
+```
+
+> Note that you must use [Vue Router](https://github.com/vuejs/vue-router) 2.4.0+ if you wish to use the above syntax for route components.
diff --git a/src/v2/guide/components-edge-cases.md b/src/v2/guide/components-edge-cases.md
new file mode 100644
index 0000000000..60a558e135
--- /dev/null
+++ b/src/v2/guide/components-edge-cases.md
@@ -0,0 +1,319 @@
+---
+title: Handling Edge Cases
+type: guide
+order: 106
+---
+
+> This page assumes you've already read the [Components Basics](components.html). Read that first if you are new to components.
+
+<p class="tip">All the features on this page document the handling of edge cases, meaning unusual situations that sometimes require bending Vue's rules a little. Note however, that they all have disadvantages or situations where they could be dangerous. These are noted in each case, so keep them in mind when deciding to use each feature.</p>
+
+## Element & Component Access
+
+In most cases, it's best to avoid reaching into other component instances or manually manipulating DOM elements. There are cases, however, when it can be appropriate.
+
+### Accessing the Root Instance
+
+In every subcomponent of a `new Vue` instance, this root instance can be accessed with the `$root` property. For example, in this root instance:
+
+```js
+// The root Vue instance
+new Vue({
+  data: {
+    foo: 1
+  },
+  computed: {
+    bar: function () { /* ... */ }
+  }
+  methods: {
+    baz: function () { /* ... */ }
+  }
+})
+```
+
+All subcomponents will now be able to access this instance and use it as a global store:
+
+```js
+// Get root data
+this.$root.foo
+
+// Set root data
+this.$root.foo = 2
+
+// Access root computed properties
+this.$root.bar
+
+// Call root methods
+this.$root.baz()
+```
+
+<p class="tip">This can be convenient for demos or very small apps with a handful of components. However, the pattern does not scale well to medium or large-scale applications, so we strongly recommend using <a href="https://github.com/vuejs/vuex">Vuex</a> to manage state in most cases.</p>
+
+### Accessing the Parent Component Instance
+
+Similar to `$root`, the `$parent` property can be used to access the parent instance from a child. This can be tempting to reach for as a lazy alternative to passing data with a prop.
+
+<p class="tip">In most cases, reaching into the parent makes your application more difficult to debug and understand, especially if you mutate data in the parent. When looking at that component later, it will be very difficult to figure out where that mutation came from.</p>
+
+There are cases however, particularly shared component libraries, when this _might_ be appropriate. For example, in abstract components that interact with JavaScript APIs instead of rendering HTML, like these hypothetical Google Maps components:
+
+```html
+<google-map>
+  <google-map-markers v-bind:places="iceCreamShops"></google-map-markers>
+</google-map>
+```
+
+The `<google-map>` component might define a `map` property that all subcomponents need access to. In this case `<google-map-markers>` might want to access that map with something like `this.$parent.getMap`, in order to add a set of markers to it. You can see this pattern [in action here](https://jsfiddle.net/chrisvfritz/ttzutdxh/).
+
+Keep in mind, however, that components built with this pattern are still inherently fragile. For example, imagine we add a new `<google-map-region>` component and when `<google-map-markers>` appears within that, it should only render markers that fall within that region:
+
+```html
+<google-map>
+  <google-map-region v-bind:shape="cityBoundaries">
+    <google-map-markers v-bind:places="iceCreamShops"></google-map-markers>
+  </google-map-region>
+</google-map>
+```
+
+Then inside `<google-map-markers>` you might find yourself reaching for a hack like this:
+
+```js
+var map = this.$parent.map || this.$parent.$parent.map
+```
+
+This has quickly gotten out of hand. That's why to provide context information to descendent components arbitrarily deep, we instead recommend [dependency injection](#Dependency-Injection).
+
+### Accessing Child Component Instances & Child Elements
+
+Despite the existence of props and events, sometimes you might still need to directly access a child component in JavaScript. To achieve this you can assign a reference ID to the child component using the `ref` attribute. For example:
+
+```html
+<base-input ref="usernameInput"></base-input>
+```
+
+Now in the component where you've defined this `ref`, you can use:
+
+```js
+this.$refs.usernameInput
+```
+
+to access the `<base-input>` instance. This may be useful when you want to, for example, programmatically focus this input from a parent. In that case, the `<base-input>` component may similarly use a `ref` to provide access to specific elements inside it, such as:
+
+```html
+<input ref="input">
+```
+
+And even define methods for use by the parent:
+
+```js
+methods: {
+  // Used to focus the input from the parent
+  focus: function () {
+    this.$refs.input.focus()
+  }
+}
+```
+
+Thus allowing the parent component to focus the input inside `<base-input>` with:
+
+```js
+this.$refs.usernameInput.focus()
+```
+
+When `ref` is used together with `v-for`, the ref you get will be an array containing the child components mirroring the data source.
+
+<p class="tip"><code>$refs</code> are only populated after the component has been rendered, and they are not reactive. It is only meant as an escape hatch for direct child manipulation - you should avoid accessing <code>$refs</code> from within templates or computed properties.</p>
+
+### Dependency Injection
+
+Earlier, when we described [Accessing the Parent Component Instance](#Accessing-the-Parent-Component-Instance), we showed an example like this:
+
+```html
+<google-map>
+  <google-map-region v-bind:shape="cityBoundaries">
+    <google-map-markers v-bind:places="iceCreamShops"></google-map-markers>
+  </google-map-region>
+</google-map>
+```
+
+In this component, all descendants of `<google-map>` needed access to a `getMap` method, in order to know which map to interact with. Unfortunately, using the `$parent` property didn't scale well to more deeply nested components. That's where dependency injection can be useful, using two new instance options: `provide` and `inject`.
+
+The `provide` options allows us to specify the data/methods we want to **provide** to descendent components. In this case, that's the `getMap` method inside `<google-map>`:
+
+```js
+provide: function () {
+  return {
+    getMap: this.getMap
+  }
+}
+```
+
+Then in any descendants, we can use the `inject` option to receive specific properties we'd like to add to that instance:
+
+```js
+inject: ['getMap']
+```
+
+You can see the [full example here](https://jsfiddle.net/chrisvfritz/tdv8dt3s/). The advantage over using `$parent` is that we can access `getMap` in _any_ descendant component, without exposing the entire instance of `<google-map>`. This allows us to more safely keep developing that component, without fear that we might change/remove something that a child component is relying on. The interface between these components remains clearly defined, just as with `props`.
+
+In fact, you can think of dependency injection as sort of "long-range props", except:
+
+* ancestor components don't need to know which descendants use the properties it provides
+* descendant components don't know need to know where injected properties are coming from
+
+<p class="tip">However, there are downsides to dependency injection. It couples components in your application to the way they're currently organized, making refactoring more difficult. Provided properties are also not reactive. This is by design, because using them to create a central data store scales just as poorly as <a href="#Accessing-the-Root-Instance">using <code>$root</code></a> for the same purpose. If the properties you want to share are specific to your app, rather than generic, or if you ever want to update provided data inside ancestors, then that's a good sign that you probably need a real state management solution like <a href="https://github.com/vuejs/vuex">Vuex</a> instead.</p>
+
+Learn more about dependency injection in [the API doc](https://vuejs.org/v2/api/#provide-inject).
+
+## Programmatic Event Listeners
+
+So far, you've seen uses of `$emit`, listened to with `v-on`, but Vue instances also offer other methods in its events interface. We can:
+
+- Listen for an event with `$on(eventName, eventHandler)`
+- Listen for an event only once with `$once(eventName, eventHandler)`
+- Stop listening for an event with `$off(eventName, eventHandler)`
+
+You normally won't have to use these, but they're available for cases when you need to manually listen for events on a component instance. To learn more about their usage, check out the API for [Events Instance Methods](https://vuejs.org/v2/api/#Instance-Methods-Events).
+
+<p class="tip">Note that Vue's event system is different from the browser's <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget">EventTarget API</a>. Though they work similarly, <code>$emit</code>, <code>$on</code>, and <code>$off</code> are <strong>not</strong> aliases for <code>dispatchEvent</code>, <code>addEventListener</code>, and <code>removeEventListener</code>.</p>
+
+## Circular References
+
+### Recursive Components
+
+Components can recursively invoke themselves in their own template. However, they can only do so with the `name` option:
+
+``` js
+name: 'unique-name-of-my-component'
+```
+
+When you register a component globally using `Vue.component`, the global ID is automatically set as the component's `name` option.
+
+``` js
+Vue.component('unique-name-of-my-component', {
+  // ...
+})
+```
+
+If you're not careful, recursive components can also lead to infinite loops:
+
+``` js
+name: 'stack-overflow',
+template: '<div><stack-overflow></stack-overflow></div>'
+```
+
+A component like the above will result in a "max stack size exceeded" error, so make sure recursive invocation is conditional (i.e. uses a `v-if` that will eventually be `false`).
+
+### Circular References Between Components
+
+Let's say you're building a file directory tree, like in Finder or File Explorer. You might have a `tree-folder` component with this template:
+
+``` html
+<p>
+  <span>{{ folder.name }}</span>
+  <tree-folder-contents :children="folder.children"/>
+</p>
+```
+
+Then a `tree-folder-contents` component with this template:
+
+``` html
+<ul>
+  <li v-for="child in children">
+    <tree-folder v-if="child.children" :folder="child"/>
+    <span v-else>{{ child.name }}</span>
+  </li>
+</ul>
+```
+
+When you look closely, you'll see that these components will actually be each other's descendent _and_ ancestor in the render tree - a paradox! When registering components globally with `Vue.component`, this paradox is resolved for you automatically. If that's you, you can stop reading here.
+
+However, if you're requiring/importing components using a __module system__, e.g. via Webpack or Browserify, you'll get an error:
+
+```
+Failed to mount component: template or render function not defined.
+```
+
+To explain what's happening, let's call our components A and B. The module system sees that it needs A, but first A needs B, but B needs A, but A needs B, etc. It's stuck in a loop, not knowing how to fully resolve either component without first resolving the other. To fix this, we need to give the module system a point at which it can say, "A needs B _eventually_, but there's no need to resolve B first."
+
+In our case, let's make that point the `tree-folder` component. We know the child that creates the paradox is the `tree-folder-contents` component, so we'll wait until the `beforeCreate` lifecycle hook to register it:
+
+``` js
+beforeCreate: function () {
+  this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default
+}
+```
+
+Or alternatively, you could use Webpack's asynchronous `import` when you register the component locally:
+
+``` js
+components: {
+  TreeFolderContents: () => import('./tree-folder-contents.vue')
+}
+```
+
+Problem solved!
+
+## Alternate Template Definitions
+
+### Inline Templates
+
+When the `inline-template` special attribute is present on a child component, the component will use its inner content as its template, rather than treating it as distributed content. This allows more flexible template-authoring.
+
+``` html
+<my-component inline-template>
+  <div>
+    <p>These are compiled as the component's own template.</p>
+    <p>Not parent's transclusion content.</p>
+  </div>
+</my-component>
+```
+
+<p class="tip">However, <code>inline-template</code> makes the scope of your templates harder to reason about. As a best practice, prefer defining templates inside the component using the <code>template</code> option or in a <code>&lt;template&gt;</code> element in a <code>.vue</code> file.</p>
+
+### X-Templates
+
+Another way to define templates is inside of a script element with the type `text/x-template`, then referencing the template by an id. For example:
+
+``` html
+<script type="text/x-template" id="hello-world-template">
+  <p>Hello hello hello</p>
+</script>
+```
+
+``` js
+Vue.component('hello-world', {
+  template: '#hello-world-template'
+})
+```
+
+<p class="tip">These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.</p>
+
+## Controlling Updates
+
+Thanks to Vue's Reactivity system, it always knows when to update (if you use it correctly). There are edge cases, however, when you might want to force an update, despite the fact that no reactive data has changed. Then there are other cases when you might want to prevent unnecessary updates.
+
+### Forcing an Update
+
+<p class="tip">If you find yourself needing to force an update in Vue, in 99.99% of cases, you've made a mistake somewhere.</p>
+
+You may not have accounted for change detection caveats [with arrays](https://vuejs.org/v2/guide/list.html#Caveats) or [objects](https://vuejs.org/v2/guide/list.html#Object-Change-Detection-Caveats), or you may be relying on state that isn't tracked by Vue's reactivity system, e.g. with `data`.
+
+However, if you've ruled out the above and find yourself in this extremely rare situation of having to manually force an update, you can do so with [`$forceUpdate`](../api/#vm-forceUpdate).
+
+### Cheap Static Components with `v-once`
+
+Rendering plain HTML elements is very fast in Vue, but sometimes you might have a component that contains **a lot** of static content. In these cases, you can ensure that it's only evaluated once and then cached by adding the `v-once` directive to the root element, like this:
+
+``` js
+Vue.component('terms-of-service', {
+  template: `
+    <div v-once>
+      <h1>Terms of Service</h1>
+      ... a lot of static content ...
+    </div>
+  `
+})
+```
+
+<p class="tip">Once again, try not to overuse this pattern. While convenient in those rare cases when you have to render a lot of static content, it's simply not necessary unless you actually notice slow rendering -- plus, it could cause a lot of confusion later. For example, imagine another developer who's not familiar with <code>v-once</code> or simply misses it in the template. They might spend hours trying to figure out why the template isn't updating correctly.</p>
diff --git a/src/v2/guide/components-props.md b/src/v2/guide/components-props.md
new file mode 100644
index 0000000000..0bd1f71139
--- /dev/null
+++ b/src/v2/guide/components-props.md
@@ -0,0 +1,314 @@
+---
+title: Props
+type: guide
+order: 102
+---
+
+> This page assumes you've already read the [Components Basics](components.html). Read that first if you are new to components.
+
+## Prop Casing (camelCase vs kebab-case)
+
+HTML attribute names are case-insensitive, so browsers will interpret any uppercase characters as lowercase. That means when you're using in-DOM templates, camelCased prop names need to use their kebab-cased (hyphen-delimited) equivalents:
+
+``` js
+Vue.component('blog-post', {
+  // camelCase in JavaScript
+  props: ['postTitle'],
+  template: '<h3>{{ postTitle }}</h3>'
+})
+```
+
+``` html
+<!-- kebab-case in HTML -->
+<child post-title="hello!"></child>
+```
+
+Again, if you're using string templates, this limitation does not apply.
+
+## Static and Dynamic Props
+
+So far, you've seen props passed a static value, like in:
+
+```html
+<blog-post title="My journey with Vue"></blog-post>
+```
+
+You've also seen props assigned dynamically with `v-bind`, such as in:
+
+```html
+<blog-post v-bind:title="post.title"></blog-post>
+```
+
+In the two examples above, we happen to pass string values, but _any_ type of value can actually be passed to a prop.
+
+### Passing a Number
+
+```html
+<!-- Even though `42` is static, we need v-bind to tell Vue that -->
+<!-- this is a JavaScript expression rather than a string.       -->
+<blog-post v-bind:likes="42"></blog-post>
+
+<!-- Dynamically assign to the value of a variable. -->
+<blog-post v-bind:likes="post.likes"></blog-post>
+```
+
+### Passing a Boolean
+
+```html
+<!-- Including the prop with no value will imply `true`. -->
+<blog-post favorited></blog-post>
+
+<!-- Even though `false` is static, we need v-bind to tell Vue that -->
+<!-- this is a JavaScript expression rather than a string.          -->
+<base-input v-bind:favorited="false">
+
+<!-- Dynamically assign to the value of a variable. -->
+<base-input v-bind:favorited="post.currentUserFavorited">
+```
+
+### Passing an Array
+
+```html
+<!-- Even though the array is static, we need v-bind to tell Vue that -->
+<!-- this is a JavaScript expression rather than a string.            -->
+<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>
+
+<!-- Dynamically assign to the value of a variable. -->
+<blog-post v-bind:comment-ids="post.commentIds"></blog-post>
+```
+
+### Passing an Object
+
+```html
+<!-- Even though the object is static, we need v-bind to tell Vue that -->
+<!-- this is a JavaScript expression rather than a string.             -->
+<blog-post v-bind:comments="{ id: 1, title: 'My Journey with Vue' }"></blog-post>
+
+<!-- Dynamically assign to the value of a variable. -->
+<blog-post v-bind:post="post"></blog-post>
+```
+
+### Passing the Properties of an Object
+
+If you want to pass all the properties of an object as props, you can use `v-bind` without an argument (`v-bind` instead of `v-bind:prop-name`). For example, given a `post` object:
+
+``` js
+post: {
+  id: 1,
+  title: 'My Journey with Vue'
+}
+```
+
+The following template:
+
+``` html
+<blog-post v-bind="post"></blog-post>
+```
+
+Will be equivalent to:
+
+``` html
+<blog-post
+  v-bind:id="post.id"
+  v-bind:title="post.title"
+></blog-post>
+```
+
+## One-Way Data Flow
+
+All props form a **one-way-down binding** between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. This prevents child components from accidentally mutating the parent's state, which can make your app's data flow harder to understand.
+
+In addition, every time the parent component is updated, all props in the child component will be refreshed with the latest value. This means you should **not** attempt to mutate a prop inside a child component. If you do, Vue will warn you in the console.
+
+There are usually two cases where it's tempting to mutate a prop:
+
+1. **The prop is used to pass in an initial value; the child component wants to use it as a local data property afterwards.** In this case, it's best to define a local data property that uses the prop as its initial value:
+
+  ``` js
+  props: ['initialCounter'],
+  data: function () {
+    return {
+      counter: this.initialCounter
+    }
+  }
+  ```
+
+2. **The prop is passed in as a raw value that needs to be transformed.** In this case, it's best to define a computed property using the prop's value:
+
+  ``` js
+  props: ['size'],
+  computed: {
+    normalizedSize: function () {
+      return this.size.trim().toLowerCase()
+    }
+  }
+  ```
+
+<p class="tip">Note that objects and arrays in JavaScript are passed by reference, so if the prop is an array or object, mutating the object or array itself inside the child component **will** affect parent state.</p>
+
+## Prop Validation
+
+Components can specify requirements for its props. If a requirement isn't met, Vue will warn you in the browser's JavaScript console. This is especially useful when developing a component that's intended to be used by others.
+
+To specify prop validations, you case provide an object with validation requirements to the value of `props`, instead of an array of strings. For example:
+
+``` js
+Vue.component('my-component', {
+  props: {
+    // Basic type check (`null` matches any type)
+    propA: Number,
+    // Multiple possible types
+    propB: [String, Number],
+    // Required string
+    propC: {
+      type: String,
+      required: true
+    },
+    // Number with a default value
+    propD: {
+      type: Number,
+      default: 100
+    },
+    // Object with a default value
+    propE: {
+      type: Object,
+      // Object or array defaults must be returned from
+      // a factory function
+      default: function () {
+        return { message: 'hello' }
+      }
+    },
+    // Custom validator function
+    propF: {
+      validator: function (value) {
+        // The value must match one of these strings
+        return ['success', 'warning', 'danger'].indexOf(value) !== -1
+      }
+    }
+  }
+})
+```
+
+When prop validation fails, Vue will produce a console warning (if using the development build).
+
+<p class="tip">Note that props are validated **before** a component instance is created, so instance properties (e.g. `data`, `computed`, etc) will not be available inside `default` or `validator` functions.</p>
+
+### Type Checks
+
+The `type` can be one of the following native constructors:
+
+- String
+- Number
+- Boolean
+- Function
+- Object
+- Array
+- Symbol
+
+In addition, `type` can also be a custom constructor function and the assertion will be made with an `instanceof` check. For example, given the following constructor function exists:
+
+```js
+function Person (firstName, lastName) {
+  this.firstName = firstName
+  this.lastName = lastName
+}
+```
+
+You could use:
+
+```js
+Vue.component('blog-post', {
+  props: {
+    author: Person
+  }
+})
+```
+
+to validate that the value of the `author` prop was created with `new Person`.
+
+## Non-Prop Attributes
+
+A non-prop attribute is an attribute that is passed to a component, but does not have a corresponding prop defined.
+
+While explicitly defined props are preferred for passing information to a child component, authors of component libraries can't always foresee the contexts in which their components might be used. That's why components can accept arbitrary attributes, which are added to the component's root element.
+
+For example, imagine we're using a 3rd-party `bootstrap-date-input` component with a Bootstrap plugin that requires a `data-date-picker` attribute on the `input`. We can add this attribute to our component instance:
+
+``` html
+<bootstrap-date-input data-date-picker="activated"></bootstrap-date-input>
+```
+
+And the `data-date-picker="activated"` attribute will automatically be added to the root element of `bootstrap-date-input`.
+
+### Replacing/Merging with Existing Attributes
+
+Imagine this is the template for `bootstrap-date-input`:
+
+``` html
+<input type="date" class="form-control">
+```
+
+To specify a theme for our date picker plugin, we might need to add a specific class, like this:
+
+``` html
+<bootstrap-date-input
+  data-date-picker="activated"
+  class="date-picker-theme-dark"
+></bootstrap-date-input>
+```
+
+In this case, two different values for `class` are defined:
+
+- `form-control`, which is set by the component in its template
+- `date-picker-theme-dark`, which is passed to the component by its parent
+
+For most attributes, the value provided to the component will replace the value set by the component. So for example, passing `type="text"` will replace `type="date"` and probably break it! Fortunately, the `class` and `style` attributes are a little smarter, so both values are merged, making the final value: `form-control date-picker-theme-dark`.
+
+### Disabling Attribute Inheritance
+
+If you do **not** want the root element of a component to inherit attributes, you can set `inheritAttrs: false` in the component's options. For example:
+
+```js
+Vue.component('my-component', {
+  inheritAttrs: false,
+  // ...
+})
+```
+
+This can be especially useful in combination with the `$attrs` instance property, which contains the attribute names and values passed to a component, such as:
+
+```js
+{
+  class: 'username-input',
+  placeholder: 'Enter your username'
+}
+```
+
+With `inheritAttrs: false` and `$attrs`, you can manually decide which element you want to forward attributes to, which is often desirable for [base components](../style-guide/#Base-component-names-strongly-recommended):
+
+```js
+Vue.component('base-input', {
+  inheritAttrs: false,
+  props: ['label', 'value'],
+  template: `
+    <label>
+      {{ label }}
+      <input
+        v-bind="$attrs"
+        v-bind:value="value"
+        v-on:input="$emit('input', $event.target.value)"
+      >
+    </label>
+  `
+})
+```
+
+This pattern allows you to use base components more like raw HTML elements, without having to care about which element is actually at its root:
+
+```html
+<base-input
+  v-model="username"
+  class="username-input"
+  placeholder="Enter your username"
+></base-input>
+```
diff --git a/src/v2/guide/components-registration.md b/src/v2/guide/components-registration.md
new file mode 100644
index 0000000000..8b14cf451b
--- /dev/null
+++ b/src/v2/guide/components-registration.md
@@ -0,0 +1,226 @@
+---
+title: Component Registration
+type: guide
+order: 101
+---
+
+> This page assumes you've already read the [Components Basics](components.html). Read that first if you are new to components.
+
+## Component Names
+
+When registering a component, it will always be given a name. For example, in the global registration we've seen so far:
+
+```js
+Vue.component('my-component-name', { /* ... */ })
+```
+
+The component's name is the first argument of `Vue.component`.
+
+The name you give a component may depend on where you intend to use it. When using a component directly in the DOM (as opposed to in a string template or [single-file component](single-file-components.html)), we strongly recommend following the [W3C rules](https://www.w3.org/TR/custom-elements/#concepts) for custom tag names (all-lowercase, must contain a hyphen). This helps you avoid conflicts with current and future HTML elements.
+
+You can see other recommendations for component names in the [Style Guide](../style-guide/#Base-component-names-strongly-recommended).
+
+### Name Casing
+
+You have two options when defining component names:
+
+#### With kebab-case
+
+```js
+Vue.component('my-component-name', { /* ... */ })
+```
+
+When defining a component with kebab-case, you must also use kebab-case when referencing its custom element, such as in `<my-component-name>`.
+
+#### With PascalCase
+
+```js
+Vue.component('MyComponentName', { /* ... */ })
+```
+
+When defining a component with PascalCase, you can use either case when referencing its custom element. That means both `<my-component-name>` and `<MyComponentName>` are acceptable. Note, however, that only kebab-case names are valid directly in the DOM (i.e. non-string templates).
+
+## Global Registration
+
+So far, we've only created components using `Vue.component`:
+
+```js
+Vue.component('my-component-name', {
+  // ... options ...
+})
+```
+
+These components are **globally registered**. That means they can be used in the template of any root Vue instance (`new Vue`) created after registration. For example:
+
+```js
+Vue.component('component-a', { /* ... */ })
+Vue.component('component-b', { /* ... */ })
+Vue.component('component-c', { /* ... */ })
+
+new Vue({ el: '#app' })
+```
+
+```html
+<div id="app">
+  <component-a></component-a>
+  <component-b></component-b>
+  <component-c></component-c>
+</div>
+```
+
+This even applies to all subcomponents, meaning all three of these components will also be available _inside each other_.
+
+## Local Registration
+
+Global registration often isn't ideal. For example, if you're using a build system like Webpack, globally registering all components means that even if you stop using a component, it could still be included in your final build. This unnecessarily increases the amount of JavaScript your users have to download.
+
+In these cases, you can define your components as plain JavaScript objects:
+
+```js
+var ComponentA = { /* ... */ }
+var ComponentB = { /* ... */ }
+var ComponentC = { /* ... */ }
+```
+
+Then define the components you'd like to use in a `components` option:
+
+```js
+new Vue({
+  el: '#app'
+  components: {
+    'component-a': ComponentA,
+    'component-b': ComponentB
+  }
+})
+```
+
+For each property in the `components` object, the key will be the name of the custom element, while the value will contain the options object for the component.
+
+Note that **locally registered components are _not_ also available in subcomponents**. For example, if you wanted `ComponentA` to be available in `ComponentB`, you'd have to use:
+
+```js
+var ComponentA = { /* ... */ }
+
+var ComponentB = {
+  components: {
+    'component-a': ComponentA
+  },
+  // ...
+}
+```
+
+Or if you're using ES2015 modules, such as through Babel and Webpack, that might look more like:
+
+```js
+import ComponentA from './ComponentA.vue'
+
+export default {
+  components: {
+    ComponentA
+  },
+  // ...
+}
+```
+
+Note that in ES2015+, placing a variable name like `ComponentA` inside an object is shorthand for `ComponentA: ComponentA`, meaning the name of the variable is both:
+
+- the custom element name to use in the template, and
+- the name of the variable containing the component options
+
+## Module Systems
+
+If you're not using a module system with `import`/`require`, you can probably skip this section for now. If you are, we have some special instructions and tips just for you.
+
+### Local Registration in a Module System
+
+If you're still here, then it's likely you're using a module system, such as with Babel and Webpack. In these cases, we recommend creating a `components`, with each component in its own file.
+
+Then you'll need to import each component you'd like to use, before you locally register it. For example, in a hypothetical `CompononentB.js` or `ComponentB.vue` file:
+
+```js
+import ComponentA from './ComponentA'
+import ComponentC from './ComponentC'
+
+export default {
+  components: {
+    ComponentA,
+    ComponentC
+  },
+  // ...
+}
+```
+
+Now both `ComponentA` and `ComponentC` can be used inside `ComponentB`'s template.
+
+### Automatic Global Registration of Base Components
+
+Many of your components will be relatively generic, possibly only wrapping an an element like an input or a button. We sometimes refer to these as [base components](../style-guide/#Base-component-names-strongly-recommended) and they tend to be used very frequently across your components.
+
+The result is that many components may include long lists of base components:
+
+```js
+import BaseButton from './BaseButton.vue'
+import BaseIcon from './BaseIcon.vue'
+import BaseInput from './BaseInput.vue'
+
+export default {
+  components: {
+    BaseButton,
+    BaseIcon,
+    BaseInput
+  }
+}
+```
+
+Just to support relatively little markup in a template:
+
+```html
+<BaseInput
+  v-model="searchText"
+  @keydown.enter="search"
+/>
+<BaseButton @click="search">
+  <BaseIcon name="search"/>
+</BaseButton>
+```
+
+Fortunately, if you're using Webpack (or [Vue CLI 3+](https://github.com/vuejs/vue-cli), which uses Webpack internally), you can use `require.context` to globally register only these very common base components. Here's an example of the code you might use to globally import base components in your app's entry file (e.g. `src/main.js`):
+
+```js
+import Vue from 'vue'
+import upperFirst from 'lodash/upperFirst'
+import camelCase from 'lodash/camelCase'
+
+const requireComponent = require.context(
+  // The relative path of the components folder
+  './components',
+  // Whether or not to look in subfolders
+  false,
+  // The regular expression used to match base component filenames
+  /Base[A-Z]\w+\.(vue|js)$/
+)
+
+requireComponent.keys().forEach(fileName => {
+  // Get component config
+  const componentConfig = requireComponent(fileName)
+
+  // Get PascalCase name of component
+  const componentName = upperFirst(
+    camelCase(
+      // Strip the leading `'./` and extension from the filename
+      fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
+    )
+  )
+
+  // Register component globally
+  Vue.component(
+    componentName,
+    // Look for the component options on `.default`, which will
+    // exist if the component was exported with `export default`,
+    // otherwise fall back to module's root.
+    componentConfig.default || componentConfig
+  )
+})
+```
+
+Remember that **global registration must take place before the root Vue instance is created (with `new Vue`)**. [Here's an example](https://github.com/chrisvfritz/vue-enterprise-boilerplate/blob/master/src/components/_globals.js) of this pattern in a real project context.
diff --git a/src/v2/guide/components-slots.md b/src/v2/guide/components-slots.md
new file mode 100644
index 0000000000..f90cf8e6ef
--- /dev/null
+++ b/src/v2/guide/components-slots.md
@@ -0,0 +1,229 @@
+---
+title: Slots
+type: guide
+order: 104
+---
+
+> This page assumes you've already read the [Components Basics](components.html). Read that first if you are new to components.
+
+## Slot Content
+
+Vue implements a content distribution API that's modeled after the current [Web Components spec draft](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md), using the `<slot>` element to serve as distribution outlets for content.
+
+This allows you to compose components like this:
+
+``` html
+<navigation-link url="/profile">
+  Your Profile
+</navigation-link>
+```
+
+Then in the template for `<navigation-link>`, you might have:
+
+``` html
+<a
+  v-bind:href="url"
+  class="nav-link"
+>
+  <slot></slot>
+</a>
+```
+
+When the component renders, the `<slot>` element will be replaced by "Your Profile". Slots can contain any template code, including HTML:
+
+``` html
+<navigation-link url="/profile">
+  <!-- Add a Font Awesome icon -->
+  <span class="fa fa-user"></span>
+  Your Profile
+</navigation-link>
+```
+
+Or even other components:
+
+``` html
+<navigation-link url="/profile">
+  <!-- Use a component to add an icon -->
+  <font-awesome-icon name="user"></font-awesome-icon>
+  Your Profile
+</navigation-link>
+```
+
+If `<navigation-link>` did **not** contain a `<slot>` element, any content passed to it would simply be discarded.
+
+## Named Slots
+
+There are times when it's useful to have multiple slots. For example, in a hypothetical `base-layout` component with the following template:
+
+``` html
+<div class="container">
+  <header>
+    <!-- We want header content here -->
+  </header>
+  <main>
+    <!-- We want main content here -->
+  </main>
+  <footer>
+    <!-- We want footer content here -->
+  </footer>
+</div>
+```
+
+For these cases, the `<slot>` element has a special attribute, `name`, which can be used to define additional slots:
+
+``` html
+<div class="container">
+  <header>
+    <slot name="header"></slot>
+  </header>
+  <main>
+    <slot></slot>
+  </main>
+  <footer>
+    <slot name="footer"></slot>
+  </footer>
+</div>
+```
+
+To provide content to named slots, we can use the `slot` attribute on a `<template>` element in the parent:
+
+```html
+<base-layout>
+  <template slot="header">
+    <h1>Here might be a page title</h1>
+  </template>
+
+  <p>A paragraph for the main content.</p>
+  <p>And another one.</p>
+
+  <template slot="footer">
+    <p>Here's some contact info</p>
+  </template>
+</base-layout>
+```
+
+Or, the `slot` attribute can also be used directly on a normal element:
+
+``` html
+<base-layout>
+  <h1 slot="header">Here might be a page title</h1>
+
+  <p>A paragraph for the main content.</p>
+  <p>And another one.</p>
+
+  <p slot="footer">Here's some contact info</p>
+</base-layout>
+```
+
+There can still be one unnamed slot, which is the **default slot** that serves as a catch-all outlet for any unmatched content. In both examples above, the  rendered HTML would be:
+
+``` html
+<div class="container">
+  <header>
+    <h1>Here might be a page title</h1>
+  </header>
+  <main>
+    <p>A paragraph for the main content.</p>
+    <p>And another one.</p>
+  </main>
+  <footer>
+    <p>Here's some contact info</p>
+  </footer>
+</div>
+```
+
+## Default Slot Content
+
+There are cases when it's useful to provide a slot with default content. For example, a `<submit-button>` component might want the content of the button to be "Submit" by default, but also allow users to override with "Save", "Upload", or anything else.
+
+To achieve this, specify the default content in between the `<slot>` tags.
+
+```html
+<button type="submit">
+  <slot>Submit</slot>
+</button>
+```
+
+If the slot is provided content by the parent, it will replace the default content.
+
+## Compilation Scope
+
+When you want to use data inside a slot, such as in:
+
+``` html
+<navigation-link url="/profile">
+  Logged in as {{ user.name }}
+</navigation-link>
+```
+
+That slot has access to the same instance properties (i.e. the same "scope") as the rest of the template. The slot does **not** have access to `<navigation-link>`'s scope. For example, trying to access `url` would not work. As a rule, remember that:
+
+> Everything in the parent template is compiled in parent scope; everything in the child template is compiled in the child scope.
+
+## Scoped Slots
+
+> New in 2.1.0+
+
+Sometimes you'll want to provide a component with a reusable slot that can access data from the child component. For example, a simple `<todo-list>` component may contain the following in its template:
+
+```html
+<ul>
+  <li
+    v-for="todo in todos"
+    v-bind:key="todo.id"
+  >
+    {{ todo.text }}
+  </li>
+</ul>
+```
+
+But in some parts of our app, we want the individual todo items to render something different than just the `todo.text`. This is where scoped slots come in.
+
+To make the feature possible, all we have to do is wrap the todo item content in a `<slot>` element, then pass the slot any data relevant to its context: in this case, the `todo` object:
+
+```html
+<ul>
+  <li
+    v-for="todo in todos"
+    v-bind:key="todo.id"
+  >
+    <!-- We have a slot for each todo, passing it the -->
+    <!-- `todo` object as a slot prop.                -->
+    <slot v-bind:todo="todo">
+      <!-- Fallback content -->
+      {{ todo.text }}
+    </slot>
+  </li>
+</ul>
+```
+
+Now when we use the `<todo-list>` component, we can optionally define an alternative `<template>` for todo items, but with access to data from the child via the `slot-scope` attribute:
+
+```html
+<todo-list v-bind:todos="todos">
+  <!-- Define `slotProps` as the name of our slot scope -->
+  <template slot-scope="slotProps">
+    <!-- Define a custom template for todo items, using -->
+    <!-- `slotProps` to customize each todo.            -->
+    <span v-if="slotProps.todo.isComplete">✓</span>
+    {{ slotProps.todo.text }}
+  </template>
+</todo-list>
+```
+
+> In 2.5.0+, `slot-scope` is no longer limited to the `<template>` element, but can instead be used on any element or component in the slot.
+
+### Destructuring `slot-scope`
+
+The value of `slot-scope` can actually accept any valid JavaScript expression that can appear in the argument position of a function definition. This means in supported environments ([single-file components](single-file-components.html) or [modern browsers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Browser_compatibility)) you can also use [ES2015 destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring) in the expression, like so:
+
+```html
+<todo-list v-bind:todos="todos">
+  <template slot-scope="{ todo }">
+    <span v-if="todo.isComplete">✓</span>
+    {{ todo.text }}
+  </template>
+</todo-list>
+```
+
+This is a great way to make scoped slots a little cleaner.
diff --git a/src/v2/guide/components.md b/src/v2/guide/components.md
index 8db71229a4..f46db89e24 100644
--- a/src/v2/guide/components.md
+++ b/src/v2/guide/components.md
@@ -1,1481 +1,595 @@
 ---
-title: Components
+title: Components Basics
 type: guide
 order: 11
 ---
 
-## What are Components?
+## Base Example
 
-Components are one of the most powerful features of Vue. They help you extend basic HTML elements to encapsulate reusable code. At a high level, components are custom elements that Vue's compiler attaches behavior to. In some cases, they may also appear as a native HTML element extended with the special `is` attribute.
-
-All Vue components are also Vue instances, and so accept the same options object (except for a few root-specific options) and provide the same lifecycle hooks.
-
-## Using Components
-
-### Global Registration
-
-We've learned in the previous sections that we can create a new Vue instance with:
+Here's an example of a Vue component:
 
 ``` js
-new Vue({
-  el: '#some-element',
-  // options
+// Define a new component called button-counter
+Vue.component('button-counter', {
+  data: function () {
+    return {
+      count: 0
+    }
+  },
+  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
 })
 ```
 
-To register a global component, you can use `Vue.component(tagName, options)`. For example:
+Components are reusable Vue instances with a name: in this case, `<button-counter>`. We can use this component as a custom element inside a root Vue instance created with `new Vue`:
 
-``` js
-Vue.component('my-component', {
-  // options
-})
+```html
+<div id="components-demo">
+  <button-counter></button-counter>
+</div>
 ```
 
-<p class="tip">Note that Vue does not enforce the [W3C rules](https://www.w3.org/TR/custom-elements/#concepts) for custom tag names (all-lowercase, must contain a hyphen) though following this convention is considered good practice.</p>
-
-Once registered, a component can be used in an instance's template as a custom element, `<my-component></my-component>`. Make sure the component is registered **before** you instantiate the root Vue instance. Here's the full example:
-
-``` html
-<div id="example">
-  <my-component></my-component>
-</div>
+```js
+new Vue({ el: '#components-demo' })
 ```
 
-``` js
-// register
-Vue.component('my-component', {
-  template: '<div>A custom component!</div>'
+{% raw %}
+<div id="components-demo" class="demo">
+  <button-counter></button-counter>
+</div>
+<script>
+Vue.component('button-counter', {
+  data: function () {
+    return {
+      count: 0
+    }
+  },
+  template: '<button v-on:click="count += 1">You clicked me {{ count }} times.</button>'
 })
+new Vue({ el: '#components-demo' })
+</script>
+{% endraw %}
 
-// create a root instance
-new Vue({
-  el: '#example'
-})
-```
+Since components are reusable Vue instances, they accept the same options as `new Vue`, such as `data`, `computed`, `watch`, `methods`, and lifecycle hooks. The only exceptions are a few root-specific options like `el`.
 
-Which will render:
+## Reusing Components
 
-``` html
-<div id="example">
-  <div>A custom component!</div>
+Components can be reused as many times as you want:
+
+```html
+<div id="components-demo">
+  <button-counter></button-counter>
+  <button-counter></button-counter>
+  <button-counter></button-counter>
 </div>
 ```
 
 {% raw %}
-<div id="example" class="demo">
-  <my-component></my-component>
+<div id="components-demo2" class="demo">
+  <button-counter></button-counter>
+  <button-counter></button-counter>
+  <button-counter></button-counter>
 </div>
 <script>
-Vue.component('my-component', {
-  template: '<div>A custom component!</div>'
-})
-new Vue({ el: '#example' })
+new Vue({ el: '#components-demo2' })
 </script>
 {% endraw %}
 
-### Local Registration
+Notice that when clicking on the buttons, each one maintains its own, separate `count`. That's because each time you use a component, a new **instance** of it is created.
 
-You don't have to register every component globally. You can make a component available only in the scope of another instance/component by registering it with the `components` instance option:
+### `data` Must Be a Function
 
-``` js
-var Child = {
-  template: '<div>A custom component!</div>'
+When we defined the `<button-counter>` component, you may have noticed that `data` wasn't directly provided an object, like this:
+
+```js
+data: {
+  count: 0
 }
+```
 
-new Vue({
-  // ...
-  components: {
-    // <my-component> will only be available in parent's template
-    'my-component': Child
+Instead, **a component's `data` option must be a function**, so that each instance can maintain an independent copy of the returned data object:
+
+```js
+data: function () {
+  return {
+    count: 0
   }
-})
+}
 ```
 
-The same encapsulation applies for other registerable Vue features, such as directives.
+If Vue didn't have this rule, clicking on one button would affect the data of _all other instances_, like below:
+
+{% raw %}
+<div id="components-demo3" class="demo">
+  <button-counter2></button-counter2>
+  <button-counter2></button-counter2>
+  <button-counter2></button-counter2>
+</div>
+<script>
+var buttonCounter2Data = {
+  count: 0
+}
+Vue.component('button-counter2', {
+  data: function () {
+    return buttonCounter2Data
+  },
+  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
+})
+new Vue({ el: '#components-demo3' })
+</script>
+{% endraw %}
 
-### DOM Template Parsing Caveats
+## Organizing Components
 
-When using the DOM as your template (e.g. using the `el` option to mount an element with existing content), you will be subject to some restrictions that are inherent to how HTML works, because Vue can only retrieve the template content **after** the browser has parsed and normalized it. Most notably, some elements such as `<ul>`, `<ol>`, `<table>` and `<select>` have restrictions on what elements can appear inside them, and some elements such as `<option>` can only appear inside certain other elements.
+It's common for an app to be organized into a tree of nested components:
 
-This will lead to issues when using custom components with elements that have such restrictions, for example:
+![Component Tree](/images/components.png)
 
-``` html
-<table>
-  <my-row>...</my-row>
-</table>
-```
+For example, you might have components for a header, sidebar, and content area, each typically containing other components for navigation links, blog posts, etc.
 
-The custom component `<my-row>` will be hoisted out as invalid content, thus causing errors in the eventual rendered output. A workaround is to use the `is` special attribute:
+To use these components in templates, they must be registered so that Vue knows about them. There are two types of component registration: **global** and **local**. So far, we've only registered components globally, using `Vue.component`:
 
-``` html
-<table>
-  <tr is="my-row"></tr>
-</table>
+```js
+Vue.component('my-component-name', {
+  // ... options ...
+})
 ```
 
-**It should be noted that these limitations do not apply if you are using string templates from one of the following sources**:
+Globally registered components can be used in the template of any root Vue instance (`new Vue`) created afterwards -- and even inside all subcomponents of that Vue instance's component tree.
 
-- `<script type="text/x-template">`
-- JavaScript inline template strings
-- `.vue` components
+That's all you need to know about registration for now, but once you've finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on [Component Registration](components-registration.html).
 
-Therefore, prefer using string templates whenever possible.
+## Passing Data to Child Components with Props
 
-### `data` Must Be a Function
+Earlier, we mentioned creating a component for blog posts. The problem is, that component won't be useful unless you can pass data to it, such as the title and content of the specific post we want to display. That's where props come in.
 
-Most of the options that can be passed into the Vue constructor can be used in a component, with one special case: `data` must be a function. In fact, if you try this:
+Props are custom attributes you can register on a component. When a value is passed to a prop attribute, it becomes a _prop_erty on that component instance. To pass a title to our blog post component, we can include it in the list of props this component accepts, using a `props` option:
 
-``` js
-Vue.component('my-component', {
-  template: '<span>{{ message }}</span>',
-  data: {
-    message: 'hello'
-  }
+```js
+Vue.component('blog-post', {
+  props: ['title'],
+  template: '<h3>{{ title }}</h3>'
 })
 ```
 
-Then Vue will halt and emit warnings in the console, telling you that `data` must be a function for component instances. It's good to understand why the rules exist though, so let's cheat.
-
-``` html
-<div id="example-2">
-  <simple-counter></simple-counter>
-  <simple-counter></simple-counter>
-  <simple-counter></simple-counter>
-</div>
-```
-
-``` js
-var data = { counter: 0 }
+A component can have as many props as you'd like and by default, any value can be passed to any prop. In the template above, you'll see that we can access this value on the component instance, just like with `data`.
 
-Vue.component('simple-counter', {
-  template: '<button v-on:click="counter += 1">{{ counter }}</button>',
-  // data is technically a function, so Vue won't
-  // complain, but we return the same object
-  // reference for each component instance
-  data: function () {
-    return data
-  }
-})
+Once a prop is registered, you can pass data to it as a custom attribute, like this:
 
-new Vue({
-  el: '#example-2'
-})
+```html
+<blog-post title="My journey with Vue"></blog-post>
+<blog-post title="Blogging with Vue"></blog-post>
+<blog-post title="Why Vue is so fun"></blog-post>
 ```
 
 {% raw %}
-<div id="example-2" class="demo">
-  <simple-counter></simple-counter>
-  <simple-counter></simple-counter>
-  <simple-counter></simple-counter>
+<div id="blog-post-demo" class="demo">
+  <blog-post1 title="My journey with Vue"></blog-post1>
+  <blog-post1 title="Blogging with Vue"></blog-post1>
+  <blog-post1 title="Why Vue is so fun"></blog-post1>
 </div>
 <script>
-var data = { counter: 0 }
-Vue.component('simple-counter', {
-  template: '<button v-on:click="counter += 1">{{ counter }}</button>',
-  data: function () {
-    return data
-  }
-})
-new Vue({
-  el: '#example-2'
+Vue.component('blog-post1', {
+  props: ['title'],
+  template: '<h3>{{ title }}</h3>'
 })
+new Vue({ el: '#blog-post-demo' })
 </script>
 {% endraw %}
 
-Since all three component instances share the same `data` object, incrementing one counter increments them all! Ouch. Let's fix this by instead returning a fresh data object:
+In a typical app, however, you'll likely have an array of posts in `data`:
 
-``` js
-data: function () {
-  return {
-    counter: 0
+```js
+new Vue({
+  el: '#blog-post-demo',
+  data: {
+    posts: [
+      { id: 1, title: 'My journey with Vue' },
+      { id: 2, title: 'Blogging with Vue' },
+      { id: 3, title: 'Why Vue is so fun' },
+    ]
   }
-}
+})
 ```
 
-Now all our counters each have their own internal state:
+Then want to render a component for each one:
 
-{% raw %}
-<div id="example-2-5" class="demo">
-  <my-component></my-component>
-  <my-component></my-component>
-  <my-component></my-component>
-</div>
-<script>
-Vue.component('my-component', {
-  template: '<button v-on:click="counter += 1">{{ counter }}</button>',
-  data: function () {
-    return {
-      counter: 0
-    }
-  }
-})
-new Vue({
-  el: '#example-2-5'
-})
-</script>
-{% endraw %}
+```html
+<blog-post
+  v-for="post in posts"
+  v-bind:key="post.id"
+  v-bind:title="post.title"
+></blog-post>
+```
 
-### Composing Components
+Above, you'll see that we can use `v-bind` to dynamically pass props. This is especially useful when you don't know the exact content you're going to render ahead of time, like when [fetching posts from an API](https://jsfiddle.net/chrisvfritz/sbLgr0ad).
 
-Components are meant to be used together, most commonly in parent-child relationships: component A may use component B in its own template. They inevitably need to communicate to one another: the parent may need to pass data down to the child, and the child may need to inform the parent of something that happened in the child. However, it is also very important to keep the parent and the child as decoupled as possible via a clearly-defined interface. This ensures each component's code can be written and reasoned about in relative isolation, thus making them more maintainable and potentially easier to reuse.
+That's all you need to know about props for now, but once you've finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on [Props](components-props.html).
 
-In Vue, the parent-child component relationship can be summarized as **props down, events up**. The parent passes data down to the child via **props**, and the child sends messages to the parent via **events**. Let's see how they work next.
+## A Single Root Element
 
-<p style="text-align: center;">
-  <img style="width: 300px;" src="/images/props-events.png" alt="props down, events up">
-</p>
+When building out a `<blog-post>` component, your template will eventually contain more than just the title:
 
-## Props
+```html
+<h3>{{ post.title }}</h3>
+```
 
-### Passing Data with Props
+At the very least, you'll want to include the post's content:
 
-Every component instance has its own **isolated scope**. This means you cannot (and should not) directly reference parent data in a child component's template. Data can be passed down to child components using **props**.
+```html
+<h3>{{ post.title }}</h3>
+<div v-html="post.content"></div>
+```
 
-A prop is a custom attribute for passing information from parent components. A child component needs to explicitly declare the props it expects to receive using the [`props` option](../api/#props):
+If you try this in your template however, Vue will show an error, explaining that **every component must have a single root element**. You can fix this error by wrapping the template in a parent element, such as:
 
-``` js
-Vue.component('child', {
-  // declare the props
-  props: ['message'],
-  // like data, the prop can be used inside templates and
-  // is also made available in the vm as this.message
-  template: '<span>{{ message }}</span>'
-})
+```html
+<div class="blog-post">
+  <h3>{{ post.title }}</h3>
+  <div v-html="post.content"></div>
+</div>
 ```
 
-Then we can pass a plain string to it like so:
+## Sending Messages to Parents with Events
 
-``` html
-<child message="hello!"></child>
-```
+As we develop our `<blog-post>` component, some features may require communicating back up to the parent. For example, we may decide to include an accessibility feature to enlarge the text of blog posts, while leaving the rest of the page its default size:
 
-Result:
+In the parent, we can support this feature by adding a `postFontSize` data property:
 
-{% raw %}
-<div id="prop-example-1" class="demo">
-  <child message="hello!"></child>
-</div>
-<script>
+```js
 new Vue({
-  el: '#prop-example-1',
-  components: {
-    child: {
-      props: ['message'],
-      template: '<span>{{ message }}</span>'
-    }
+  el: '#blog-posts-events-demo',
+  data: {
+    posts: [/* ... */],
+    postFontSize: 1
   }
 })
-</script>
-{% endraw %}
-
-### camelCase vs. kebab-case
+```
 
-HTML attributes are case-insensitive, so when using non-string templates, camelCased prop names need to use their kebab-case (hyphen-delimited) equivalents:
+Which can be used in the template to control the font size of all blog posts:
 
-``` js
-Vue.component('child', {
-  // camelCase in JavaScript
-  props: ['myMessage'],
-  template: '<span>{{ myMessage }}</span>'
-})
+```html
+<div id="blog-posts-events-demo">
+  <div :style="{ fontSize: postFontSize + 'em' }">
+    <blog-post
+      v-for="post in posts"
+      v-bind:key="post.id"
+      v-bind:post="post"
+    ></blog-post>
+  </div>
+</div>
 ```
 
-``` html
-<!-- kebab-case in HTML -->
-<child my-message="hello!"></child>
-```
+Now let's add a button to enlarge the text right before the content of every post:
 
-Again, if you're using string templates, then this limitation does not apply.
+```js
+Vue.component('blog-post', {
+  props: ['post'],
+  template: `
+    <div class="blog-post">
+      <h3>{{ post.title }}</h3>
+      <button>
+        Enlarge text
+      </button>
+      <div v-html="post.content"></div>
+    </div>
+  `
+})
+```
 
-### Dynamic Props
+<p class="tip">The above example and some future ones use JavaScript's [template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) to make multi-line templates more readable. These are not supported by Internet Explorer (IE), so if you must support IE and are not transpiling (e.g. with Babel or TypeScript), use [newline escapes](https://css-tricks.com/snippets/javascript/multiline-string-variables-in-javascript/) instead.</p>
 
-Similar to binding a normal attribute to an expression, we can also use `v-bind` for dynamically binding props to data on the parent. Whenever the data is updated in the parent, it will also flow down to the child:
+The problem is, this button doesn't do anything:
 
-``` html
-<div id="prop-example-2">
-  <input v-model="parentMsg">
-  <br>
-  <child v-bind:my-message="parentMsg"></child>
-</div>
+```html
+<button>
+  Enlarge text
+</button>
 ```
 
-``` js
-new Vue({
-  el: '#prop-example-2',
-  data: {
-    parentMsg: 'Message from parent'
-  }
-})
+When we click on the button, we need to communicate to the parent that it should enlarge the text of all posts. Fortunately, Vue instances provide a custom events system to solve this problem. To emit an event to the parent, we can call the built-in [**`$emit`** method](../api/#Instance-Methods-Events), passing the name of the event:
+
+```html
+<button v-on:click="$emit('enlarge-text')">
+  Enlarge text
+</button>
 ```
 
-You can also use the shorthand syntax for `v-bind`:
+Then on our blog post, we can listen for this event with `v-on`, just as we would with a native DOM event:
 
-``` html
-<child :my-message="parentMsg"></child>
+```html
+<blog-post
+  ...
+  v-on:enlarge-text="postFontSize += 0.1"
+></blog-post>
 ```
 
-Result:
-
 {% raw %}
-<div id="demo-2" class="demo">
-  <input v-model="parentMsg">
-  <br>
-  <child v-bind:my-message="parentMsg"></child>
+<div id="blog-posts-events-demo" class="demo">
+  <div :style="{ fontSize: postFontSize + 'em' }">
+    <blog-post
+      v-for="post in posts"
+      v-bind:key="post.id"
+      v-bind:post="post"
+      v-on:enlarge-text="postFontSize += 0.1"
+    ></blog-post>
+  </div>
 </div>
 <script>
+Vue.component('blog-post', {
+  props: ['post'],
+  template: '\
+    <div class="blog-post">\
+      <h3>{{ post.title }}</h3>\
+      <button v-on:click="$emit(\'enlarge-text\')">\
+        Enlarge text\
+      </button>\
+      <div v-html="post.content"></div>\
+    </div>\
+  '
+})
 new Vue({
-  el: '#demo-2',
+  el: '#blog-posts-events-demo',
   data: {
-    parentMsg: 'Message from parent'
-  },
-  components: {
-    child: {
-      props: ['myMessage'],
-      template: '<span>{{ myMessage }}</span>'
-    }
+    posts: [
+      { id: 1, title: 'My journey with Vue', content: '...content...' },
+      { id: 2, title: 'Blogging with Vue', content: '...content...' },
+      { id: 3, title: 'Why Vue is so fun', content: '...content...' }
+    ],
+    postFontSize: 1
   }
 })
 </script>
 {% endraw %}
 
-If you want to pass all the properties in an object as props, you can use `v-bind` without an argument (`v-bind` instead of `v-bind:prop-name`). For example, given a `todo` object:
-
-``` js
-todo: {
-  text: 'Learn Vue',
-  isComplete: false
-}
-```
+### Emitting a Value With an Event
 
-Then:
+It's sometimes useful to emit a specific value with an event. For example, we may want the `<blog-post>` component to be in charge of how much to enlarge the text by. In those cases, we can use `$emit`'s 2nd parameter to provide this value:
 
-``` html
-<todo-item v-bind="todo"></todo-item>
+```html
+<button v-on:click="$emit('enlarge-text', 0.1)">
+  Enlarge text
+</button>
 ```
 
-Will be equivalent to:
+Then when we listen to the event in the parent, we can access the emitted event's value with `$event`:
 
-``` html
-<todo-item
-  v-bind:text="todo.text"
-  v-bind:is-complete="todo.isComplete"
-></todo-item>
+```html
+<blog-post
+  ...
+  v-on:enlarge-text="postFontSize += $event"
+></blog-post>
 ```
 
-### Literal vs. Dynamic
-
-A common mistake beginners tend to make is attempting to pass down a number using the literal syntax:
+Or, if the event handler is a method:
 
-``` html
-<!-- this passes down a plain string "1" -->
-<comp some-prop="1"></comp>
+```html
+<blog-post
+  ...
+  v-on:enlarge-text="onEnlargeText"
+></blog-post>
 ```
 
-However, since this is a literal prop, its value is passed down as a plain string `"1"` instead of an actual number. If we want to pass down an actual JavaScript number, we need to use `v-bind` so that its value is evaluated as a JavaScript expression:
+Then the value will be passed as the first parameter of that method:
 
-``` html
-<!-- this passes down an actual number -->
-<comp v-bind:some-prop="1"></comp>
+```js
+methods: {
+  onEnlargeText: function (enlargeAmount) {
+    this.postFontSize += enlargeAmount
+  }
+}
 ```
 
-### One-Way Data Flow
-
-All props form a **one-way-down** binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. This prevents child components from accidentally mutating the parent's state, which can make your app's data flow harder to understand.
+### Using `v-model` on Components
 
-In addition, every time the parent component is updated, all props in the child component will be refreshed with the latest value. This means you should **not** attempt to mutate a prop inside a child component. If you do, Vue will warn you in the console.
+Custom events can also be used to create custom inputs that work with `v-model`. Remember that:
 
-There are usually two cases where it's tempting to mutate a prop:
-
-1. The prop is used to pass in an initial value; the child component wants to use it as a local data property afterwards.
-
-2. The prop is passed in as a raw value that needs to be transformed.
-
-The proper answer to these use cases are:
-
-1. Define a local data property that uses the prop's initial value as its initial value:
+```html
+<input v-model="searchText">
+```
 
-  ``` js
-  props: ['initialCounter'],
-  data: function () {
-    return { counter: this.initialCounter }
-  }
-  ```
+does the same thing as:
 
-2. Define a computed property that is computed from the prop's value:
+```html
+<input
+  v-bind:value="searchText"
+  v-on:input="searchText = $event.target.value"
+>
+```
 
-  ``` js
-  props: ['size'],
-  computed: {
-    normalizedSize: function () {
-      return this.size.trim().toLowerCase()
-    }
-  }
-  ```
+When used on a component, `v-model` instead does this:
 
-<p class="tip">Note that objects and arrays in JavaScript are passed by reference, so if the prop is an array or object, mutating the object or array itself inside the child **will** affect parent state.</p>
+``` html
+<custom-input
+  v-bind:value="searchText"
+  v-on:input="searchText = $event"
+></custom-input>
+```
 
-### Prop Validation
+For this to actually work though, the `<input>` inside the component must:
 
-It is possible for a component to specify requirements for the props it is receiving. If a requirement is not met, Vue will emit warnings. This is especially useful when you are authoring a component that is intended to be used by others.
+- Bind the `value` attribute to a `value` prop
+- On `input`, emit its own custom `input` event with the new value
 
-Instead of defining the props as an array of strings, you can use an object with validation requirements:
+Here's that in action:
 
-``` js
-Vue.component('example', {
-  props: {
-    // basic type check (`null` means accept any type)
-    propA: Number,
-    // multiple possible types
-    propB: [String, Number],
-    // a required string
-    propC: {
-      type: String,
-      required: true
-    },
-    // a number with default value
-    propD: {
-      type: Number,
-      default: 100
-    },
-    // object/array defaults should be returned from a
-    // factory function
-    propE: {
-      type: Object,
-      default: function () {
-        return { message: 'hello' }
-      }
-    },
-    // custom validator function
-    propF: {
-      validator: function (value) {
-        return value > 10
-      }
-    }
-  }
+```js
+Vue.component('custom-input', {
+  props: ['value'],
+  template: `
+    <input
+      v-bind:value="value"
+      v-on:input="$emit('input', $event.target.value)
+    >
+  `
 })
 ```
 
-The `type` can be one of the following native constructors:
-
-- String
-- Number
-- Boolean
-- Function
-- Object
-- Array
-- Symbol
-
-In addition, `type` can also be a custom constructor function and the assertion will be made with an `instanceof` check.
+Now `v-model` should work perfectly with this component:
 
-When prop validation fails, Vue will produce a console warning (if using the development build). Note that props are validated __before__ a component instance is created, so within `default` or `validator` functions, instance properties such as from `data`, `computed`, or `methods` will not be available.
-
-## Non-Prop Attributes
+```html
+<custom-input v-model="searchText"></custom-input>
+```
 
-A non-prop attribute is an attribute that is passed to a component, but does not have a corresponding prop defined.
+That's all you need to know about custom component events for now, but once you've finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on [Custom Events](components-custom-events.html).
 
-While explicitly defined props are preferred for passing information to a child component, authors of component libraries can't always foresee the contexts in which their components might be used. That's why components can accept arbitrary attributes, which are added to the component's root element.
+## Content Distribution with Slots
 
-For example, imagine we're using a 3rd-party `bs-date-input` component with a Bootstrap plugin that requires a `data-3d-date-picker` attribute on the `input`. We can add this attribute to our component instance:
+Just like with HTML elements, it's often useful to be able to pass content to a component, like this:
 
 ``` html
-<bs-date-input data-3d-date-picker="true"></bs-date-input>
+<alert-box>
+  Something bad happened.
+</alert-box>
 ```
 
-And the `data-3d-date-picker="true"` attribute will automatically be added to the root element of `bs-date-input`.
+Which might render something like:
 
-### Replacing/Merging with Existing Attributes
+{% raw %}
+<div id="slots-demo" class="demo">
+  <alert-box>
+    Something bad happened.
+  </alert-box>
+</div>
+<script>
+Vue.component('alert-box', {
+  template: '\
+    <div class="demo-alert-box">\
+      <strong>Error!</strong>\
+      <slot></slot>\
+    </div>\
+  '
+})
+new Vue({ el: '#slots-demo' })
+</script>
+<style>
+.demo-alert-box {
+  padding: 10px 20px;
+  background: #f3beb8;
+  border: 1px solid #f09898;
+}
+</style>
+{% endraw %}
 
-Imagine this is the template for `bs-date-input`:
+Fortunately, this task is made very simple by Vue's custom `<slot>` element:
 
-``` html
-<input type="date" class="form-control">
+```js
+Vue.component('alert-box', {
+  template: `
+    <div class="demo-alert-box">
+      <strong>Error!</strong>
+      <slot></slot>
+    </div>
+  `
+})
 ```
 
-To specify a theme for our date picker plugin, we might need to add a specific class, like this:
+As you'll see above, we just add the slot where we want it to go -- and that's it. We're done!
 
-``` html
-<bs-date-input
-  data-3d-date-picker="true"
-  class="date-picker-theme-dark"
-></bs-date-input>
-```
+That's all you need to know about slots for now, but once you've finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on [Slots](components-slots.html).
 
-In this case, two different values for `class` are defined:
+## Dynamic Components
 
-- `form-control`, which is set by the component in its template
-- `date-picker-theme-dark`, which is passed to the component by its parent
+Sometimes, it's useful to dynamically switch between components, like in a tabbed interface:
 
-For most attributes, the value provided to the component will replace the value set by the component. So for example, passing `type="large"` will replace `type="date"` and probably break it! Fortunately, the `class` and `style` attributes are a little smarter, so both values are merged, making the final value: `form-control date-picker-theme-dark`.
+{% raw %}
+<div id="dynamic-component-demo" class="demo">
+  <button
+    v-for="tab in tabs"
+    v-bind:key="tab"
+    class="dynamic-component-demo-tab-button"
+    v-bind:class="{ 'dynamic-component-demo-tab-button-active': tab === currentTab }"
+    v-on:click="currentTab = tab"
+  >
+    {{ tab }}
+  </button>
+  <component
+    v-bind:is="currentTabComponent"
+    class="dynamic-component-demo-tab"
+  ></component>
+</div>
+<script>
+Vue.component('tab-home', { template: '<div>Home component</div>' })
+Vue.component('tab-posts', { template: '<div>Posts component</div>' })
+Vue.component('tab-archive', { template: '<div>Archive component</div>' })
+new Vue({
+  el: '#dynamic-component-demo',
+  data: {
+    currentTab: 'Home',
+    tabs: ['Home', 'Posts', 'Archive']
+  },
+  computed: {
+    currentTabComponent: function () {
+      return 'tab-' + this.currentTab.toLowerCase()
+    }
+  }
+})
+</script>
+<style>
+.dynamic-component-demo-tab-button {
+  padding: 6px 10px;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  border: 1px solid #ccc;
+  cursor: pointer;
+  background: #f0f0f0;
+  margin-bottom: -1px;
+  margin-right: -1px;
+}
+.dynamic-component-demo-tab-button:hover {
+  background: #e0e0e0;
+}
+.dynamic-component-demo-tab-button-active {
+  background: #e0e0e0;
+}
+.dynamic-component-demo-tab {
+  border: 1px solid #ccc;
+  padding: 10px;
+}
+</style>
+{% endraw %}
 
-## Custom Events
+The above is made possible by Vue's `<component>` element with the `is` special attribute:
 
-We have learned that the parent can pass data down to the child using props, but how do we communicate back to the parent when something happens? This is where Vue's custom event system comes in.
+```html
+<!-- Component changes when currentTabComponent changes -->
+<component v-bind:is="currentTabComponent"></component>
+```
 
-### Using `v-on` with Custom Events
+In the example above, `currentTabComponent` can contain either:
 
-Every Vue instance implements an [events interface](../api/#Instance-Methods-Events), which means it can:
+- the name of a registered component, or
+- a component's options object
 
-- Listen to an event using `$on(eventName)`
-- Trigger an event using `$emit(eventName, optionalPayload)`
+See [this fiddle](https://jsfiddle.net/chrisvfritz/o3nycadu/) to experiment with the full code, or [this version](https://jsfiddle.net/chrisvfritz/b2qj69o1/) for an example binding to a component's options object, instead of its registered name.
 
-<p class="tip">Note that Vue's event system is different from the browser's [EventTarget API](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget). Though they work similarly, `$on` and `$emit` are __not__ aliases for `addEventListener` and `dispatchEvent`.</p>
+That's all you need to know about dynamic components for now, but once you've finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on [Dynamic & Async Components](components-dynamic-async.html).
 
-In addition, a parent component can listen to the events emitted from a child component using `v-on` directly in the template where the child component is used.
+## DOM Template Parsing Caveats
 
-<p class="tip">You cannot use `$on` to listen to events emitted by children. You must use `v-on` directly in the template, as in the example below.</p>
+Some HTML elements, such as `<ul>`, `<ol>`, `<table>` and `<select>` have restrictions on what elements can appear inside them, and some elements such as `<li>`, `<tr>`, and `<option>` can only appear inside certain other elements.
 
-Here's an example:
+This will lead to issues when using components with elements that have such restrictions. For example:
 
 ``` html
-<div id="counter-event-example">
-  <p>{{ total }}</p>
-  <button-counter v-on:increment="incrementTotal"></button-counter>
-  <button-counter v-on:increment="incrementTotal"></button-counter>
-</div>
+<table>
+  <blog-post-row></blog-post-row>
+</table>
 ```
 
-``` js
-Vue.component('button-counter', {
-  template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
-  data: function () {
-    return {
-      counter: 0
-    }
-  },
-  methods: {
-    incrementCounter: function () {
-      this.counter += 1
-      this.$emit('increment')
-    }
-  },
-})
+The custom component `<blog-post-row>` will be hoisted out as invalid content, causing errors in the eventual rendered output. Fortunately, the `is` special attribute offers a workaround:
 
-new Vue({
-  el: '#counter-event-example',
-  data: {
-    total: 0
-  },
-  methods: {
-    incrementTotal: function () {
-      this.total += 1
-    }
-  }
-})
+``` html
+<table>
+  <tr is="blog-post-row"></tr>
+</table>
 ```
 
-{% raw %}
-<div id="counter-event-example" class="demo">
-  <p>{{ total }}</p>
-  <button-counter v-on:increment="incrementTotal"></button-counter>
-  <button-counter v-on:increment="incrementTotal"></button-counter>
-</div>
-<script>
-Vue.component('button-counter', {
-  template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
-  data: function () {
-    return {
-      counter: 0
-    }
-  },
-  methods: {
-    incrementCounter: function () {
-      this.counter += 1
-      this.$emit('increment')
-    }
-  }
-})
-new Vue({
-  el: '#counter-event-example',
-  data: {
-    total: 0
-  },
-  methods: {
-    incrementTotal: function () {
-      this.total += 1
-    }
-  }
-})
-</script>
-{% endraw %}
-
-In this example, it's important to note that the child component is still completely decoupled from what happens outside of it. All it does is report information about its own activity, just in case a parent component might care.
-
-
-Here's an example on how to use payload data:
-
-``` html
-<div id="message-event-example" class="demo">
-  <p v-for="msg in messages">{{ msg }}</p>
-  <button-message v-on:message="handleMessage"></button-message>
-</div>
-```
-
-``` js
-Vue.component('button-message', {
-  template: `<div>
-    <input type="text" v-model="message" />
-    <button v-on:click="handleSendMessage">Send</button>
-  </div>`,
-  data: function () {
-    return {
-      message: 'test message'
-    }
-  },
-  methods: {
-    handleSendMessage: function () {
-      this.$emit('message', { message: this.message })
-    }
-  }
-})
-
-new Vue({
-  el: '#message-event-example',
-  data: {
-    messages: []
-  },
-  methods: {
-    handleMessage: function (payload) {
-      this.messages.push(payload.message)
-    }
-  }
-})
-```
-
-{% raw %}
-<div id="message-event-example" class="demo">
-  <p v-for="msg in messages">{{ msg }}</p>
-  <button-message v-on:message="handleMessage"></button-message>
-</div>
-<script>
-Vue.component('button-message', {
-  template: `<div>
-    <input type="text" v-model="message" />
-    <button v-on:click="handleSendMessage">Send</button>
-  </div>`,
-  data: function () {
-    return {
-      message: 'test message'
-    }
-  },
-  methods: {
-    handleSendMessage: function () {
-      this.$emit('message', { message: this.message })
-    }
-  }
-})
-new Vue({
-  el: '#message-event-example',
-  data: {
-    messages: []
-  },
-  methods: {
-    handleMessage: function (payload) {
-      this.messages.push(payload.message)
-    }
-  }
-})
-</script>
-{% endraw %}
-
-In this second example, it's important to note that the child component is still completely decoupled from what happens outside of it. All it does is report information about its own activity including a payload data into event emitter, just in case a parent component might care.
-
-### Binding Native Events to Components
-
-There may be times when you want to listen for a native event on the root element of a component. In these cases, you can use the `.native` modifier for `v-on`. For example:
-
-``` html
-<my-component v-on:click.native="doTheThing"></my-component>
-```
-
-### `.sync` Modifier
-
-> 2.3.0+
-
-In some cases we may need "two-way binding" for a prop - in fact, in Vue 1.x this is exactly what the `.sync` modifier provided. When a child component mutates a prop that has `.sync`, the value change will be reflected in the parent. This is convenient, however it leads to maintenance issues in the long run because it breaks the one-way data flow assumption: the code that mutates child props are implicitly affecting parent state.
-
-This is why we removed the `.sync` modifier when 2.0 was released. However, we've found that there are indeed cases where it could be useful, especially when shipping reusable components. What we need to change is **making the code in the child that affects parent state more consistent and explicit.**
-
-In 2.3.0+ we re-introduced the `.sync` modifier for props, but this time it is only syntax sugar that automatically expands into an additional `v-on` listener:
-
-The following
-
-``` html
-<comp :foo.sync="bar"></comp>
-```
-
-is expanded into:
-
-``` html
-<comp :foo="bar" @update:foo="val => bar = val"></comp>
-```
-
-For the child component to update `foo`'s value, it needs to explicitly emit an event instead of mutating the prop:
-
-``` js
-this.$emit('update:foo', newValue)
-```
-
-The `.sync` modifier can also be used with `v-bind` when using an object to set multiple properties at once:
-
-```html
-<comp v-bind.sync="{ foo: 1, bar: 2 }"></comp>
-```
-
-This has the effect of adding `v-on` update listeners for both `foo` and `bar`.
-
-### Form Input Components using Custom Events
-
-Custom events can also be used to create custom inputs that work with `v-model`. Remember:
-
-``` html
-<input v-model="something">
-```
+It should be noted that **this limitation does _not_ apply if you are using string templates from one of the following sources**:
 
-is syntactic sugar for:
+- String templates (e.g. `template: '...'`)
+- [Single-file (`.vue`) components](single-file-components.html)
+- [`<script type="text/x-template">`](components-edge-cases.html#X-Templates)
 
-``` html
-<input
-  v-bind:value="something"
-  v-on:input="something = $event.target.value">
-```
+That's all you need to know about dynamic components for now -- and actually, the end of Vue's _Essentials_. Congratulations! There's still more to learn, but first, we recommend taking a break to play with Vue yourself and build something fun.
 
-When used with a component, it instead simplifies to:
-
-``` html
-<custom-input
-  :value="something"
-  @input="value => { something = value }">
-</custom-input>
-```
-
-So for a component to work with `v-model`, it should (these can be configured in 2.2.0+):
-
-- accept a `value` prop
-- emit an `input` event with the new value
-
-Let's see it in action with a simple currency input:
-
-``` html
-<currency-input v-model="price"></currency-input>
-```
-
-``` js
-Vue.component('currency-input', {
-  template: '\
-    <span>\
-      $\
-      <input\
-        ref="input"\
-        v-bind:value="value"\
-        v-on:input="updateValue($event.target.value)">\
-    </span>\
-  ',
-  props: ['value'],
-  methods: {
-    // Instead of updating the value directly, this
-    // method is used to format and place constraints
-    // on the input's value
-    updateValue: function (value) {
-      var formattedValue = value
-        // Remove whitespace on either side
-        .trim()
-        // Shorten to 2 decimal places
-        .slice(
-          0,
-          value.indexOf('.') === -1
-            ? value.length
-            : value.indexOf('.') + 3
-        )
-      // If the value was not already normalized,
-      // manually override it to conform
-      if (formattedValue !== value) {
-        this.$refs.input.value = formattedValue
-      }
-      // Emit the number value through the input event
-      this.$emit('input', Number(formattedValue))
-    }
-  }
-})
-```
-
-{% raw %}
-<div id="currency-input-example" class="demo">
-  <currency-input v-model="price"></currency-input>
-</div>
-<script>
-Vue.component('currency-input', {
-  template: '\
-    <span>\
-      $\
-      <input\
-        ref="input"\
-        v-bind:value="value"\
-        v-on:input="updateValue($event.target.value)"\
-      >\
-    </span>\
-  ',
-  props: ['value'],
-  methods: {
-    updateValue: function (value) {
-      var formattedValue = value
-        .trim()
-        .slice(
-          0,
-          value.indexOf('.') === -1
-            ? value.length
-            : value.indexOf('.') + 3
-        )
-      if (formattedValue !== value) {
-        this.$refs.input.value = formattedValue
-      }
-      this.$emit('input', Number(formattedValue))
-    }
-  }
-})
-new Vue({
-  el: '#currency-input-example',
-  data: { price: '' }
-})
-</script>
-{% endraw %}
-
-The implementation above is pretty naive though. For example, users are allowed to enter multiple periods and even letters sometimes - yuck! So for those that want to see a non-trivial example, here's a more robust currency filter:
-
-<iframe width="100%" height="300" src="https://jsfiddle.net/chrisvfritz/1oqjojjx/embedded/result,html,js" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
-
-### Customizing Component `v-model`
-
-> New in 2.2.0+
-
-By default, `v-model` on a component uses `value` as the prop and `input` as the event, but some input types such as checkboxes and radio buttons may want to use the `value` prop for a different purpose. Using the `model` option can avoid the conflict in such cases:
-
-``` js
-Vue.component('my-checkbox', {
-  model: {
-    prop: 'checked',
-    event: 'change'
-  },
-  props: {
-    checked: Boolean,
-    // this allows using the `value` prop for a different purpose
-    value: String
-  },
-  // ...
-})
-```
-
-``` html
-<my-checkbox v-model="foo" value="some value"></my-checkbox>
-```
-
-The above will be equivalent to:
-
-``` html
-<my-checkbox
-  :checked="foo"
-  @change="val => { foo = val }"
-  value="some value">
-</my-checkbox>
-```
-
-<p class="tip">Note that you still have to declare the `checked` prop explicitly.</p>
-
-### Non Parent-Child Communication
-
-Sometimes two components may need to communicate with one-another but they are not parent/child to each other. In simple scenarios, you can use an empty Vue instance as a central event bus:
-
-``` js
-var bus = new Vue()
-```
-``` js
-// in component A's method
-bus.$emit('id-selected', 1)
-```
-``` js
-// in component B's created hook
-bus.$on('id-selected', function (id) {
-  // ...
-})
-```
-
-In more complex cases, you should consider employing a dedicated [state-management pattern](state-management.html).
-
-## Content Distribution with Slots
-
-When using components, it is often desired to compose them like this:
-
-``` html
-<app>
-  <app-header></app-header>
-  <app-footer></app-footer>
-</app>
-```
-
-There are two things to note here:
-
-1. The `<app>` component does not know what content it will receive. It is decided by the component using `<app>`.
-
-2. The `<app>` component very likely has its own template.
-
-To make the composition work, we need a way to interweave the parent "content" and the component's own template. This is a process called **content distribution** (or "transclusion" if you are familiar with Angular). Vue.js implements a content distribution API that is modeled after the current [Web Components spec draft](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md), using the special `<slot>` element to serve as distribution outlets for the original content.
-
-### Compilation Scope
-
-Before we dig into the API, let's first clarify which scope the contents are compiled in. Imagine a template like this:
-
-``` html
-<child-component>
-  {{ message }}
-</child-component>
-```
-
-Should the `message` be bound to the parent's data or the child data? The answer is the parent. A simple rule of thumb for component scope is:
-
-> Everything in the parent template is compiled in parent scope; everything in the child template is compiled in child scope.
-
-A common mistake is trying to bind a directive to a child property/method in the parent template:
-
-``` html
-<!-- does NOT work -->
-<child-component v-show="someChildProperty"></child-component>
-```
-
-Assuming `someChildProperty` is a property on the child component, the example above would not work. The parent's template is not aware of the state of a child component.
-
-If you need to bind child-scope directives on a component root node, you should do so in the child component's own template:
-
-``` js
-Vue.component('child-component', {
-  // this does work, because we are in the right scope
-  template: '<div v-show="someChildProperty">Child</div>',
-  data: function () {
-    return {
-      someChildProperty: true
-    }
-  }
-})
-```
-
-Similarly, distributed content will be compiled in the parent scope.
-
-### Single Slot
-
-Parent content will be **discarded** unless the child component template contains at least one `<slot>` outlet. When there is only one slot with no attributes, the entire content fragment will be inserted at its position in the DOM, replacing the slot itself.
-
-Anything originally inside the `<slot>` tags is considered **fallback content**. Fallback content is compiled in the child scope and will only be displayed if the hosting element is empty and has no content to be inserted.
-
-Suppose we have a component called `my-component` with the following template:
-
-``` html
-<div>
-  <h2>I'm the child title</h2>
-  <slot>
-    This will only be displayed if there is no content
-    to be distributed.
-  </slot>
-</div>
-```
-
-And a parent that uses the component:
-
-``` html
-<div>
-  <h1>I'm the parent title</h1>
-  <my-component>
-    <p>This is some original content</p>
-    <p>This is some more original content</p>
-  </my-component>
-</div>
-```
-
-The rendered result will be:
-
-``` html
-<div>
-  <h1>I'm the parent title</h1>
-  <div>
-    <h2>I'm the child title</h2>
-    <p>This is some original content</p>
-    <p>This is some more original content</p>
-  </div>
-</div>
-```
-
-### Named Slots
-
-`<slot>` elements have a special attribute, `name`, which can be used to further customize how content should be distributed. You can have multiple slots with different names. A named slot will match any element that has a corresponding `slot` attribute in the content fragment.
-
-There can still be one unnamed slot, which is the **default slot** that serves as a catch-all outlet for any unmatched content. If there is no default slot, unmatched content will be discarded.
-
-For example, suppose we have an `app-layout` component with the following template:
-
-``` html
-<div class="container">
-  <header>
-    <slot name="header"></slot>
-  </header>
-  <main>
-    <slot></slot>
-  </main>
-  <footer>
-    <slot name="footer"></slot>
-  </footer>
-</div>
-```
-
-Parent markup:
-
-``` html
-<app-layout>
-  <h1 slot="header">Here might be a page title</h1>
-
-  <p>A paragraph for the main content.</p>
-  <p>And another one.</p>
-
-  <p slot="footer">Here's some contact info</p>
-</app-layout>
-```
-
-The rendered result will be:
-
-``` html
-<div class="container">
-  <header>
-    <h1>Here might be a page title</h1>
-  </header>
-  <main>
-    <p>A paragraph for the main content.</p>
-    <p>And another one.</p>
-  </main>
-  <footer>
-    <p>Here's some contact info</p>
-  </footer>
-</div>
-```
-
-The content distribution API is a very useful mechanism when designing components that are meant to be composed together.
-
-### Scoped Slots
-
-> New in 2.1.0+
-
-A scoped slot is a special type of slot that functions as a reusable template (that can be passed data to) instead of already-rendered-elements.
-
-In a child component, pass data into a slot as if you are passing props to a component:
-
-``` html
-<div class="child">
-  <slot text="hello from child"></slot>
-</div>
-```
-
-In the parent, a `<template>` element with a special attribute `slot-scope` must exist, indicating that it is a template for a scoped slot. The value of `slot-scope` will be used as the name of a temporary variable that holds the props object passed from the child:
-
-``` html
-<div class="parent">
-  <child>
-    <template slot-scope="props">
-      <span>hello from parent</span>
-      <span>{{ props.text }}</span>
-    </template>
-  </child>
-</div>
-```
-
-If we render the above, the output will be:
-
-``` html
-<div class="parent">
-  <div class="child">
-    <span>hello from parent</span>
-    <span>hello from child</span>
-  </div>
-</div>
-```
-
-> In 2.5.0+, `slot-scope` is no longer limited to `<template>` and can be used on any element or component.
-
-A more typical use case for scoped slots would be a list component that allows the component consumer to customize how each item in the list should be rendered:
-
-``` html
-<my-awesome-list :items="items">
-  <!-- scoped slot can be named too -->
-  <li
-    slot="item"
-    slot-scope="props"
-    class="my-fancy-item">
-    {{ props.text }}
-  </li>
-</my-awesome-list>
-```
-
-And the template for the list component:
-
-``` html
-<ul>
-  <slot name="item"
-    v-for="item in items"
-    :text="item.text">
-    <!-- fallback content here -->
-  </slot>
-</ul>
-```
-
-#### Destructuring
-
-`slot-scope`'s value is in fact a valid JavaScript expression that can appear in the argument position of a function signature. This means in supported environments (in single-file components or in modern browsers) you can also use ES2015 destructuring in the expression:
-
-``` html
-<child>
-  <span slot-scope="{ text }">{{ text }}</span>
-</child>
-```
-
-## Dynamic Components
-
-You can use the same mount point and dynamically switch between multiple components using the reserved `<component>` element and dynamically bind to its `is` attribute:
-
-``` js
-var vm = new Vue({
-  el: '#example',
-  data: {
-    currentView: 'home'
-  },
-  components: {
-    home: { /* ... */ },
-    posts: { /* ... */ },
-    archive: { /* ... */ }
-  }
-})
-```
-
-``` html
-<component v-bind:is="currentView">
-  <!-- component changes when vm.currentView changes! -->
-</component>
-```
-
-If you prefer, you can also bind directly to component objects:
-
-``` js
-var Home = {
-  template: '<p>Welcome home!</p>'
-}
-
-var vm = new Vue({
-  el: '#example',
-  data: {
-    currentView: Home
-  }
-})
-```
-
-### `keep-alive`
-
-If you want to keep the switched-out components in memory so that you can preserve their state or avoid re-rendering, you can wrap a dynamic component in a `<keep-alive>` element:
-
-``` html
-<keep-alive>
-  <component :is="currentView">
-    <!-- inactive components will be cached! -->
-  </component>
-</keep-alive>
-```
-
-Check out more details on `<keep-alive>` in the [API reference](../api/#keep-alive).
-
-## Misc
-
-### Authoring Reusable Components
-
-When authoring components, it's good to keep in mind whether you intend to reuse it somewhere else later. It's OK for one-off components to be tightly coupled, but reusable components should define a clean public interface and make no assumptions about the context it's used in.
-
-The API for a Vue component comes in three parts - props, events, and slots:
-
-- **Props** allow the external environment to pass data into the component
-
-- **Events** allow the component to trigger side effects in the external environment
-
-- **Slots** allow the external environment to compose the component with extra content.
-
-With the dedicated shorthand syntaxes for `v-bind` and `v-on`, the intents can be clearly and succinctly conveyed in the template:
-
-``` html
-<my-component
-  :foo="baz"
-  :bar="qux"
-  @event-a="doThis"
-  @event-b="doThat"
->
-  <img slot="icon" src="...">
-  <p slot="main-text">Hello!</p>
-</my-component>
-```
-
-### Child Component Refs
-
-Despite the existence of props and events, sometimes you might still need to directly access a child component in JavaScript. To achieve this you have to assign a reference ID to the child component using `ref`. For example:
-
-``` html
-<div id="parent">
-  <user-profile ref="profile"></user-profile>
-</div>
-```
-
-``` js
-var parent = new Vue({ el: '#parent' })
-// access child component instance
-var child = parent.$refs.profile
-```
-
-When `ref` is used together with `v-for`, the ref you get will be an array containing the child components mirroring the data source.
-
-<p class="tip">`$refs` are only populated after the component has been rendered, and it is not reactive. It is only meant as an escape hatch for direct child manipulation - you should avoid using `$refs` in templates or computed properties.</p>
-
-### Async Components
-
-In large applications, we may need to divide the app into smaller chunks and only load a component from the server when it's actually needed. To make that easier, Vue allows you to define your component as a factory function that asynchronously resolves your component definition. Vue will only trigger the factory function when the component actually needs to be rendered and will cache the result for future re-renders. For example:
-
-``` js
-Vue.component('async-example', function (resolve, reject) {
-  setTimeout(function () {
-    // Pass the component definition to the resolve callback
-    resolve({
-      template: '<div>I am async!</div>'
-    })
-  }, 1000)
-})
-```
-
-The factory function receives a `resolve` callback, which should be called when you have retrieved your component definition from the server. You can also call `reject(reason)` to indicate the load has failed. The `setTimeout` here is for demonstration; how to retrieve the component is up to you. One recommended approach is to use async components together with [Webpack's code-splitting feature](https://webpack.js.org/guides/code-splitting/):
-
-``` js
-Vue.component('async-webpack-example', function (resolve) {
-  // This special require syntax will instruct Webpack to
-  // automatically split your built code into bundles which
-  // are loaded over Ajax requests.
-  require(['./my-async-component'], resolve)
-})
-```
-
-You can also return a `Promise` in the factory function, so with Webpack 2 + ES2015 syntax you can do:
-
-``` js
-Vue.component(
-  'async-webpack-example',
-  // The `import` function returns a `Promise`.
-  () => import('./my-async-component')
-)
-```
-
-When using [local registration](components.html#Local-Registration), you can also directly provide a function that returns a `Promise`:
-
-``` js
-new Vue({
-  // ...
-  components: {
-    'my-component': () => import('./my-async-component')
-  }
-})
-```
-
-<p class="tip">If you're a <strong>Browserify</strong> user that would like to use async components, its creator has unfortunately [made it clear](https://github.com/substack/node-browserify/issues/58#issuecomment-21978224) that async loading "is not something that Browserify will ever support." Officially, at least. The Browserify community has found [some workarounds](https://github.com/vuejs/vuejs.org/issues/620), which may be helpful for existing and complex applications. For all other scenarios, we recommend using Webpack for built-in, first-class async support.</p>
-
-### Advanced Async Components
-
-> New in 2.3.0+
-
-Starting in 2.3.0+ the async component factory can also return an object of the following format:
-
-``` js
-const AsyncComp = () => ({
-  // The component to load. Should be a Promise
-  component: import('./MyComp.vue'),
-  // A component to use while the async component is loading
-  loading: LoadingComp,
-  // A component to use if the load fails
-  error: ErrorComp,
-  // Delay before showing the loading component. Default: 200ms.
-  delay: 200,
-  // The error component will be displayed if a timeout is
-  // provided and exceeded. Default: Infinity.
-  timeout: 3000
-})
-```
-
-Note that when used as a route component in `vue-router`, these properties will be ignored because async components are resolved upfront before the route navigation happens. You also need to use `vue-router` 2.4.0+ if you wish to use the above syntax for route components.
-
-### Component Naming Conventions
-
-When registering components (or props), you can use kebab-case, camelCase, or PascalCase.
-
-``` js
-// in a component definition
-components: {
-  // register using kebab-case
-  'kebab-cased-component': { /* ... */ },
-  // register using camelCase
-  'camelCasedComponent': { /* ... */ },
-  // register using PascalCase
-  'PascalCasedComponent': { /* ... */ }
-}
-```
-
-Within HTML templates though, you have to use the kebab-case equivalents:
-
-``` html
-<!-- always use kebab-case in HTML templates -->
-<kebab-cased-component></kebab-cased-component>
-<camel-cased-component></camel-cased-component>
-<pascal-cased-component></pascal-cased-component>
-```
-
-When using _string_ templates however, we're not bound by HTML's case-insensitive restrictions. That means even in the template, you can reference your components using:
-
-- kebab-case
-- camelCase or kebab-case if the component has been defined using camelCase
-- kebab-case, camelCase or PascalCase if the component has been defined using PascalCase
-
-``` js
-components: {
-  'kebab-cased-component': { /* ... */ },
-  camelCasedComponent: { /* ... */ },
-  PascalCasedComponent: { /* ... */ }
-}
-```
-
-``` html
-<kebab-cased-component></kebab-cased-component>
-
-<camel-cased-component></camel-cased-component>
-<camelCasedComponent></camelCasedComponent>
-
-<pascal-cased-component></pascal-cased-component>
-<pascalCasedComponent></pascalCasedComponent>
-<PascalCasedComponent></PascalCasedComponent>
-```
-
-This means that the PascalCase is the most universal _declaration convention_ and kebab-case is the most universal _usage convention_.
-
-If your component isn't passed content via `slot` elements, you can even make it self-closing with a `/` after the name:
-
-``` html
-<my-component/>
-```
-
-Again, this _only_ works within string templates, as self-closing custom elements are not valid HTML and your browser's native parser will not understand them.
-
-### Recursive Components
-
-Components can recursively invoke themselves in their own template. However, they can only do so with the `name` option:
-
-``` js
-name: 'unique-name-of-my-component'
-```
-
-When you register a component globally using `Vue.component`, the global ID is automatically set as the component's `name` option.
-
-``` js
-Vue.component('unique-name-of-my-component', {
-  // ...
-})
-```
-
-If you're not careful, recursive components can also lead to infinite loops:
-
-``` js
-name: 'stack-overflow',
-template: '<div><stack-overflow></stack-overflow></div>'
-```
-
-A component like the above will result in a "max stack size exceeded" error, so make sure recursive invocation is conditional (i.e. uses a `v-if` that will eventually be `false`).
-
-### Circular References Between Components
-
-Let's say you're building a file directory tree, like in Finder or File Explorer. You might have a `tree-folder` component with this template:
-
-``` html
-<p>
-  <span>{{ folder.name }}</span>
-  <tree-folder-contents :children="folder.children"/>
-</p>
-```
-
-Then a `tree-folder-contents` component with this template:
-
-``` html
-<ul>
-  <li v-for="child in children">
-    <tree-folder v-if="child.children" :folder="child"/>
-    <span v-else>{{ child.name }}</span>
-  </li>
-</ul>
-```
-
-When you look closely, you'll see that these components will actually be each other's descendent _and_ ancestor in the render tree - a paradox! When registering components globally with `Vue.component`, this paradox is resolved for you automatically. If that's you, you can stop reading here.
-
-However, if you're requiring/importing components using a __module system__, e.g. via Webpack or Browserify, you'll get an error:
-
-```
-Failed to mount component: template or render function not defined.
-```
-
-To explain what's happening, let's call our components A and B. The module system sees that it needs A, but first A needs B, but B needs A, but A needs B, etc, etc. It's stuck in a loop, not knowing how to fully resolve either component without first resolving the other. To fix this, we need to give the module system a point at which it can say, "A needs B _eventually_, but there's no need to resolve B first."
-
-In our case, let's make that point the `tree-folder` component. We know the child that creates the paradox is the `tree-folder-contents` component, so we'll wait until the `beforeCreate` lifecycle hook to register it:
-
-``` js
-beforeCreate: function () {
-  this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default
-}
-```
-
-Problem solved!
-
-### Inline Templates
-
-When the `inline-template` special attribute is present on a child component, the component will use its inner content as its template, rather than treating it as distributed content. This allows more flexible template-authoring.
-
-``` html
-<my-component inline-template>
-  <div>
-    <p>These are compiled as the component's own template.</p>
-    <p>Not parent's transclusion content.</p>
-  </div>
-</my-component>
-```
-
-However, `inline-template` makes the scope of your templates harder to reason about. As a best practice, prefer defining templates inside the component using the `template` option or in a `template` element in a `.vue` file.
-
-### X-Templates
-
-Another way to define templates is inside of a script element with the type `text/x-template`, then referencing the template by an id. For example:
-
-``` html
-<script type="text/x-template" id="hello-world-template">
-  <p>Hello hello hello</p>
-</script>
-```
-
-``` js
-Vue.component('hello-world', {
-  template: '#hello-world-template'
-})
-```
-
-These can be useful for demos with large templates or in extremely small applications, but should otherwise be avoided, because they separate templates from the rest of the component definition.
-
-### Cheap Static Components with `v-once`
-
-Rendering plain HTML elements is very fast in Vue, but sometimes you might have a component that contains **a lot** of static content. In these cases, you can ensure that it's only evaluated once and then cached by adding the `v-once` directive to the root element, like this:
-
-``` js
-Vue.component('terms-of-service', {
-  template: '\
-    <div v-once>\
-      <h1>Terms of Service</h1>\
-      ... a lot of static content ...\
-    </div>\
-  '
-})
-```
+Once you feel comfortable with the knowledge you've just digested, we recommend coming back to read the full guide on [Dynamic & Async Components](components-props.html), as well as the other pages in the Components In-Depth section of the sidebar.
diff --git a/themes/vue/layout/partials/toc.ejs b/themes/vue/layout/partials/toc.ejs
index 670345398f..ebe1968b32 100644
--- a/themes/vue/layout/partials/toc.ejs
+++ b/themes/vue/layout/partials/toc.ejs
@@ -5,6 +5,9 @@
       <% if (fileName === 'installation') { %>
         <li><h3>Essentials</h3></li>
       <% } %>
+      <% if (fileName === 'components-registration') { %>
+        <li><h3>Components In-Depth</h3></li>
+      <% } %>
       <% if (fileName === 'transitions') { %>
         <li><h3>Transitions & Animation</h3></li>
       <% } %>
diff --git a/themes/vue/source/css/_demo.styl b/themes/vue/source/css/_demo.styl
index 50de72bbb9..3a712a3509 100644
--- a/themes/vue/source/css/_demo.styl
+++ b/themes/vue/source/css/_demo.styl
@@ -14,6 +14,11 @@
   h1
     margin: 0 0 .5em
     font-size: 1.8em
+  h2
+    padding: 0
+    border: none
+  h2, h3, h4, h5, h6
+    margin: 1em 0
   ul, ol
     padding-left: 1.5em
     padding-bottom: .2em !important
@@ -34,13 +39,13 @@
   p
     margin: 0 !important
     padding: 0 !important
-    &:first-child
-      margin-top: 0
-    &:last-child
-      margin-bottom: 0
   textarea
     width: 100%
     resize: vertical
+  > :first-child
+    margin-top: 0
+  > :last-child
+    margin-bottom: 0
 
 
 
@@ -67,4 +72,4 @@ ul#demo, ul.demo
     page-break-inside: avoid
     padding: 1em
     margin-bottom: 1em
-    border-width: 2px
\ No newline at end of file
+    border-width: 2px
diff --git a/themes/vue/source/js/common.js b/themes/vue/source/js/common.js
index c2ab9e794b..7ee9cde121 100644
--- a/themes/vue/source/js/common.js
+++ b/themes/vue/source/js/common.js
@@ -1,4 +1,5 @@
 (function () {
+  initHashLevelRedirects()
   initMobileMenu()
   initVideoModal()
   if (PAGE_TYPE) {
@@ -8,6 +9,95 @@
     initLocationHashFuzzyMatching()
   }
 
+  // Most redirects should be specified in Hexo's
+  // _config.yml. However, it can't handle hash-level
+  // redirects, such as:
+  //
+  // /foo#hello -> /bar#hello
+  //
+  // For these cases where a section on one page has
+  // moved to a perhaps differently-named section on
+  // another page, we need this.
+  function initHashLevelRedirects() {
+    checkForHashRedirect(/components\.html$/, {
+      'What-are-Components': '/v2/guide/components.html',
+      'Using-Components': '/v2/guide/components-registration.html',
+      'Global-Registration':
+        '/v2/guide/components-registration.html#Global-Registration',
+      'Local-Registration':
+        '/v2/guide/components-registration.html#Local-Registration',
+      'Composing-Components':
+        '/v2/guide/components.html#Organizing-Components',
+      Props:
+        '/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props',
+      'Passing-Data-with-Props':
+        '/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props',
+      'camelCase-vs-kebab-case':
+        '/v2/guide/components-props.html#Prop-Casing-camelCase-vs-kebab-case',
+      'Dynamic-Props':
+        '/v2/guide/components-props.html#Static-and-Dynamic-Props',
+      'Literal-vs-Dynamic':
+        '/v2/guide/components-props.html#Static-and-Dynamic-Props',
+      'One-Way-Data-Flow':
+        '/v2/guide/components-props.html#One-Way-Data-Flow',
+      'Prop-Validation': '/v2/guide/components-props.html#Prop-Validation',
+      'Non-Prop-Attributes':
+        '/v2/guide/components-props.html#Non-Prop-Attributes',
+      'Replacing-Merging-with-Existing-Attributes':
+        '/v2/guide/components-props.html#Replacing-Merging-with-Existing-Attributes',
+      'Custom-Events':
+        '/v2/guide/components.html#Sending-Messages-to-Parents-with-Events',
+      'Using-v-on-with-Custom-Events':
+        '/v2/guide/components.html#Sending-Messages-to-Parents-with-Events',
+      'Binding-Native-Events-to-Components':
+        '/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components',
+      'sync-Modifier':
+        '/v2/guide/components-custom-events.html#sync-Modifier',
+      'Form-Input-Components-using-Custom-Events':
+        '/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components',
+      'Customizing-Component-v-model':
+        '/v2/guide/components-custom-events.html#Customizing-Component-v-model',
+      'Non-Parent-Child-Communication': '/v2/guide/state-management.html',
+      'Compilation-Scope':
+        '/v2/guide/components-slots.html#Compilation-Scope',
+      'Single-Slot': '/v2/guide/components-slots.html#Slot-Content',
+      'Named-Slots': '/v2/guide/components-slots.html#Named-Slots',
+      'Scoped-Slots': '/v2/guide/components-slots.html#Scoped-Slots',
+      'Dynamic-Components': '/v2/guide/components.html#Dynamic-Components',
+      'keep-alive':
+        '/v2/guide/components-dynamic-async.html#keep-alive-with-Dynamic-Components',
+      Misc: '/v2/guide/components-edge-cases.html',
+      'Authoring-Reusable-Components':
+        '/v2/guide/components.html#Organizing-Components',
+      'Child-Component-Refs':
+        '/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements',
+      'Async-Components':
+        '/v2/guide/components-dynamic-async.html#Async-Components',
+      'Advanced-Async-Components':
+        '/v2/guide/components-dynamic-async.html#Handling-Loading-State',
+      'Component-Naming-Conventions':
+        '/v2/guide/components-registration.html#Component-Names',
+      'Recursive-Components':
+        '/v2/guide/components-edge-cases.html#Recursive-Components',
+      'Circular-References-Between-Components':
+        '/v2/guide/components-edge-cases.html#Circular-References-Between-Components',
+      'Inline-Templates':
+        '/v2/guide/components-edge-cases.html#Inline-Templates',
+      'X-Templates': '/v2/guide/components-edge-cases.html#X-Templates',
+      'Cheap-Static-Components-with-v-once':
+        '/v2/guide/components-edge-cases.html#Cheap-Static-Components-with-v-once'
+    })
+    function checkForHashRedirect(pageRegex, redirects) {
+      // Abort if the current page doesn't match the page regex
+      if (!pageRegex.test(window.location.pathname)) return
+
+      var redirectPath = redirects[window.location.hash.slice(1)]
+      if (redirectPath) {
+        window.location.href = window.location.origin + redirectPath
+      }
+    }
+  }
+
   function initApiSpecLinks () {
     var apiContent = document.querySelector('.content.api')
     if (apiContent) {
@@ -262,7 +352,17 @@
       }, true)
 
       // make links clickable
-      allHeaders.forEach(makeHeaderClickable)
+      allHeaders
+        .filter(function(el) {
+          if (!el.querySelector('a')) {
+            return false
+          }
+          var demos = [].slice.call(document.querySelectorAll('demo'))
+          return !demos.some(function(demoEl) {
+            return demoEl.contains(el)
+          })
+        })
+        .forEach(makeHeaderClickable)
 
       smoothScroll.init({
         speed: 400,
diff --git a/yarn.lock b/yarn.lock
index cec329260f..ed95fa33a5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -54,6 +54,14 @@ ajv@^5.1.0:
     fast-json-stable-stringify "^2.0.0"
     json-schema-traverse "^0.3.0"
 
+align-text@^0.1.1, align-text@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
+  dependencies:
+    kind-of "^3.0.2"
+    longest "^1.0.1"
+    repeat-string "^1.5.2"
+
 amdefine@>=0.0.4:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
@@ -68,10 +76,20 @@ ansi-regex@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
 
+ansi-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
+
 ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
 
+ansi-styles@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  dependencies:
+    color-convert "^1.9.0"
+
 anymatch@^1.3.0:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.2.tgz#553dcb8f91e3c889845dfdba34c77721b90b9d7a"
@@ -158,6 +176,63 @@ aws4@^1.2.1, aws4@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
 
+babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
+  dependencies:
+    chalk "^1.1.3"
+    esutils "^2.0.2"
+    js-tokens "^3.0.2"
+
+babel-eslint@^7.2.1:
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-7.2.3.tgz#b2fe2d80126470f5c19442dc757253a897710827"
+  dependencies:
+    babel-code-frame "^6.22.0"
+    babel-traverse "^6.23.1"
+    babel-types "^6.23.0"
+    babylon "^6.17.0"
+
+babel-messages@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
+  dependencies:
+    babel-runtime "^6.22.0"
+
+babel-runtime@^6.22.0, babel-runtime@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.11.0"
+
+babel-traverse@^6.23.1:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
+  dependencies:
+    babel-code-frame "^6.26.0"
+    babel-messages "^6.23.0"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+    debug "^2.6.8"
+    globals "^9.18.0"
+    invariant "^2.2.2"
+    lodash "^4.17.4"
+
+babel-types@^6.23.0, babel-types@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
+  dependencies:
+    babel-runtime "^6.26.0"
+    esutils "^2.0.2"
+    lodash "^4.17.4"
+    to-fast-properties "^1.0.3"
+
+babylon@^6.17.0, babylon@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
+
 balanced-match@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
@@ -184,7 +259,7 @@ block-stream@*:
   dependencies:
     inherits "~2.0.0"
 
-bluebird@^3.0.6, bluebird@^3.2.2, bluebird@^3.4.0, bluebird@^3.5.1:
+bluebird@^3.0.6, bluebird@^3.2.2, bluebird@^3.4.0, bluebird@^3.5.0, bluebird@^3.5.1:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9"
 
@@ -247,26 +322,10 @@ builtin-modules@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
 
-bunyan@^1.5.1:
-  version "1.8.12"
-  resolved "https://registry.yarnpkg.com/bunyan/-/bunyan-1.8.12.tgz#f150f0f6748abdd72aeae84f04403be2ef113797"
-  optionalDependencies:
-    dtrace-provider "~0.8"
-    moment "^2.10.6"
-    mv "~2"
-    safe-json-stringify "~1"
-
 bytes@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
 
-camel-case@^1.2.0:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-1.2.2.tgz#1aca7c4d195359a2ce9955793433c6e5542511f2"
-  dependencies:
-    sentence-case "^1.1.1"
-    upper-case "^1.1.1"
-
 camel-case@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
@@ -297,6 +356,13 @@ caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
 
+center-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
+  dependencies:
+    align-text "^0.1.3"
+    lazy-cache "^1.0.3"
+
 chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -307,6 +373,14 @@ chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
+chalk@^2.3.1:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.2.tgz#250dc96b07491bfd601e648d66ddf5f60c7a5c65"
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
 cheerio@^0.20.0:
   version "0.20.0"
   resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-0.20.0.tgz#5c710f2bab95653272842ba01c6ea61b3545ec35"
@@ -338,6 +412,14 @@ cli-boxes@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143"
 
+cliui@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
+  dependencies:
+    center-align "^0.1.1"
+    right-align "^0.1.1"
+    wordwrap "0.0.2"
+
 cliui@^3.0.3:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
@@ -354,6 +436,16 @@ code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
 
+color-convert@^1.9.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed"
+  dependencies:
+    color-name "^1.1.1"
+
+color-name@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+
 combined-stream@^1.0.5, combined-stream@~1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
@@ -386,14 +478,6 @@ concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
 
-concat-stream@^1.4.7:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.0.tgz#0aac662fd52be78964d5532f694784e70110acf7"
-  dependencies:
-    inherits "^2.0.3"
-    readable-stream "^2.2.2"
-    typedarray "^0.0.6"
-
 configstore@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/configstore/-/configstore-2.1.0.tgz#737a3a7036e9886102aa6099e47bb33ab1aba1a1"
@@ -425,6 +509,10 @@ core-js@^1.1.1:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
 
+core-js@^2.4.0:
+  version "2.5.3"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.3.tgz#8acc38345824f16d8365b7c9b4259168e8ed603e"
+
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -435,21 +523,7 @@ create-error-class@^3.0.1:
   dependencies:
     capture-stack-trace "^1.0.0"
 
-cross-spawn-async@^2.2.2:
-  version "2.2.5"
-  resolved "https://registry.yarnpkg.com/cross-spawn-async/-/cross-spawn-async-2.2.5.tgz#845ff0c0834a3ded9d160daca6d390906bb288cc"
-  dependencies:
-    lru-cache "^4.0.0"
-    which "^1.2.8"
-
-cross-spawn@^2.1.5:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-2.2.3.tgz#fac56202dfd3d0dd861778f2da203bf434bb821c"
-  dependencies:
-    cross-spawn-async "^2.2.2"
-    spawn-sync "^1.0.15"
-
-cross-spawn@^4.0.2:
+cross-spawn@^4.0.0, cross-spawn@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-4.0.2.tgz#7b9247621c23adfdd3856004a823cbe397424d41"
   dependencies:
@@ -521,7 +595,7 @@ debug@*:
   dependencies:
     ms "2.0.0"
 
-debug@2.6.9, debug@^2.2.0:
+debug@2.6.9, debug@^2.2.0, debug@^2.6.8:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   dependencies:
@@ -599,12 +673,6 @@ dot-prop@^3.0.0:
   dependencies:
     is-obj "^1.0.0"
 
-dtrace-provider@~0.8:
-  version "0.8.5"
-  resolved "https://registry.yarnpkg.com/dtrace-provider/-/dtrace-provider-0.8.5.tgz#98ebba221afac46e1c39fd36858d8f9367524b92"
-  dependencies:
-    nan "^2.3.3"
-
 duplexer2@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"
@@ -621,9 +689,9 @@ ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
 
-ejs@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/ejs/-/ejs-1.0.0.tgz#c9c60a48a46ee452fb32a71c317b95e5aa1fcb3d"
+ejs@^2.3.4:
+  version "2.5.7"
+  resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.5.7.tgz#cc872c168880ae3c7189762fd5ffc00896c9518a"
 
 encodeurl@~1.0.1:
   version "1.0.1"
@@ -891,6 +959,10 @@ glob@^7.0.5, glob@^7.1.1:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+globals@^9.18.0:
+  version "9.18.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
+
 got@^5.0.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/got/-/got-5.7.1.tgz#5f81635a61e4a6589f180569ea4e381680a51f35"
@@ -943,6 +1015,10 @@ has-ansi@^2.0.0:
   dependencies:
     ansi-regex "^2.0.0"
 
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+
 has-unicode@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
@@ -973,9 +1049,9 @@ hexo-bunyan@^1.0.0:
     mv "~2"
     safe-json-stringify "~1"
 
-hexo-cli@^1.0.2:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/hexo-cli/-/hexo-cli-1.0.4.tgz#c8f1421ec24209d8ffc7bfeea496ab99f34191e1"
+hexo-cli@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/hexo-cli/-/hexo-cli-1.1.0.tgz#496d238d4646dbfd1cf047b6dc5271bfb5cb798f"
   dependencies:
     abbrev "^1.0.7"
     bluebird "^3.4.0"
@@ -986,16 +1062,19 @@ hexo-cli@^1.0.2:
     hexo-util "^0.6.0"
     minimist "^1.2.0"
     object-assign "^4.1.0"
+    resolve "^1.5.0"
     tildify "^1.2.0"
 
-hexo-deployer-git@0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/hexo-deployer-git/-/hexo-deployer-git-0.1.0.tgz#8fdd061fa777a8e53fab8b5e0aca28f906622c21"
+hexo-deployer-git@0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/hexo-deployer-git/-/hexo-deployer-git-0.3.1.tgz#26b085ecc50e2cc99ecd33d56c254c5544c02d21"
   dependencies:
-    chalk "^1.1.1"
-    hexo-fs "^0.1.5"
-    hexo-util "^0.5.3"
-    moment "^2.11.2"
+    babel-eslint "^7.2.1"
+    bluebird "^3.5.0"
+    chalk "^1.1.3"
+    hexo-fs "^0.2.0"
+    hexo-util "^0.6.0"
+    moment "^2.18.0"
     swig "^1.4.2"
 
 hexo-front-matter@^0.2.2:
@@ -1004,15 +1083,6 @@ hexo-front-matter@^0.2.2:
   dependencies:
     js-yaml "^3.6.1"
 
-hexo-fs@^0.1.5:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/hexo-fs/-/hexo-fs-0.1.6.tgz#f980ccc3bc79d0fb92eddbd887bc20a56500d03f"
-  dependencies:
-    bluebird "^3.4.0"
-    chokidar "^1.5.2"
-    escape-string-regexp "^1.0.5"
-    graceful-fs "^4.1.4"
-
 hexo-fs@^0.2.0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/hexo-fs/-/hexo-fs-0.2.2.tgz#0b97b79f68df121f765d1291b8e90fae326d000e"
@@ -1026,7 +1096,7 @@ hexo-fs@^0.2.0:
   version "0.1.3"
   resolved "git+https://github.com/chrisvfritz/vuejs.org-hexo-generator-alias.git#67adb814a76750f3c841825f955bd5dd92cd1f20"
 
-hexo-generator-archive@^0.1.4:
+hexo-generator-archive@^0.1.5:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/hexo-generator-archive/-/hexo-generator-archive-0.1.5.tgz#a979214cdddee2693e0551809c294bedadbb69b3"
   dependencies:
@@ -1040,14 +1110,14 @@ hexo-generator-category@^0.1.3:
     hexo-pagination "0.0.2"
     object-assign "^2.0.0"
 
-hexo-generator-feed@^1.1.0:
+hexo-generator-feed@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/hexo-generator-feed/-/hexo-generator-feed-1.2.2.tgz#9516d1596509b157f4d044fb49b2bae398b82ba7"
   dependencies:
     nunjucks "^3.0.0"
     object-assign "^4.1.1"
 
-hexo-generator-index@^0.2.0:
+hexo-generator-index@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/hexo-generator-index/-/hexo-generator-index-0.2.1.tgz#9042229fcac79aaf700575da19332bf3f7ee5c5d"
   dependencies:
@@ -1067,13 +1137,6 @@ hexo-i18n@^0.2.1:
   dependencies:
     sprintf-js "^1.0.2"
 
-hexo-log@^0.1.2:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/hexo-log/-/hexo-log-0.1.3.tgz#da913f48560e7ca6c2342e66035ea8f49bbe3d58"
-  dependencies:
-    bunyan "^1.5.1"
-    chalk "^1.1.1"
-
 hexo-log@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/hexo-log/-/hexo-log-0.2.0.tgz#d30fd45e1a12a83c88033586640485efc5df5a6f"
@@ -1081,7 +1144,7 @@ hexo-log@^0.2.0:
     chalk "^1.1.1"
     hexo-bunyan "^1.0.0"
 
-hexo-offline@^0.2.0:
+hexo-offline@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/hexo-offline/-/hexo-offline-0.2.2.tgz#12bac51e047208f582af919546544e0b20caa467"
   dependencies:
@@ -1093,30 +1156,30 @@ hexo-pagination@0.0.2:
   dependencies:
     utils-merge "^1.0.0"
 
-hexo-renderer-ejs@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/hexo-renderer-ejs/-/hexo-renderer-ejs-0.2.0.tgz#80771935a5cc71513f07c2c7c14f006220817ae0"
+hexo-renderer-ejs@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/hexo-renderer-ejs/-/hexo-renderer-ejs-0.3.1.tgz#c0c1a3757532d47e5b7d9dc908b5dfd98c94be2c"
   dependencies:
-    ejs "^1.0.0"
+    ejs "^2.3.4"
     object-assign "^4.0.1"
 
-hexo-renderer-marked@^0.2.10:
-  version "0.2.11"
-  resolved "https://registry.yarnpkg.com/hexo-renderer-marked/-/hexo-renderer-marked-0.2.11.tgz#32fd3880d3c3979fd7b8015ec121a6c44ff49f84"
+hexo-renderer-marked@^0.3.0:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/hexo-renderer-marked/-/hexo-renderer-marked-0.3.2.tgz#d6a37af9ff195e30f9ef6ede1a06ea1fe4322966"
   dependencies:
-    hexo-util "^0.6.0"
-    marked "^0.3.5"
-    object-assign "^4.1.0"
-    strip-indent "^1.0.1"
+    hexo-util "^0.6.2"
+    marked "^0.3.9"
+    object-assign "^4.1.1"
+    strip-indent "^2.0.0"
 
-hexo-renderer-stylus@^0.3.1:
+hexo-renderer-stylus@^0.3.3:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/hexo-renderer-stylus/-/hexo-renderer-stylus-0.3.3.tgz#c54ea27e1fd8e3c8a9a7a84cfba8ad354122ca7f"
   dependencies:
     nib "^1.1.2"
     stylus "^0.54.5"
 
-hexo-server@^0.2.0:
+hexo-server@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/hexo-server/-/hexo-server-0.2.2.tgz#592686b554b8bfe09a19bc86c0f003ac3e8c19b9"
   dependencies:
@@ -1130,17 +1193,6 @@ hexo-server@^0.2.0:
     opn "^4.0.0"
     serve-static "^1.10.0"
 
-hexo-util@^0.5.3:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/hexo-util/-/hexo-util-0.5.3.tgz#60100ab7e6640f36a4007524a38da745f86a3365"
-  dependencies:
-    bluebird "^3.0.6"
-    camel-case "^1.2.0"
-    cross-spawn "^2.1.5"
-    highlight.js "^9.0.0"
-    html-entities "^1.2.0"
-    striptags "^2.1.1"
-
 hexo-util@^0.6.0:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/hexo-util/-/hexo-util-0.6.2.tgz#bfc8de63f373e05b3430526d40f25851376587fe"
@@ -1152,37 +1204,50 @@ hexo-util@^0.6.0:
     html-entities "^1.2.1"
     striptags "^2.2.1"
 
-hexo@3.2.2:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/hexo/-/hexo-3.2.2.tgz#9b8e7022aec95e02021cec140afd7888d4ceb931"
+hexo-util@^0.6.2:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/hexo-util/-/hexo-util-0.6.3.tgz#16a2ade457bef955af0dfd22a3fe6f0a49a9137c"
+  dependencies:
+    bluebird "^3.4.0"
+    camel-case "^3.0.0"
+    cross-spawn "^4.0.0"
+    highlight.js "^9.4.0"
+    html-entities "^1.2.0"
+    striptags "^2.1.1"
+
+hexo@^3.4.2:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/hexo/-/hexo-3.6.0.tgz#f978263eb889655269902bc60cd0dfaa29d63c0f"
   dependencies:
     abbrev "^1.0.7"
     archy "^1.0.0"
     bluebird "^3.4.0"
-    chalk "^1.1.3"
+    chalk "^2.3.1"
     cheerio "^0.20.0"
-    hexo-cli "^1.0.2"
+    hexo-cli "^1.1.0"
     hexo-front-matter "^0.2.2"
-    hexo-fs "^0.1.5"
+    hexo-fs "^0.2.0"
     hexo-i18n "^0.2.1"
-    hexo-log "^0.1.2"
+    hexo-log "^0.2.0"
     hexo-util "^0.6.0"
     js-yaml "^3.6.1"
-    lodash "^4.13.1"
-    minimatch "^3.0.0"
-    moment "~2.13.0"
-    moment-timezone "^0.5.4"
-    nunjucks "^2.4.2"
+    lodash "^4.17.5"
+    minimatch "^3.0.4"
+    moment "^2.19.4"
+    moment-timezone "^0.5.14"
+    nunjucks "^3.1.2"
     pretty-hrtime "^1.0.2"
-    strip-indent "^1.0.1"
-    swig "1.4.2"
+    resolve "^1.5.0"
+    strip-ansi "^4.0.0"
+    strip-indent "^2.0.0"
     swig-extras "0.0.1"
+    swig-templates "^2.0.2"
     text-table "^0.2.0"
     tildify "^1.2.0"
     titlecase "^1.1.2"
     warehouse "^2.2.0"
 
-highlight.js@^9.0.0, highlight.js@^9.12.0:
+highlight.js@^9.12.0, highlight.js@^9.4.0:
   version "9.12.0"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.12.0.tgz#e6d9dbe57cbefe60751f02af336195870c90c01e"
 
@@ -1254,7 +1319,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.0, inherits@~2.0.1, inherits@~2.0.3:
+inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@~2.0.0, inherits@~2.0.1, inherits@~2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
 
@@ -1262,6 +1327,12 @@ ini@~1.3.0:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
 
+invariant@^2.2.2:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.3.tgz#1a827dfde7dcbd7c323f0ca826be8fa7c5e9d688"
+  dependencies:
+    loose-envify "^1.0.0"
+
 invert-kv@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
@@ -1402,6 +1473,10 @@ isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
 
+js-tokens@^3.0.0, js-tokens@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
+
 js-yaml@^3.6.1:
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.10.0.tgz#2e78441646bd4682e963f22b6e92823c309c62dc"
@@ -1486,6 +1561,10 @@ latest-version@^2.0.0:
   dependencies:
     package-json "^2.0.0"
 
+lazy-cache@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
+
 lazy-req@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/lazy-req/-/lazy-req-1.1.0.tgz#bdaebead30f8d824039ce0ce149d4daa07ba1fac"
@@ -1534,10 +1613,24 @@ lodash.templatesettings@^4.0.0:
   dependencies:
     lodash._reinterpolate "~3.0.0"
 
-lodash@^4.1.0, lodash@^4.13.1, lodash@^4.2.1:
+lodash@^4.1.0, lodash@^4.2.1:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
+lodash@^4.17.4, lodash@^4.17.5:
+  version "4.17.5"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
+
+longest@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
+
+loose-envify@^1.0.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
+  dependencies:
+    js-tokens "^3.0.0"
+
 loud-rejection@^1.0.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
@@ -1553,7 +1646,7 @@ lowercase-keys@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.0.tgz#4e3366b39e7f5457e35f1324bdf6f88d0bfc7306"
 
-lru-cache@^4.0.0, lru-cache@^4.0.1:
+lru-cache@^4.0.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.1.tgz#622e32e82488b49279114a4f9ecf45e7cd6bba55"
   dependencies:
@@ -1570,9 +1663,9 @@ markdown@~0.5.0:
   dependencies:
     nopt "~2.1.1"
 
-marked@^0.3.5:
-  version "0.3.6"
-  resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.6.tgz#b2c6c618fccece4ef86c4fc6cb8a7cbf5aeda8d7"
+marked@^0.3.9:
+  version "0.3.17"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.17.tgz#607f06668b3c6b1246b28f13da76116ac1aa2d2b"
 
 meow@^3.7.0:
   version "3.7.0"
@@ -1649,19 +1742,19 @@ mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1:
   dependencies:
     minimist "0.0.8"
 
-moment-timezone@^0.5.4:
+moment-timezone@^0.5.14:
   version "0.5.14"
   resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.14.tgz#4eb38ff9538b80108ba467a458f3ed4268ccfcb1"
   dependencies:
     moment ">= 2.9.0"
 
-"moment@>= 2.9.0", moment@^2.10.6, moment@^2.11.2:
+"moment@>= 2.9.0", moment@^2.10.6:
   version "2.19.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.19.1.tgz#56da1a2d1cbf01d38b7e1afc31c10bcfa1929167"
 
-moment@~2.13.0:
-  version "2.13.0"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.13.0.tgz#24162d99521e6d40f99ae6939e806d2139eaac52"
+moment@^2.18.0, moment@^2.19.4:
+  version "2.21.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.21.0.tgz#2a114b51d2a6ec9e6d83cf803f838a878d8a023a"
 
 morgan@^1.6.1:
   version "1.9.0"
@@ -1685,7 +1778,7 @@ mv@~2:
     ncp "~2.0.0"
     rimraf "~2.4.0"
 
-nan@^2.3.0, nan@^2.3.3:
+nan@^2.3.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.7.0.tgz#d95bf721ec877e08db276ed3fc6eb78f9083ad46"
 
@@ -1780,20 +1873,23 @@ number-is-nan@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
 
-nunjucks@^2.4.2:
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/nunjucks/-/nunjucks-2.5.2.tgz#ea7d346e785b8a4874666c3cca9e18c577fba22c"
+nunjucks@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/nunjucks/-/nunjucks-3.0.1.tgz#4de74a3e550baf6fa3370323f3d1c7c2a86bdc4d"
   dependencies:
+    a-sync-waterfall "^1.0.0"
     asap "^2.0.3"
-    chokidar "^1.6.0"
     yargs "^3.32.0"
+  optionalDependencies:
+    chokidar "^1.6.0"
 
-nunjucks@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/nunjucks/-/nunjucks-3.0.1.tgz#4de74a3e550baf6fa3370323f3d1c7c2a86bdc4d"
+nunjucks@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/nunjucks/-/nunjucks-3.1.2.tgz#85945a66bb8239bb37ecef83dab4cc1f152aabb9"
   dependencies:
     a-sync-waterfall "^1.0.0"
     asap "^2.0.3"
+    postinstall-build "^5.0.1"
     yargs "^3.32.0"
   optionalDependencies:
     chokidar "^1.6.0"
@@ -1872,10 +1968,6 @@ os-locale@^1.4.0:
   dependencies:
     lcid "^1.0.0"
 
-os-shim@^0.1.2:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/os-shim/-/os-shim-0.1.3.tgz#6b62c3791cf7909ea35ed46e17658bb417cb3917"
-
 os-tmpdir@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
@@ -1929,6 +2021,10 @@ path-is-absolute@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
 
+path-parse@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
+
 path-to-regexp@^1.0.1:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
@@ -1965,6 +2061,10 @@ pinkie@^2.0.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
 
+postinstall-build@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/postinstall-build/-/postinstall-build-5.0.1.tgz#b917a9079b26178d9a24af5a5cd8cb4a991d11b9"
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -2056,7 +2156,7 @@ readable-stream@1.1:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
-readable-stream@^2.0.0, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.4, readable-stream@^2.2.2:
+readable-stream@^2.0.0, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.4:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
   dependencies:
@@ -2084,6 +2184,10 @@ redent@^1.0.0:
     indent-string "^2.1.0"
     strip-indent "^1.0.1"
 
+regenerator-runtime@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
+
 regex-cache@^0.4.2:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.4.tgz#75bdc58a2a1496cec48a12835bc54c8d562336dd"
@@ -2148,7 +2252,7 @@ request@2.81.0:
     tunnel-agent "^0.6.0"
     uuid "^3.0.0"
 
-request@^2.55.0:
+request@^2.55.0, request@^2.83.0:
   version "2.83.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.83.0.tgz#ca0b65da02ed62935887808e6f510381034e3356"
   dependencies:
@@ -2175,6 +2279,18 @@ request@^2.55.0:
     tunnel-agent "^0.6.0"
     uuid "^3.1.0"
 
+resolve@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.5.0.tgz#1f09acce796c9a762579f31b2c1cc4c3cddf9f36"
+  dependencies:
+    path-parse "^1.0.5"
+
+right-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
+  dependencies:
+    align-text "^0.1.1"
+
 rimraf@2, rimraf@^2.5.1, rimraf@^2.6.1:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
@@ -2231,12 +2347,6 @@ send@0.16.1:
     range-parser "~1.2.0"
     statuses "~1.3.1"
 
-sentence-case@^1.1.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/sentence-case/-/sentence-case-1.1.3.tgz#8034aafc2145772d3abe1509aa42c9e1042dc139"
-  dependencies:
-    lower-case "^1.1.1"
-
 serve-static@^1.10.0:
   version "1.13.1"
   resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.13.1.tgz#4c57d53404a761d8f2e7c1e8a18a47dbf278a719"
@@ -2294,17 +2404,10 @@ source-map@0.1.x:
   dependencies:
     amdefine ">=0.0.4"
 
-source-map@~0.5.6:
+source-map@~0.5.1, source-map@~0.5.6:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
 
-spawn-sync@^1.0.15:
-  version "1.0.15"
-  resolved "https://registry.yarnpkg.com/spawn-sync/-/spawn-sync-1.0.15.tgz#b00799557eb7fb0c8376c29d44e8a1ea67e57476"
-  dependencies:
-    concat-stream "^1.4.7"
-    os-shim "^0.1.2"
-
 spdx-correct@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40"
@@ -2377,6 +2480,12 @@ strip-ansi@^3.0.0, strip-ansi@^3.0.1:
   dependencies:
     ansi-regex "^2.0.0"
 
+strip-ansi@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
+  dependencies:
+    ansi-regex "^3.0.0"
+
 strip-bom@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
@@ -2389,6 +2498,10 @@ strip-indent@^1.0.1:
   dependencies:
     get-stdin "^4.0.1"
 
+strip-indent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-2.0.0.tgz#5ef8db295d01e6ed6cbf7aab96998d7822527b68"
+
 strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
@@ -2412,6 +2525,12 @@ supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
 
+supports-color@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.3.0.tgz#5b24ac15db80fa927cf5227a4a33fd3c4c7676c0"
+  dependencies:
+    has-flag "^3.0.0"
+
 sw-precache@^5.1.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/sw-precache/-/sw-precache-5.2.0.tgz#eb6225ce580ceaae148194578a0ad01ab7ea199c"
@@ -2440,7 +2559,14 @@ swig-extras@0.0.1:
   dependencies:
     markdown "~0.5.0"
 
-swig@1.4.2, swig@^1.4.2:
+swig-templates@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/swig-templates/-/swig-templates-2.0.2.tgz#d2502a7303019356f4ea76ea9065d4f58af6ab75"
+  dependencies:
+    optimist "~0.6"
+    uglify-js "2.6.0"
+
+swig@^1.4.2:
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/swig/-/swig-1.4.2.tgz#4085ca0453369104b5d483e2841b39b7ae1aaba5"
   dependencies:
@@ -2494,6 +2620,10 @@ titlecase@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/titlecase/-/titlecase-1.1.2.tgz#78113d1108086b8326331a3247dea8f5a49ea853"
 
+to-fast-properties@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
+
 tough-cookie@^2.2.0, tough-cookie@~2.3.0, tough-cookie@~2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.3.tgz#0b618a5565b6dea90bf3425d04d55edc475a7561"
@@ -2524,9 +2654,14 @@ type-check@~0.3.2:
   dependencies:
     prelude-ls "~1.1.2"
 
-typedarray@^0.0.6:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+uglify-js@2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.6.0.tgz#25eaa1cc3550e39410ceefafd1cfbb6b6d15f001"
+  dependencies:
+    async "~0.2.6"
+    source-map "~0.5.1"
+    uglify-to-browserify "~1.0.0"
+    yargs "~3.10.0"
 
 uglify-js@~2.4:
   version "2.4.24"
@@ -2636,7 +2771,7 @@ whatwg-url-compat@~0.6.5:
   dependencies:
     tr46 "~0.0.1"
 
-which@^1.2.8, which@^1.2.9:
+which@^1.2.9:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a"
   dependencies:
@@ -2723,6 +2858,15 @@ yargs@^3.32.0:
     window-size "^0.1.4"
     y18n "^3.2.0"
 
+yargs@~3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
+  dependencies:
+    camelcase "^1.0.2"
+    cliui "^2.1.0"
+    decamelize "^1.0.0"
+    window-size "0.1.0"
+
 yargs@~3.5.4:
   version "3.5.4"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.5.4.tgz#d8aff8f665e94c34bd259bdebd1bfaf0ddd35361"