diff --git a/.gitignore b/.gitignore
index fff1da3..d75e1f3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,5 +5,5 @@ npm-debug.log
 test/unit/coverage
 .coveralls.yml
 .flowconfig
-docs/_book
+docs/gitbook/_book
 docs/node_modules
\ No newline at end of file
diff --git a/book.json b/book.json
index 9e08b51..113745f 100644
--- a/book.json
+++ b/book.json
@@ -2,14 +2,17 @@
   "title": "vue-select",
   "gitbook": ">3.0.0",
   "root": "./docs/gitbook",
-  "plugins": ["edit-link", "-fontsettings", "github", "codepen"],
+  "plugins": ["edit-link", "-fontsettings", "codepen", "include-csv"],
   "pluginsConfig": {
     "edit-link": {
-      "base": "https://github.com/sagalbot/vue-select/edit/master/docs",
+      "base": "https://github.com/sagalbot/vue-select/edit/gitbook/docs/gitbook",
       "label": "Edit This Page"
     },
     "github": {
       "url": "https://github.com/sagalbot/vue-select/"
+    },
+    "codepen": {
+      "theme": 32252
     }
   },
   "links": {
diff --git a/docs/gitbook/Api/Props.md b/docs/gitbook/Api/Props.md
index e67b919..0c5ca26 100644
--- a/docs/gitbook/Api/Props.md
+++ b/docs/gitbook/Api/Props.md
@@ -1,223 +1,6 @@
-```js
-/**
- * Contains the currently selected value. Very similar to a
- * `value` attribute on an <input>.
- * @type {Object||String||null}
- */
-value: {
-  default: null
-}
-
-/**
- * An array of strings or objects to be used as dropdown choices.
- * If you are using an array of objects, vue-select will look for
- * a `label` key (ex. [{label: 'This is Foo', value: 'foo'}]). A
- * custom label key can be set with the `label` prop.
- * @type {Array}
- */
-options: {
-  type: Array,
-  default() {
-    return []
-  },
-}
-
-/**
- * Sets the max-height property on the dropdown list.
- * @deprecated
- * @type {String}
- */
-maxHeight: {
-  type: String,
-  default: '400px'
-},
-
-/**
- * Enable/disable filtering the options.
- * @type {Boolean}
- */
-searchable: {
-  type: Boolean,
-  default: true
-},
-
-/**
- * Equivalent to the `multiple` attribute on a `<select>` input.
- * @type {Object}
- */
-multiple: {
-  type: Boolean,
-  default: false
-},
-
-/**
- * Equivalent to the `placeholder` attribute on an `<input>`.
- * @type {Object}
- */
-placeholder: {
-  type: String,
-  default: ''
-},
-
-/**
- * Sets a Vue transition property on the `.dropdown-menu`. vue-select
- * does not include CSS for transitions, you'll need to add them yourself.
- * @type {String}
- */
-transition: {
-  type: String,
-  default: 'fade'
-},
-
-/**
- * Enables/disables clearing the search text when an option is selected.
- * @type {Boolean}
- */
-clearSearchOnSelect: {
-  type: Boolean,
-  default: true
-},
-
-/**
- * Close a dropdown when an option is chosen. Set to false to keep the dropdown
- * open (useful when combined with multi-select, for example)
- * @type {Boolean}
- */
-closeOnSelect: {
-  type: Boolean,
-  default: true
-},
-
-/**
- * Tells vue-select what key to use when generating option
- * labels when each `option` is an object.
- * @type {String}
- */
-label: {
-  type: String,
-  default: 'label'
-},
-
-/**
- * Callback to generate the label text. If {option}
- * is an object, returns option[this.label] by default.
- * @param  {Object || String} option
- * @return {String}
- */
-getOptionLabel: {
-  type: Function,
-  default(option) {
-    if (typeof option === 'object') {
-      if (this.label && option[this.label]) {
-        return option[this.label]
-      }
-    }
-    return option;
-  }
-},
-
-/**
- * An optional callback function that is called each time the selected
- * value(s) change. When integrating with Vuex, use this callback to trigger
- * an action, rather than using :value.sync to retreive the selected value.
- * @type {Function}
- * @default {null}
- */
-onChange: {
-  type: Function,
-  default: function (val) {
-    this.$emit('input', val)
-  }
-},
-
-/**
- * Enable/disable creating options from searchInput.
- * @type {Boolean}
- */
-taggable: {
-  type: Boolean,
-  default: false
-},
-
-/**
- * When true, newly created tags will be added to
- * the options list.
- * @type {Boolean}
- */
-pushTags: {
-  type: Boolean,
-  default: false
-},
-
-/**
- * User defined function for adding Options
- * @type {Function}
- */
-createOption: {
-  type: Function,
-  default(newOption) {
-    if (typeof this.mutableOptions[0] === 'object') {
-      newOption = {[this.label]: newOption}
-    }
-    this.$emit('option:created', newOption)
-    return newOption
-  }
-},
-
-/**
- * When false, updating the options will not reset the select value
- * @type {Boolean}
- */
-resetOnOptionsChange: {
-  type: Boolean,
-  default: false
-},
-
-/**
- * Disable the dropdown entirely.
- * @type {Boolean}
- */
-noDrop: {
-  type: Boolean,
-  default: false
-},
-
-/**
- * Sets the id of the input element.
- * @type {String}
- * @default {null}
- */
-inputId: {
-  type: String
-}
-```
-
-# AJAX {#ajax}
-
-```js
-/**
- * Toggles the adding of a 'loading' class to the main
- * .v-select wrapper. Useful to control UI state when
- * results are being processed through AJAX.
- */
-loading: {
-  type: Boolean,
-  default: false
-},
-
-/**
- * Accept a callback function that will be
- * run when the search text changes.
- *
- * loading() accepts a boolean value, and can
- * be used to toggle a loading class from
- * the onSearch callback.
- *
- * @param {search}  String          Current search text
- * @param {loading} Function(bool)  Toggle loading class
- */
-onSearch: {
-  type: Function,
-  default: function(search, loading){}
-}
-```
+{% 
+	includeCsv 
+	src="./props.csv",
+	linkSrc="false",
+ 	useHeader="true" 
+ %}{% endincludeCsv %}
\ No newline at end of file
diff --git a/docs/gitbook/Api/props.csv b/docs/gitbook/Api/props.csv
new file mode 100644
index 0000000..24acc81
--- /dev/null
+++ b/docs/gitbook/Api/props.csv
@@ -0,0 +1,25 @@
+name,type,default
+value,Object || String || null,
+options,Array,
+disabled,Boolean,
+maxHeight,String,
+searchable,Boolean,
+multiple,Boolean,
+placeholder,String,
+transition,String,
+clearSearchOnSelect,Boolean,
+closeOnSelect,Boolean,
+label,String,
+getOptionLabel,Function,
+filterFunction,Function,
+filter,Function,
+onChange,Function,
+taggable,Boolean,
+tabindex,Number,
+pushTags,Boolean,
+filterable,Boolean,
+createOption,Function,
+resetOnOptionsChange,Boolean,
+noDrop,Boolean,
+inputId,String,
+dir,String,
\ No newline at end of file
diff --git a/docs/gitbook/Basics/Localization.md b/docs/gitbook/Basics/Localization.md
index e69de29..3e8efce 100644
--- a/docs/gitbook/Basics/Localization.md
+++ b/docs/gitbook/Basics/Localization.md
@@ -0,0 +1,17 @@
+All of the text within the component has been wrapped within [slots](https://vuejs.org/v2/guide/components.html#Content-Distribution-with-Slots) and can be replaced in your app.
+
+#### Loading Spinner
+
+```html
+<slot name="spinner">
+	<div class="spinner" v-show="mutableLoading">Loading...</div>
+</slot>
+```
+
+#### No Options Text
+
+```html
+<slot name="no-options">Sorry, no matching options.</slot>
+```
+
+For a full list of component slots, view the [slots API docs](Api/Slots.md).
\ No newline at end of file
diff --git a/docs/gitbook/Basics/Options.md b/docs/gitbook/Basics/Options.md
index 6b5609e..0eeb671 100644
--- a/docs/gitbook/Basics/Options.md
+++ b/docs/gitbook/Basics/Options.md
@@ -31,6 +31,8 @@ If you wanted to display `Canada` in the dropdown, you'd use the `countryName` k
 <v-select label="countryName" :options="countries"></v-select>
 ```
 
+[](codepen://sagalbot/aEjLPB?height=500)
+
 ### Null / Empty Options {#emptyOptions}
 
 `vue-select` requires the `option` property to be an `array`. If you are using Vue in development mode, you will get warnings attempting to pass anything other than an `array` to the `options` prop. If you need a `null`/`empty` value, use an empty array `[]`.
diff --git a/docs/gitbook/Basics/Values.md b/docs/gitbook/Basics/Values.md
index 7cd3084..e7b6fb2 100644
--- a/docs/gitbook/Basics/Values.md
+++ b/docs/gitbook/Basics/Values.md
@@ -6,6 +6,8 @@ The most common use case for `vue-select` is to have the chosen value synced wit
 <v-select v-model="selected"></v-select>
 ```
 
+[](codepen://sagalbot/Kqxbjw?height=250)
+
 If you don't require the `value` to be synced, you can also pass the prop directly:
 
 ```html
@@ -21,3 +23,5 @@ By default, `vue-select` supports choosing a single value. If you need multiple
 ```html
 <v-select multiple v-model="selected"></v-select>
 ```
+
+[](codepen://sagalbot/opMGro?height=250)
diff --git a/docs/gitbook/Examples.md b/docs/gitbook/Examples.md
index b41615c..ba42bbf 100644
--- a/docs/gitbook/Examples.md
+++ b/docs/gitbook/Examples.md
@@ -10,7 +10,7 @@
 
 ## Vuex {#vuex}
 
-[](codepen://sagalbot/aJQJyp?height=500&theme=0)
+[](codepen://sagalbot/aJQJyp?height=500)
 
 ## AJAX {#ajax}
 
diff --git a/docs/gitbook/Install.md b/docs/gitbook/Install.md
index 19d570c..88f986b 100644
--- a/docs/gitbook/Install.md
+++ b/docs/gitbook/Install.md
@@ -2,12 +2,26 @@
 -  `vue ~2.0` use `vue-select ~2.0`
 -  `vue ~1.0` use `vue-select ~1.0`
 
-## NPM Based WorkFlows
+## Yarn / NPM
+Install with yarn:
 ```bash
-$ npm install vue-select
+yarn add vue-select
+```
+or, using NPM:
+```
+npm install vue-select
 ```
 
-## Browser Globals
+Then, import and register the component:
+
+```js
+import Vue from 'vue'
+import vSelect from './components/Select.vue'
+
+Vue.component('v-select', vSelect)
+```
+
+## CDN
 
 Include `vue` & `vue-select.js` - I recommend using [unpkg.com](https://unpkg.com/#/).
 
@@ -26,4 +40,4 @@ Then register the component in your javascript:
 Vue.component('v-select', VueSelect.VueSelect);
 ```
 
-From there you can use as normal. Here's an [example on JSBin](http://jsbin.com/saxaru/5/edit?html,js,output).
+[](codepen://sagalbot/dJjzeP)
diff --git a/docs/gitbook/Introduction.md b/docs/gitbook/Introduction.md
deleted file mode 100644
index 85382da..0000000
--- a/docs/gitbook/Introduction.md
+++ /dev/null
@@ -1,26 +0,0 @@
-# vue-select [![Build Status](https://travis-ci.org/sagalbot/vue-select.svg?branch=master)](https://travis-ci.org/sagalbot/vue-select) [![Code Score](https://img.shields.io/codeclimate/github/sagalbot/vue-select.svg?style=flat-square)](https://lima.codeclimate.com/github/sagalbot/vue-select) [![Code Coverage](https://img.shields.io/codeclimate/coverage/github/sagalbot/vue-select.svg?style=flat-square)](https://codeclimate.com/github/sagalbot/vue-select) [![No Dependencies](https://img.shields.io/gemnasium/sagalbot/vue-select.svg?style=flat-square)](https://gemnasium.com/github.com/sagalbot/vue-select) ![MIT License](https://img.shields.io/github/license/sagalbot/vue-select.svg?style=flat-square) ![Current Release](https://img.shields.io/github/release/sagalbot/vue-select.svg?style=flat-square)
-
-> A native Vue.js select component that provides similar functionality to Select2 without the overhead of jQuery.
-
-#### Features
-- AJAX Support
-- Tagging
-- List Filtering/Searching
-- Supports Vuex
-- Select Single/Multiple Options
-- Tested with Bootstrap 3/4, Bulma, Foundation
-- +95% Test Coverage
-- ~33kb minified with CSS
-- Zero dependencies
-
-## Documentation
-- **[Demo & Docs](http://sagalbot.github.io/vue-select/)**
-- **[Example on JSBin](http://jsbin.com/saxaru/8/edit?html,js,output)**
-- **[CodePen Template](http://codepen.io/sagalbot/pen/NpwrQO)**
-- **[Trello Roadmap](https://trello.com/b/vWvITNzS/vue-select)**
-
-## Install
-
-###### Vue Compatibility
--  `vue ~2.0` use `vue-select ~2.0`
--  `vue ~1.0` use `vue-select ~1.0`
diff --git a/docs/gitbook/README.md b/docs/gitbook/README.md
index 3b83f35..ba90953 100644
--- a/docs/gitbook/README.md
+++ b/docs/gitbook/README.md
@@ -1,10 +1,6 @@
-# vue-select
+# vue-select [![Build Status](https://travis-ci.org/sagalbot/vue-select.svg?branch=master)](https://travis-ci.org/sagalbot/vue-select) [![Code Score](https://img.shields.io/codeclimate/github/sagalbot/vue-select.svg?style=flat-square)](https://lima.codeclimate.com/github/sagalbot/vue-select) [![Code Coverage](https://img.shields.io/codeclimate/coverage/github/sagalbot/vue-select.svg?style=flat-square)](https://codeclimate.com/github/sagalbot/vue-select) [![No Dependencies](https://img.shields.io/gemnasium/sagalbot/vue-select.svg?style=flat-square)](https://gemnasium.com/github.com/sagalbot/vue-select) ![MIT License](https://img.shields.io/github/license/sagalbot/vue-select.svg?style=flat-square) ![Current Release](https://img.shields.io/github/release/sagalbot/vue-select.svg?style=flat-square)
 
-[![Build Status](https://travis-ci.org/sagalbot/vue-select.svg?branch=master)](https://travis-ci.org/sagalbot/vue-select) [![Code Score](https://img.shields.io/codeclimate/github/sagalbot/vue-select.svg?style=flat-square)](https://lima.codeclimate.com/github/sagalbot/vue-select) [![Code Coverage](https://img.shields.io/codeclimate/coverage/github/sagalbot/vue-select.svg?style=flat-square)](https://codeclimate.com/github/sagalbot/vue-select) [![No Dependencies](https://img.shields.io/gemnasium/sagalbot/vue-select.svg?style=flat-square)](https://gemnasium.com/github.com/sagalbot/vue-select) ![MIT License](https://img.shields.io/github/license/sagalbot/vue-select.svg?style=flat-square) ![Current Release](https://img.shields.io/github/release/sagalbot/vue-select.svg?style=flat-square)
-
-> A native Vue.js select component that provides similar functionality to Select2 without the overhead of jQuery.
-
-Vue Select was designed to be the Select2 replacement for VueJS. 
+> A Vue.js select component that provides similar functionality to Select2 without the overhead of jQuery.
 
 #### Features
 - AJAX Support
@@ -16,3 +12,15 @@ Vue Select was designed to be the Select2 replacement for VueJS.
 - +95% Test Coverage
 - ~33kb minified with CSS
 - Zero dependencies
+
+## Documentation
+- **[Demo & Docs](http://sagalbot.github.io/vue-select/)**
+- **[Example on JSBin](http://jsbin.com/saxaru/8/edit?html,js,output)**
+- **[CodePen Template](http://codepen.io/sagalbot/pen/NpwrQO)**
+- **[Trello Roadmap](https://trello.com/b/vWvITNzS/vue-select)**
+
+## Install
+
+###### Vue Compatibility
+-  `vue ~2.0` use `vue-select ~2.0`
+-  `vue ~1.0` use `vue-select ~1.0`
\ No newline at end of file
diff --git a/docs/gitbook/SUMMARY.md b/docs/gitbook/SUMMARY.md
index d938c5d..d4d6bf5 100644
--- a/docs/gitbook/SUMMARY.md
+++ b/docs/gitbook/SUMMARY.md
@@ -1,25 +1,22 @@
 # Summary
 
-- [Introduction](README.md)
+- Getting Started
 - [Installation](Install.md)
-  - [npm/yarn](Install.md#npm)
-  - [cdn](Install.md#cdn)
-- [Getting Started](Basics.md)
-  - [Dropdown Options](Basics/Options.md)
-    - [Option Labels](Basics/Options.md#labels)
-    - [Null Options](Basics/Options.md#null)
-  - [Selecting Values](Basics/Values.md#values)
-    - [Tagging](Basics/Values.md#tagging)
-    - [Multiple](Basics/Values.md#multiple)
+- [Dropdown Options](Basics/Options.md)
+	- [Option Labels](Basics/Options.md#labels)
+	- [Null Options](Basics/Options.md#null)
+- [Selecting Values](Basics/Values.md#values)
+	- [Tagging](Basics/Values.md#tagging)
+	- [Multiple](Basics/Values.md#multiple)
 - [Localization](Basics/Localization.md)
 
 - Digging Deeper
-  - [Templating](Advanced/Templating.md)
-  - [Vuex](Basics.md#options)
-  - [AJAX](Basics.md#options)
-  - [Mixins](Basics.md#options)
-  - [Validation](Basics.md#options)
-  - [Examples](Examples.md)
+- [Templating](Advanced/Templating.md)
+- [Vuex](Basics.md#options)
+- [AJAX](Basics.md#options)
+- [Mixins](Basics.md#options)
+- [Validation](Basics.md#options)
+- [Examples](Examples.md)
 
 - API
 - [Props](Api/Props.md)
diff --git a/docs/gitbook/styles/website.css b/docs/gitbook/styles/website.css
index 9df06c3..f1d4d1a 100644
--- a/docs/gitbook/styles/website.css
+++ b/docs/gitbook/styles/website.css
@@ -45,12 +45,6 @@ li a {
   font-weight: 600;
 }
 
-/* remove gitbook link and divider */
-.book-summary ul.summary li a.gitbook-link,
-.book-summary ul.summary li:nth-last-child(2) {
-  display: none;
-}
-
 #book-search-input { background-color: #fafafa; }
 .book-summary { background-color: #fff; }
 
diff --git a/package.json b/package.json
index 4e32e82..45e64d0 100644
--- a/package.json
+++ b/package.json
@@ -9,8 +9,8 @@
   "scripts": {
     "start": "npm run dev",
     "dev": "node build/dev-server.js",
-    "dev:docs": "node build/dev-server.js --docs",
-    "docs": "gitbook serve docs/gitbook",
+    "dev:homepage": "node build/dev-server.js --docs",
+    "dev:docs": "gitbook serve docs/gitbook",
     "build": "node build/build.js",
     "lint": "eslint --ext .js,.vue src test/unit/specs",
     "test": "karma start test/unit/karma.conf.js --single-run",