From 4b5b956e0e0ecdac2690290e93347bdfbc6904af Mon Sep 17 00:00:00 2001
From: Josh Thomas <josh@ionic.io>
Date: Thu, 28 Feb 2019 21:04:21 -0600
Subject: [PATCH 1/3] base components

---
 core/src/components/avatar/usage/vue.md       |  21 ++
 core/src/components/badge/usage/vue.md        |  24 +++
 core/src/components/button/usage/vue.md       |  52 +++++
 core/src/components/card/usage/vue.md         |  50 +++++
 core/src/components/chip/usage/vue.md         |  44 +++++
 core/src/components/fab-button/usage/vue.md   |  25 +++
 core/src/components/fab-list/usage/vue.md     |  18 ++
 core/src/components/fab/usage/vue.md          |  83 ++++++++
 core/src/components/grid/usage/vue.md         | 181 ++++++++++++++++++
 core/src/components/icon/usage/vue.md         |  20 ++
 .../infinite-scroll-content/usage/vue.md      |  12 ++
 core/src/components/input/usage/vue.md        |  45 +++++
 core/src/components/item-divider/usage/vue.md |  42 ++++
 core/src/components/item-group/usage/vue.md   | 105 ++++++++++
 core/src/components/label/usage/vue.md        |  56 ++++++
 core/src/components/note/usage/vue.md         |  26 +++
 core/src/components/radio-group/usage/vue.md  |  36 ++++
 core/src/components/radio/usage/vue.md        |  26 +++
 core/src/components/range/usage/vue.md        |  33 ++++
 .../src/components/reorder-group/usage/vue.md |  51 +++++
 core/src/components/searchbar/usage/vue.md    |  32 ++++
 core/src/components/spinner/usage/vue.md      |  27 +++
 core/src/components/split-pane/usage/vue.md   |  17 ++
 core/src/components/tab-bar/usage/vue.md      |  18 ++
 core/src/components/tab-button/usage/vue.md   |  29 +++
 core/src/components/tabs/usage/vue.md         |  28 +++
 core/src/components/textarea/usage/vue.md     |  39 ++++
 27 files changed, 1140 insertions(+)
 create mode 100644 core/src/components/avatar/usage/vue.md
 create mode 100644 core/src/components/badge/usage/vue.md
 create mode 100644 core/src/components/button/usage/vue.md
 create mode 100644 core/src/components/card/usage/vue.md
 create mode 100644 core/src/components/chip/usage/vue.md
 create mode 100644 core/src/components/fab-button/usage/vue.md
 create mode 100644 core/src/components/fab-list/usage/vue.md
 create mode 100644 core/src/components/fab/usage/vue.md
 create mode 100644 core/src/components/grid/usage/vue.md
 create mode 100644 core/src/components/icon/usage/vue.md
 create mode 100644 core/src/components/infinite-scroll-content/usage/vue.md
 create mode 100644 core/src/components/input/usage/vue.md
 create mode 100644 core/src/components/item-divider/usage/vue.md
 create mode 100644 core/src/components/item-group/usage/vue.md
 create mode 100644 core/src/components/label/usage/vue.md
 create mode 100644 core/src/components/note/usage/vue.md
 create mode 100644 core/src/components/radio-group/usage/vue.md
 create mode 100644 core/src/components/radio/usage/vue.md
 create mode 100644 core/src/components/range/usage/vue.md
 create mode 100644 core/src/components/reorder-group/usage/vue.md
 create mode 100644 core/src/components/searchbar/usage/vue.md
 create mode 100644 core/src/components/spinner/usage/vue.md
 create mode 100644 core/src/components/split-pane/usage/vue.md
 create mode 100644 core/src/components/tab-bar/usage/vue.md
 create mode 100644 core/src/components/tab-button/usage/vue.md
 create mode 100644 core/src/components/tabs/usage/vue.md
 create mode 100644 core/src/components/textarea/usage/vue.md

diff --git a/core/src/components/avatar/usage/vue.md b/core/src/components/avatar/usage/vue.md
new file mode 100644
index 00000000000..9de95d962de
--- /dev/null
+++ b/core/src/components/avatar/usage/vue.md
@@ -0,0 +1,21 @@
+```html
+<template>
+  <ion-avatar>
+    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+  </ion-avatar>
+
+  <ion-chip>
+    <ion-avatar>
+      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+    </ion-avatar>
+    <ion-label>Chip Avatar</ion-label>
+  </ion-chip>
+
+  <ion-item>
+    <ion-avatar slot="start">
+      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+    </ion-avatar>
+    <ion-label>Item Avatar</ion-label>
+  </ion-item>
+</template>
+```
\ No newline at end of file
diff --git a/core/src/components/badge/usage/vue.md b/core/src/components/badge/usage/vue.md
new file mode 100644
index 00000000000..018e8630bd9
--- /dev/null
+++ b/core/src/components/badge/usage/vue.md
@@ -0,0 +1,24 @@
+```html
+<template>
+  <!-- Default -->
+  <ion-badge>99</ion-badge>
+
+  <!-- Colors -->
+  <ion-badge color="primary">11</ion-badge>
+  <ion-badge color="secondary">22</ion-badge>
+  <ion-badge color="tertiary">33</ion-badge>
+  <ion-badge color="success">44</ion-badge>
+  <ion-badge color="warning">55</ion-badge>
+  <ion-badge color="danger">66</ion-badge>
+  <ion-badge color="light">77</ion-badge>
+  <ion-badge color="medium">88</ion-badge>
+  <ion-badge color="dark">99</ion-badge>
+
+  <!-- Item with badge on left and right -->
+  <ion-item>
+    <ion-badge slot="start">11</ion-badge>
+    <ion-label>My Item</ion-label>
+    <ion-badge slot="end">22</ion-badge>
+  </ion-item>
+</template>
+```
\ No newline at end of file
diff --git a/core/src/components/button/usage/vue.md b/core/src/components/button/usage/vue.md
new file mode 100644
index 00000000000..4d7f55f453b
--- /dev/null
+++ b/core/src/components/button/usage/vue.md
@@ -0,0 +1,52 @@
+```html
+<template>
+  <!-- Default -->
+  <ion-button>Default</ion-button>
+
+  <!-- Anchor -->
+  <ion-button href="#">Anchor</ion-button>
+
+  <!-- Colors -->
+  <ion-button color="primary">Primary</ion-button>
+  <ion-button color="secondary">Secondary</ion-button>
+  <ion-button color="tertiary">Tertiary</ion-button>
+  <ion-button color="success">Success</ion-button>
+  <ion-button color="warning">Warning</ion-button>
+  <ion-button color="danger">Danger</ion-button>
+  <ion-button color="light">Light</ion-button>
+  <ion-button color="medium">Medium</ion-button>
+  <ion-button color="dark">Dark</ion-button>
+
+  <!-- Expand -->
+  <ion-button expand="full">Full Button</ion-button>
+  <ion-button expand="block">Block Button</ion-button>
+
+  <!-- Round -->
+  <ion-button shape="round">Round Button</ion-button>
+
+  <!-- Fill -->
+  <ion-button expand="full" fill="outline">Outline + Full</ion-button>
+  <ion-button expand="block" fill="outline">Outline + Block</ion-button>
+  <ion-button shape="round" fill="outline">Outline + Round</ion-button>
+
+  <!-- Icons -->
+  <ion-button>
+    <ion-icon slot="start" name="star"></ion-icon>
+    Left Icon
+  </ion-button>
+
+  <ion-button>
+    Right Icon
+    <ion-icon slot="end" name="star"></ion-icon>
+  </ion-button>
+
+  <ion-button>
+    <ion-icon slot="icon-only" name="star"></ion-icon>
+  </ion-button>
+
+  <!-- Sizes -->
+  <ion-button size="large">Large</ion-button>
+  <ion-button>Default</ion-button>
+  <ion-button size="small">Small</ion-button>
+</template>
+```
diff --git a/core/src/components/card/usage/vue.md b/core/src/components/card/usage/vue.md
new file mode 100644
index 00000000000..2e52aa4333c
--- /dev/null
+++ b/core/src/components/card/usage/vue.md
@@ -0,0 +1,50 @@
+```html
+<template>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+      <ion-card-title>Card Title</ion-card-title>
+    </ion-card-header>
+
+    <ion-card-content>
+      Keep close to Nature's heart... and break clear away, once in awhile,
+      and climb a mountain or spend a week in the woods. Wash your spirit clean.
+    </ion-card-content>
+  </ion-card>
+
+  <ion-card>
+    <ion-item>
+      <ion-icon name="pin" slot="start"></ion-icon>
+      <ion-label>ion-item in a card, icon left, button right</ion-label>
+      <ion-button fill="outline" slot="end">View</ion-button>
+    </ion-item>
+
+    <ion-card-content>
+      This is content, without any paragraph or header tags,
+      within an ion-card-content element.
+    </ion-card-content>
+  </ion-card>
+
+  <ion-card>
+    <ion-item href="#" class="activated">
+      <ion-icon name="wifi" slot="start"></ion-icon>
+      <ion-label>Card Link Item 1 .activated</ion-label>
+    </ion-item>
+
+    <ion-item href="#">
+      <ion-icon name="wine" slot="start"></ion-icon>
+      <ion-label>Card Link Item 2</ion-label>
+    </ion-item>
+
+    <ion-item class="activated">
+      <ion-icon name="warning" slot="start"></ion-icon>
+      <ion-label>Card Button Item 1 .activated</ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-icon name="walk" slot="start"></ion-icon>
+      <ion-label>Card Button Item 2</ion-label>
+    </ion-item>
+  </ion-card>
+</template>
+```
\ No newline at end of file
diff --git a/core/src/components/chip/usage/vue.md b/core/src/components/chip/usage/vue.md
new file mode 100644
index 00000000000..f670b2d791f
--- /dev/null
+++ b/core/src/components/chip/usage/vue.md
@@ -0,0 +1,44 @@
+```html
+<template>
+  <ion-chip>
+    <ion-label>Default</ion-label>
+  </ion-chip>
+
+  <ion-chip>
+    <ion-label color="secondary">Secondary Label</ion-label>
+  </ion-chip>
+
+  <ion-chip color="secondary">
+    <ion-label color="dark">Secondary w/ Dark label</ion-label>
+  </ion-chip>
+
+  <ion-chip>
+    <ion-icon name="pin"></ion-icon>
+    <ion-label>Default</ion-label>
+  </ion-chip>
+
+  <ion-chip>
+    <ion-icon name="heart" color="dark"></ion-icon>
+    <ion-label>Default</ion-label>
+  </ion-chip>
+
+  <ion-chip>
+    <ion-label>Button Chip</ion-label>
+    <ion-icon name="close-circle"></ion-icon>
+  </ion-chip>
+
+  <ion-chip>
+    <ion-icon name="pin" color="primary"></ion-icon>
+    <ion-label>Icon Chip</ion-label>
+    <ion-icon name="close"></ion-icon>
+  </ion-chip>
+
+  <ion-chip>
+    <ion-avatar>
+      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+    </ion-avatar>
+    <ion-label>Avatar Chip</ion-label>
+    <ion-icon name="close-circle"></ion-icon>
+  </ion-chip>
+</template>
+```
diff --git a/core/src/components/fab-button/usage/vue.md b/core/src/components/fab-button/usage/vue.md
new file mode 100644
index 00000000000..92d1614eb0e
--- /dev/null
+++ b/core/src/components/fab-button/usage/vue.md
@@ -0,0 +1,25 @@
+```html
+<template>
+  <ion-content>
+
+    <!-- Fixed Floating Action Button that does not scroll with the content -->
+    <ion-fab>
+      <ion-fab-button>Button</ion-fab-button>
+    </ion-fab>
+
+    <!-- Default Floating Action Button that scrolls with the content.-->
+    <ion-fab-button>Default</ion-fab-button>
+
+    <!-- Mini -->
+    <ion-fab-button size="small">Mini</ion-fab-button>
+
+    <!-- Colors -->
+    <ion-fab-button color="primary">Primary</ion-fab-button>
+    <ion-fab-button color="secondary">Secondary</ion-fab-button>
+    <ion-fab-button color="danger">Danger</ion-fab-button>
+    <ion-fab-button color="light">Light</ion-fab-button>
+    <ion-fab-button color="dark">Dark</ion-fab-button>
+
+  </ion-content>
+</template>
+```
diff --git a/core/src/components/fab-list/usage/vue.md b/core/src/components/fab-list/usage/vue.md
new file mode 100644
index 00000000000..b8bdfbf97d4
--- /dev/null
+++ b/core/src/components/fab-list/usage/vue.md
@@ -0,0 +1,18 @@
+```html
+<template>
+  <ion-fab vertical="bottom" horizontal="end">
+    <ion-fab-button>Share</ion-fab-button>
+
+    <ion-fab-list side="top">
+      <ion-fab-button>Facebook</ion-fab-button>
+      <ion-fab-button>Twitter</ion-fab-button>
+      <ion-fab-button>Youtube</ion-fab-button>
+    </ion-fab-list>
+
+    <ion-fab-list side="start">
+      <ion-fab-button>Vimeo</ion-fab-button>
+    </ion-fab-list>
+
+  </ion-fab>
+</template>
+```
diff --git a/core/src/components/fab/usage/vue.md b/core/src/components/fab/usage/vue.md
new file mode 100644
index 00000000000..6c96bb671ff
--- /dev/null
+++ b/core/src/components/fab/usage/vue.md
@@ -0,0 +1,83 @@
+```html
+<template>
+  <ion-content>
+    <!-- fab placed to the top end -->
+    <ion-fab vertical="top" horizontal="end" slot="fixed">
+      <ion-fab-button>
+        <ion-icon name="add"></ion-icon>
+      </ion-fab-button>
+    </ion-fab>
+
+    <!-- fab placed to the bottom end -->
+    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+      <ion-fab-button>
+        <ion-icon name="arrow-dropleft"></ion-icon>
+      </ion-fab-button>
+    </ion-fab>
+
+    <!-- fab placed to the top start -->
+    <ion-fab vertical="top" horizontal="start" slot="fixed">
+      <ion-fab-button>
+        <ion-icon name="arrow-dropright"></ion-icon>
+      </ion-fab-button>
+    </ion-fab>
+
+    <!-- fab placed to the bottom start -->
+    <ion-fab vertical="bottom" horizontal="start" slot="fixed">
+      <ion-fab-button>
+        <ion-icon name="arrow-dropup"></ion-icon>
+      </ion-fab-button>
+    </ion-fab>
+
+    <!-- fab placed to the (vertical) center and start -->
+    <ion-fab vertical="center" horizontal="start" slot="fixed">
+      <ion-fab-button>
+        <ion-icon name="share"></ion-icon>
+      </ion-fab-button>
+    </ion-fab>
+
+    <!-- fab placed to the (vertical) center and end -->
+    <ion-fab vertical="center" horizontal="end" slot="fixed">
+      <ion-fab-button>
+        <ion-icon name="add"></ion-icon>
+      </ion-fab-button>
+    </ion-fab>
+
+    <!-- fab placed to the top and end and on the top edge of the content overlapping header -->
+    <ion-fab vertical="top" horizontal="end" edge slot="fixed">
+      <ion-fab-button>
+        <ion-icon name="person"></ion-icon>
+      </ion-fab-button>
+    </ion-fab>
+
+    <!-- fab placed to the bottom and start and on the bottom edge of the content overlapping footer with a list to the right -->
+    <ion-fab vertical="bottom" horizontal="start" edge slot="fixed">
+      <ion-fab-button>
+        <ion-icon name="settings"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-list side="end">
+        <ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
+      </ion-fab-list>
+    </ion-fab>
+
+    <!-- fab placed in the center of the content with a list on each side -->
+    <ion-fab vertical="center" horizontal="center" slot="fixed">
+      <ion-fab-button>
+        <ion-icon name="share"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-list side="top">
+        <ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
+      </ion-fab-list>
+      <ion-fab-list side="bottom">
+        <ion-fab-button><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
+      </ion-fab-list>
+      <ion-fab-list side="start">
+        <ion-fab-button><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
+      </ion-fab-list>
+      <ion-fab-list side="end">
+        <ion-fab-button><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
+      </ion-fab-list>
+    </ion-fab>
+  </ion-content>
+</template>
+```
diff --git a/core/src/components/grid/usage/vue.md b/core/src/components/grid/usage/vue.md
new file mode 100644
index 00000000000..96547bd35fc
--- /dev/null
+++ b/core/src/components/grid/usage/vue.md
@@ -0,0 +1,181 @@
+```html
+<template>
+  <ion-grid>
+    <ion-row>
+      <ion-col>
+        ion-col
+      </ion-col>
+      <ion-col>
+        ion-col
+      </ion-col>
+      <ion-col>
+        ion-col
+      </ion-col>
+      <ion-col>
+        ion-col
+      </ion-col>
+    </ion-row>
+
+    <ion-row>
+      <ion-col size="6">
+        ion-col [size="6"]
+      </ion-col>
+      <ion-col>
+        ion-col
+      </ion-col>
+      <ion-col>
+        ion-col
+      </ion-col>
+    </ion-row>
+
+    <ion-row>
+      <ion-col size="3">
+        ion-col [size="3"]
+      </ion-col>
+      <ion-col>
+        ion-col
+      </ion-col>
+      <ion-col size="3">
+        ion-col [size="3"]
+      </ion-col>
+    </ion-row>
+
+    <ion-row>
+      <ion-col size="3">
+        ion-col [size="3"]
+      </ion-col>
+      <ion-col size="3" offset="3">
+        ion-col [size="3"] [offset="3"]
+      </ion-col>
+    </ion-row>
+
+    <ion-row>
+      <ion-col>
+        ion-col
+      </ion-col>
+      <ion-col>
+        ion-col
+        <br>#
+      </ion-col>
+      <ion-col>
+        ion-col
+        <br>#
+        <br>#
+      </ion-col>
+      <ion-col>
+        ion-col
+        <br>#
+        <br>#
+        <br>#
+      </ion-col>
+    </ion-row>
+
+    <ion-row>
+      <ion-col align-self-start>
+        ion-col [start]
+      </ion-col>
+      <ion-col align-self-center>
+        ion-col [center]
+      </ion-col>
+      <ion-col align-self-end>
+        ion-col [end]
+      </ion-col>
+      <ion-col>
+        ion-col
+        <br>#
+        <br>#
+      </ion-col>
+    </ion-row>
+
+    <ion-row align-items-start>
+      <ion-col>
+        [start] ion-col
+      </ion-col>
+      <ion-col>
+        [start] ion-col
+      </ion-col>
+      <ion-col align-self-end>
+        [start] ion-col [end]
+      </ion-col>
+      <ion-col>
+        ion-col
+        <br>#
+        <br>#
+      </ion-col>
+    </ion-row>
+
+    <ion-row align-items-center>
+      <ion-col>
+        [center] ion-col
+      </ion-col>
+      <ion-col>
+        [center] ion-col
+      </ion-col>
+      <ion-col>
+        [center] ion-col
+      </ion-col>
+      <ion-col>
+        ion-col
+        <br>#
+        <br>#
+      </ion-col>
+    </ion-row>
+
+    <ion-row align-items-end>
+      <ion-col>
+        [end] ion-col
+      </ion-col>
+      <ion-col align-self-start>
+        [end] ion-col [start]
+      </ion-col>
+      <ion-col>
+        [end] ion-col
+      </ion-col>
+      <ion-col>
+        ion-col
+        <br>#
+        <br>#
+      </ion-col>
+    </ion-row>
+
+    <ion-row>
+      <ion-col size="12" size-sm>
+        ion-col [size="12"] [size-sm]
+      </ion-col>
+      <ion-col size="12" size-sm>
+        ion-col [size="12"] [size-sm]
+      </ion-col>
+      <ion-col size="12" size-sm>
+        ion-col [size="12"] [size-sm]
+      </ion-col>
+      <ion-col size="12" size-sm>
+        ion-col [size="12"] [size-sm]
+      </ion-col>
+    </ion-row>
+
+    <ion-row>
+      <ion-col size="12" size-md>
+        ion-col [size="12"] [size-md]
+      </ion-col>
+      <ion-col size="12" size-md>
+        ion-col [size="12"] [size-md]
+      </ion-col>
+      <ion-col size="12" size-md>
+        ion-col [size="12"] [size-md]
+      </ion-col>
+      <ion-col size="12" size-md>
+        ion-col [size="12"] [size-md]
+      </ion-col>
+    </ion-row>
+
+    <ion-row>
+      <ion-col size="6" size-lg offset="3">
+        ion-col [size="6"] [size-lg] [offset="3"]
+      </ion-col>
+      <ion-col size="3" size-lg>
+        ion-col [size="3"] [size-lg]
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</template>
+```
\ No newline at end of file
diff --git a/core/src/components/icon/usage/vue.md b/core/src/components/icon/usage/vue.md
new file mode 100644
index 00000000000..79a66d8ec63
--- /dev/null
+++ b/core/src/components/icon/usage/vue.md
@@ -0,0 +1,20 @@
+```html
+<template>
+  <!-- automatically uses the correct "star" icon depending on the mode -->
+  <ion-icon name="star"></ion-icon>
+
+  <!-- explicitly set the icon for each mode -->
+  <ion-icon ios="ios-home" md="md-home"></ion-icon>
+
+  <!-- always use the same icon, no matter what the mode is -->
+  <ion-icon name="ios-clock"></ion-icon>
+  <ion-icon name="logo-twitter"></ion-icon>
+
+  <!-- use a custom svg icon -->
+  <ion-icon src="/path/to/external/file.svg"></ion-icon>
+
+  <!-- set the icon size -->
+  <ion-icon size="small" name="heart"></ion-icon>
+  <ion-icon size="large" name="heart"></ion-icon>
+</template>
+```
diff --git a/core/src/components/infinite-scroll-content/usage/vue.md b/core/src/components/infinite-scroll-content/usage/vue.md
new file mode 100644
index 00000000000..65e63e4686d
--- /dev/null
+++ b/core/src/components/infinite-scroll-content/usage/vue.md
@@ -0,0 +1,12 @@
+```html
+<template>
+  <ion-content>
+    <ion-infinite-scroll>
+      <ion-infinite-scroll-content
+        loadingSpinner="bubbles"
+        loadingText="Loading more data…">
+      </ion-infinite-scroll-content>
+    </ion-infinite-scroll>
+  </ion-content>
+</template>
+```
diff --git a/core/src/components/input/usage/vue.md b/core/src/components/input/usage/vue.md
new file mode 100644
index 00000000000..9be8fc34976
--- /dev/null
+++ b/core/src/components/input/usage/vue.md
@@ -0,0 +1,45 @@
+```html
+<template>
+  <!-- Default Input -->
+  <ion-input></ion-input>
+
+  <!-- Input with value -->
+  <ion-input value="custom"></ion-input>
+
+  <!-- Input with placeholder -->
+  <ion-input placeholder="Enter Input"></ion-input>
+
+  <!-- Input with clear button when there is a value -->
+  <ion-input clearInput value="clear me"></ion-input>
+
+  <!-- Number type input -->
+  <ion-input type="number" value="333"></ion-input>
+
+  <!-- Disabled input -->
+  <ion-input value="Disabled" disabled></ion-input>
+
+  <!-- Readonly input -->
+  <ion-input value="Readonly" readonly></ion-input>
+
+  <!-- Inputs with labels -->
+  <ion-item>
+    <ion-label>Default Label</ion-label>
+    <ion-input></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="floating">Floating Label</ion-label>
+    <ion-input></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="fixed">Fixed Label</ion-label>
+    <ion-input></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="stacked">Stacked Label</ion-label>
+    <ion-input></ion-input>
+  </ion-item>
+</template>
+```
\ No newline at end of file
diff --git a/core/src/components/item-divider/usage/vue.md b/core/src/components/item-divider/usage/vue.md
new file mode 100644
index 00000000000..03a1a2e2f4f
--- /dev/null
+++ b/core/src/components/item-divider/usage/vue.md
@@ -0,0 +1,42 @@
+```html
+<template>
+  <ion-item-divider>
+    <ion-label>
+      Basic Item Divider
+    </ion-label>
+  </ion-item-divider>
+
+  <ion-item-divider color="secondary">
+    <ion-label>
+      Secondary Item Divider
+    </ion-label>
+  </ion-item-divider>
+
+  <!-- Item Dividers in a List -->
+  <ion-list>
+    <ion-item-divider>
+      <ion-label>
+        Section A
+      </ion-label>
+    </ion-item-divider>
+
+    <ion-item><ion-label>A1</ion-label></ion-item>
+    <ion-item><ion-label>A2</ion-label></ion-item>
+    <ion-item><ion-label>A3</ion-label></ion-item>
+    <ion-item><ion-label>A4</ion-label></ion-item>
+    <ion-item><ion-label>A5</ion-label></ion-item>
+
+    <ion-item-divider>
+      <ion-label>
+        Section B
+      </ion-label>
+    </ion-item-divider>
+
+    <ion-item><ion-label>B1</ion-label></ion-item>
+    <ion-item><ion-label>B2</ion-label></ion-item>
+    <ion-item><ion-label>B3</ion-label></ion-item>
+    <ion-item><ion-label>B4</ion-label></ion-item>
+    <ion-item><ion-label>B5</ion-label></ion-item>
+  </ion-list>
+</template>
+```
diff --git a/core/src/components/item-group/usage/vue.md b/core/src/components/item-group/usage/vue.md
new file mode 100644
index 00000000000..bd00f5538b9
--- /dev/null
+++ b/core/src/components/item-group/usage/vue.md
@@ -0,0 +1,105 @@
+```html
+<template>
+  <ion-item-group>
+    <ion-item-divider>
+      <ion-label>A</ion-label>
+    </ion-item-divider>
+
+    <ion-item>
+      <ion-label>Angola</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Argentina</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Armenia</ion-label>
+    </ion-item>
+  </ion-item-group>
+
+  <ion-item-group>
+    <ion-item-divider>
+      <ion-label>B</ion-label>
+    </ion-item-divider>
+
+    <ion-item>
+      <ion-label>Bangladesh</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Belarus</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Belgium</ion-label>
+    </ion-item>
+  </ion-item-group>
+
+
+  <!-- They can also be used to group sliding items -->
+  <ion-item-group>
+    <ion-item-divider>
+      <ion-label>
+        Fruits
+      </ion-label>
+    </ion-item-divider>
+
+    <ion-item-sliding>
+      <ion-item>
+        <ion-label>
+          <h3>Grapes</h3>
+        </ion-label>
+      </ion-item>
+      <ion-item-options>
+        <ion-item-option>
+          Favorite
+        </ion-item-option>
+      </ion-item-options>
+    </ion-item-sliding>
+
+    <ion-item-sliding>
+      <ion-item>
+        <ion-label>
+          <h3>Apples</h3>
+        </ion-label>
+      </ion-item>
+      <ion-item-options>
+        <ion-item-option>
+          Favorite
+        </ion-item-option>
+      </ion-item-options>
+    </ion-item-sliding>
+  </ion-item-group>
+
+  <ion-item-group>
+    <ion-item-divider>
+      <ion-label>
+        Vegetables
+      </ion-label>
+    </ion-item-divider>
+
+    <ion-item-sliding>
+      <ion-item>
+        <ion-label>
+          <h3>Carrots</h3>
+        </ion-label>
+      </ion-item>
+      <ion-item-options>
+        <ion-item-option>
+          Favorite
+        </ion-item-option>
+      </ion-item-options>
+    </ion-item-sliding>
+
+    <ion-item-sliding>
+      <ion-item>
+        <ion-label>
+          <h3>Celery</h3>
+        </ion-label>
+      </ion-item>
+      <ion-item-options>
+        <ion-item-option>
+          Favorite
+        </ion-item-option>
+      </ion-item-options>
+    </ion-item-sliding>
+  </ion-item-group>
+</template>
+```
diff --git a/core/src/components/label/usage/vue.md b/core/src/components/label/usage/vue.md
new file mode 100644
index 00000000000..bcea9d344e3
--- /dev/null
+++ b/core/src/components/label/usage/vue.md
@@ -0,0 +1,56 @@
+```html
+<template>
+  <!-- Default Label -->
+  <ion-label>Label</ion-label>
+
+  <!-- Label Colors -->
+  <ion-label color="primary">Primary Label</ion-label>
+  <ion-label color="secondary">Secondary Label</ion-label>
+  <ion-label color="danger">Danger Label</ion-label>
+  <ion-label color="light">Light Label</ion-label>
+  <ion-label color="dark">Dark Label</ion-label>
+
+  <!-- Item Labels -->
+  <ion-item>
+    <ion-label>Default Item</ion-label>
+  </ion-item>
+
+  <ion-item text-wrap>
+    <ion-label>
+      Multi-line text that should wrap when it is too long
+      to fit on one line in the item.
+    </ion-label>
+  </ion-item>
+
+  <!-- Input Labels -->
+  <ion-item>
+    <ion-label>Default Input</ion-label>
+    <ion-input></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="fixed">Fixed</ion-label>
+    <ion-input></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="floating">Floating</ion-label>
+    <ion-input></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="stacked">Stacked</ion-label>
+    <ion-input></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Toggle</ion-label>
+    <ion-toggle slot="end" checked></ion-toggle>
+  </ion-item>
+
+  <ion-item>
+    <ion-checkbox slot="start" checked></ion-checkbox>
+    <ion-label>Checkbox</ion-label>
+  </ion-item>
+</template>
+```
diff --git a/core/src/components/note/usage/vue.md b/core/src/components/note/usage/vue.md
new file mode 100644
index 00000000000..1a9cde11a36
--- /dev/null
+++ b/core/src/components/note/usage/vue.md
@@ -0,0 +1,26 @@
+```html
+<template>
+  <!-- Default Note -->
+  <ion-note>Default Note</ion-note>
+
+  <!-- Note Colors -->
+  <ion-note color="primary">Primary Note</ion-note>
+  <ion-note color="secondary">Secondary Note</ion-note>
+  <ion-note color="danger">Danger Note</ion-note>
+  <ion-note color="light">Light Note</ion-note>
+  <ion-note color="dark">Dark Note</ion-note>
+
+  <!-- Notes in a List -->
+  <ion-list>
+    <ion-item>
+      <ion-label>Note (End)</ion-label>
+      <ion-note slot="end">On</ion-note>
+    </ion-item>
+
+    <ion-item>
+      <ion-note slot="start">Off</ion-note>
+      <ion-label>Note (Start)</ion-label>
+    </ion-item>
+  </ion-list>
+</template>
+```
diff --git a/core/src/components/radio-group/usage/vue.md b/core/src/components/radio-group/usage/vue.md
new file mode 100644
index 00000000000..ec9200a27a5
--- /dev/null
+++ b/core/src/components/radio-group/usage/vue.md
@@ -0,0 +1,36 @@
+```html
+<template>
+  <ion-list>
+    <ion-radio-group>
+      <ion-list-header>
+        Auto Manufacturers
+      </ion-list-header>
+
+      <ion-item>
+        <ion-label>Cord</ion-label>
+        <ion-radio value="cord"></ion-radio>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>Duesenberg</ion-label>
+        <ion-radio value="duesenberg"></ion-radio>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>Hudson</ion-label>
+        <ion-radio value="hudson"></ion-radio>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>Packard</ion-label>
+        <ion-radio value="packard"></ion-radio>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>Studebaker</ion-label>
+        <ion-radio value="studebaker"></ion-radio>
+      </ion-item>
+    </ion-radio-group>
+  </ion-list>
+</template>
+```
diff --git a/core/src/components/radio/usage/vue.md b/core/src/components/radio/usage/vue.md
new file mode 100644
index 00000000000..9cb96b058e8
--- /dev/null
+++ b/core/src/components/radio/usage/vue.md
@@ -0,0 +1,26 @@
+```html
+<template>
+  <ion-list>
+    <ion-radio-group>
+      <ion-list-header>
+        <ion-label>Name</ion-label>
+      </ion-list-header>
+
+      <ion-item>
+        <ion-label>Biff</ion-label>
+        <ion-radio slot="start" value="biff" checked></ion-radio>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>Griff</ion-label>
+        <ion-radio slot="start" value="griff"></ion-radio>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>Buford</ion-label>
+        <ion-radio slot="start" value="buford"></ion-radio>
+      </ion-item>
+    </ion-radio-group>
+  </ion-list>
+</template>
+```
diff --git a/core/src/components/range/usage/vue.md b/core/src/components/range/usage/vue.md
new file mode 100644
index 00000000000..6b3f749c25a
--- /dev/null
+++ b/core/src/components/range/usage/vue.md
@@ -0,0 +1,33 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-range color="danger" pin="true"></ion-range>
+    </ion-item>
+
+    <ion-item>
+      <ion-range min="-200" max="200" color="secondary">
+        <ion-label slot="start">-200</ion-label>
+        <ion-label slot="end">200</ion-label>
+      </ion-range>
+    </ion-item>
+
+  <ion-item>
+    <ion-range min="20" max="80" step="2">
+      <ion-icon size="small" slot="start" name="sunny"></ion-icon>
+      <ion-icon slot="end" name="sunny"></ion-icon>
+    </ion-range>
+  </ion-item>
+
+    <ion-item>
+      <ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
+    </ion-item>
+
+    <ion-item>
+      <ion-range dualKnobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
+    </ion-item>
+  </ion-list>
+</template>
+```
+
+
diff --git a/core/src/components/reorder-group/usage/vue.md b/core/src/components/reorder-group/usage/vue.md
new file mode 100644
index 00000000000..357f9dc35f6
--- /dev/null
+++ b/core/src/components/reorder-group/usage/vue.md
@@ -0,0 +1,51 @@
+```html
+<template>
+  <ion-content>
+    <ion-list>
+      <ion-reorder-group>
+
+        <ion-item>
+          <ion-label>
+            Item 1
+          </ion-label>
+          <ion-reorder slot="end"></ion-reorder>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            Item 2 (default ion-reorder slot="start")
+          </ion-label>
+          <ion-reorder slot="start"></ion-reorder>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            Item 3 (custom ion-reorder)
+          </ion-label>
+          <ion-reorder slot="end">
+            <ion-icon name="pizza"></ion-icon>
+          </ion-reorder>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            Item 4 (custom ion-reorder slot="start")
+          </ion-label>
+          <ion-reorder slot="start">
+            <ion-icon name="pizza"></ion-icon>
+          </ion-reorder>
+        </ion-item>
+
+        <ion-reorder>
+          <ion-item>
+            <ion-label>
+              Item 5 (the whole item can be dragged)
+            </ion-label>
+            </ion-item>
+        </ion-reorder>
+
+      </ion-reorder-group>
+    </ion-list>
+  </ion-content>
+</template>
+```
diff --git a/core/src/components/searchbar/usage/vue.md b/core/src/components/searchbar/usage/vue.md
new file mode 100644
index 00000000000..5674a611e63
--- /dev/null
+++ b/core/src/components/searchbar/usage/vue.md
@@ -0,0 +1,32 @@
+```html
+<template>
+  <!-- Default Searchbar -->
+  <ion-searchbar></ion-searchbar>
+
+  <!-- Searchbar with danger color -->
+  <ion-searchbar color="danger"></ion-searchbar>
+
+  <!-- Searchbar with value -->
+  <ion-searchbar value="Ionic"></ion-searchbar>
+
+  <!-- Searchbar with telephone type -->
+  <ion-searchbar type="tel"></ion-searchbar>
+
+  <!-- Searchbar with a cancel button and custom cancel button text -->
+  <ion-searchbar showCancelButton cancelButtonText="Custom Cancel"></ion-searchbar>
+
+  <!-- Searchbar with a custom debounce -->
+  <ion-searchbar debounce="500"></ion-searchbar>
+
+  <!-- Animated Searchbar -->
+  <ion-searchbar animated></ion-searchbar>
+
+  <!-- Searchbar with a placeholder -->
+  <ion-searchbar placeholder="Filter Schedules"></ion-searchbar>
+
+  <!-- Searchbar in a Toolbar -->
+  <ion-toolbar>
+    <ion-searchbar></ion-searchbar>
+  </ion-toolbar>
+</template>
+```
diff --git a/core/src/components/spinner/usage/vue.md b/core/src/components/spinner/usage/vue.md
new file mode 100644
index 00000000000..4ce102ebd95
--- /dev/null
+++ b/core/src/components/spinner/usage/vue.md
@@ -0,0 +1,27 @@
+```html
+<template>
+  <!-- Default Spinner -->
+  <ion-spinner></ion-spinner>
+
+  <!-- Lines -->
+  <ion-spinner name="lines"></ion-spinner>
+
+  <!-- Lines Small -->
+  <ion-spinner name="lines-small"></ion-spinner>
+
+  <!-- Dots -->
+  <ion-spinner name="dots"></ion-spinner>
+
+  <!-- Bubbles -->
+  <ion-spinner name="bubbles"></ion-spinner>
+
+  <!-- Circles -->
+  <ion-spinner name="circles"></ion-spinner>
+
+  <!-- Crescent -->
+  <ion-spinner name="crescent"></ion-spinner>
+
+  <!-- Paused Default Spinner -->
+  <ion-spinner paused></ion-spinner>
+</template>
+```
diff --git a/core/src/components/split-pane/usage/vue.md b/core/src/components/split-pane/usage/vue.md
new file mode 100644
index 00000000000..d9cdbc9b7c4
--- /dev/null
+++ b/core/src/components/split-pane/usage/vue.md
@@ -0,0 +1,17 @@
+```html
+<template>
+  <ion-split-pane contentId="menu-content">
+    <!--  our side menu  -->
+    <ion-menu contentId="menu-content">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Menu</ion-title>
+        </ion-toolbar>
+      </ion-header>
+    </ion-menu>
+
+    <!-- the main content -->
+    <ion-router-outlet id="menu-content"></ion-router-outlet>
+  </ion-split-pane>
+</template>
+```
diff --git a/core/src/components/tab-bar/usage/vue.md b/core/src/components/tab-bar/usage/vue.md
new file mode 100644
index 00000000000..35b60d7a46b
--- /dev/null
+++ b/core/src/components/tab-bar/usage/vue.md
@@ -0,0 +1,18 @@
+```html
+<template>
+  <ion-tabs>
+    <!-- Tab bar -->
+    <ion-tab-bar slot="bottom">
+      <ion-tab-button tab="account">
+        <ion-icon name="person"></ion-icon>
+      </ion-tab-button>
+      <ion-tab-button tab="contact">
+        <ion-icon name="call"></ion-icon>
+      </ion-tab-button>
+      <ion-tab-button tab="settings">
+        <ion-icon name="settings"></ion-icon>
+      </ion-tab-button>
+    </ion-tab-bar>
+  </ion-tabs>
+</template>
+```
\ No newline at end of file
diff --git a/core/src/components/tab-button/usage/vue.md b/core/src/components/tab-button/usage/vue.md
new file mode 100644
index 00000000000..c603abfc1e6
--- /dev/null
+++ b/core/src/components/tab-button/usage/vue.md
@@ -0,0 +1,29 @@
+```html
+<template>
+  <ion-tabs>
+
+    <ion-tab-bar slot="bottom">
+      <ion-tab-button tab="schedule">
+        <ion-icon name="calendar"></ion-icon>
+        <ion-label>Schedule</ion-label>
+      </ion-tab-button>
+
+      <ion-tab-button tab="speakers">
+        <ion-icon name="contacts"></ion-icon>
+        <ion-label>Speakers</ion-label>
+      </ion-tab-button>
+
+      <ion-tab-button tab="map">
+        <ion-icon name="map"></ion-icon>
+        <ion-label>Map</ion-label>
+      </ion-tab-button>
+
+      <ion-tab-button tab="about">
+        <ion-icon name="information-circle"></ion-icon>
+        <ion-label>About</ion-label>
+      </ion-tab-button>
+    </ion-tab-bar>
+
+  </ion-tabs>
+</template>
+```
diff --git a/core/src/components/tabs/usage/vue.md b/core/src/components/tabs/usage/vue.md
new file mode 100644
index 00000000000..696a74a2646
--- /dev/null
+++ b/core/src/components/tabs/usage/vue.md
@@ -0,0 +1,28 @@
+```html
+<template>
+  <ion-tabs>
+    <ion-tab-bar slot="bottom">
+      <ion-tab-button tab="schedule">
+        <ion-icon name="calendar"></ion-icon>
+        <ion-label>Schedule</ion-label>
+        <ion-badge>6</ion-badge>
+      </ion-tab-button>
+
+      <ion-tab-button tab="speakers">
+        <ion-icon name="contacts"></ion-icon>
+        <ion-label>Speakers</ion-label>
+      </ion-tab-button>
+
+      <ion-tab-button tab="map">
+        <ion-icon name="map"></ion-icon>
+        <ion-label>Map</ion-label>
+      </ion-tab-button>
+
+      <ion-tab-button tab="about">
+        <ion-icon name="information-circle"></ion-icon>
+        <ion-label>About</ion-label>
+      </ion-tab-button>
+    </ion-tab-bar>
+  </ion-tabs>
+</template>
+```
diff --git a/core/src/components/textarea/usage/vue.md b/core/src/components/textarea/usage/vue.md
new file mode 100644
index 00000000000..ace6b08b677
--- /dev/null
+++ b/core/src/components/textarea/usage/vue.md
@@ -0,0 +1,39 @@
+```html
+<template>
+  <!-- Default textarea -->
+  <ion-textarea></ion-textarea>
+
+  <!-- Textarea in an item with a placeholder -->
+  <ion-item>
+    <ion-textarea placeholder="Enter more information here..."></ion-textarea>
+  </ion-item>
+
+  <!-- Textarea in an item with a floating label -->
+  <ion-item>
+    <ion-label position="floating">Description</ion-label>
+    <ion-textarea></ion-textarea>
+  </ion-item>
+
+  <!-- Disabled and readonly textarea in an item with a stacked label -->
+  <ion-item>
+    <ion-label position="stacked">Summary</ion-label>
+    <ion-textarea
+      disabled
+      readonly
+      value="Ionic enables developers to build performant, high-quality mobile apps.">
+    </ion-textarea>
+  </ion-item>
+
+  <!-- Textarea that clears the value on edit -->
+  <ion-item>
+    <ion-label>Comment</ion-label>
+    <ion-textarea clearOnEdit="true"></ion-textarea>
+  </ion-item>
+
+  <!-- Textarea with custom number of rows and cols -->
+  <ion-item>
+    <ion-label>Notes</ion-label>
+    <ion-textarea rows="6" cols="20" placeholder="Enter any notes here..."></ion-textarea>
+  </ion-item>
+</template>
+```

From 954fa45c0ec5e18787103e9dbd6c9ced574f0755 Mon Sep 17 00:00:00 2001
From: Josh Thomas <josh@ionic.io>
Date: Thu, 28 Feb 2019 21:50:42 -0600
Subject: [PATCH 2/3] adding binding related usage docs.

---
 core/src/components/back-button/usage/vue.md  |  52 +++
 core/src/components/backdrop/usage/vue.md     |  33 ++
 core/src/components/buttons/usage/vue.md      |  39 ++
 core/src/components/checkbox/usage/vue.md     |  40 +++
 core/src/components/content/usage/vue.md      |  11 +
 core/src/components/datetime/usage/vue.md     | 113 ++++++
 core/src/components/img/usage/vue.md          |  12 +
 core/src/components/item-sliding/usage/vue.md |  19 +
 core/src/components/item/usage/vue.md         | 336 ++++++++++++++++++
 core/src/components/list/usage/vue.md         |  63 ++++
 core/src/components/menu/usage/vue.md         |  83 +++++
 core/src/components/refresher/usage/vue.md    |  38 ++
 .../components/segment-button/usage/vue.md    | 150 ++++++++
 core/src/components/segment/usage/vue.md      | 104 ++++++
 core/src/components/select/usage/vue.md       | 137 +++++++
 .../src/components/skeleton-text/usage/vue.md | 153 ++++++++
 core/src/components/slides/usage/vue.md       |  27 ++
 core/src/components/toggle/usage/vue.md       |  37 ++
 core/src/components/toolbar/usage/vue.md      | 157 ++++++++
 19 files changed, 1604 insertions(+)
 create mode 100644 core/src/components/back-button/usage/vue.md
 create mode 100644 core/src/components/backdrop/usage/vue.md
 create mode 100644 core/src/components/buttons/usage/vue.md
 create mode 100644 core/src/components/checkbox/usage/vue.md
 create mode 100644 core/src/components/content/usage/vue.md
 create mode 100644 core/src/components/datetime/usage/vue.md
 create mode 100644 core/src/components/img/usage/vue.md
 create mode 100644 core/src/components/item-sliding/usage/vue.md
 create mode 100644 core/src/components/item/usage/vue.md
 create mode 100644 core/src/components/list/usage/vue.md
 create mode 100644 core/src/components/menu/usage/vue.md
 create mode 100644 core/src/components/refresher/usage/vue.md
 create mode 100644 core/src/components/segment-button/usage/vue.md
 create mode 100644 core/src/components/segment/usage/vue.md
 create mode 100644 core/src/components/select/usage/vue.md
 create mode 100644 core/src/components/skeleton-text/usage/vue.md
 create mode 100644 core/src/components/slides/usage/vue.md
 create mode 100644 core/src/components/toggle/usage/vue.md
 create mode 100644 core/src/components/toolbar/usage/vue.md

diff --git a/core/src/components/back-button/usage/vue.md b/core/src/components/back-button/usage/vue.md
new file mode 100644
index 00000000000..aa226172c7f
--- /dev/null
+++ b/core/src/components/back-button/usage/vue.md
@@ -0,0 +1,52 @@
+```html
+<template>
+  <!-- Default back button -->
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-back-button></ion-back-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+
+  <!-- Back button with a default href -->
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-back-button defaultHref="home"></ion-back-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+
+  <!-- Back button with custom text and icon -->
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-back-button
+            :text="buttonText"
+            :icon="buttonIcon">
+        </ion-back-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+
+  <!-- Back button with no text and custom icon -->
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-back-button text="" icon="add"></ion-back-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+
+  <!-- Danger back button next to a menu button -->
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-menu-button></ion-menu-button>
+        <ion-back-button color="danger"></ion-back-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+</template>
+```
\ No newline at end of file
diff --git a/core/src/components/backdrop/usage/vue.md b/core/src/components/backdrop/usage/vue.md
new file mode 100644
index 00000000000..36fd4237dab
--- /dev/null
+++ b/core/src/components/backdrop/usage/vue.md
@@ -0,0 +1,33 @@
+```html
+<template>
+  <!-- Default backdrop -->
+  <ion-backdrop></ion-backdrop>
+
+  <!-- Backdrop that is not tappable -->
+  <ion-backdrop tappable="false"></ion-backdrop>
+
+  <!-- Backdrop that is not visible -->
+  <ion-backdrop visible="false"></ion-backdrop>
+
+  <!-- Backdrop with propagation -->
+  <ion-backdrop stopPropagation="false"></ion-backdrop>
+
+  <!-- Backdrop that sets dynamic properties -->
+  <ion-backdrop
+    :tappable="enableBackdropDismiss"
+    :visible="showBackdrop"
+    :stopPropagation="shouldPropagate">
+  </ion-backdrop>
+</template>
+
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+
+  @Component()
+  export default class Menu extends Vue {
+    backdropDismiss = false;
+    showBackdrop = false;
+    shouldPropagate = false;
+  }
+</script>
+```
\ No newline at end of file
diff --git a/core/src/components/buttons/usage/vue.md b/core/src/components/buttons/usage/vue.md
new file mode 100644
index 00000000000..7b926acd963
--- /dev/null
+++ b/core/src/components/buttons/usage/vue.md
@@ -0,0 +1,39 @@
+```html
+<template>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+    <ion-title>Back Button</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="secondary">
+      <ion-button>
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
+      </ion-button>
+      <ion-button>
+        <ion-icon slot="icon-only" name="search"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Default Buttons</ion-title>
+    <ion-buttons slot="primary">
+      <ion-button color="secondary">
+        <ion-icon slot="icon-only" name="more"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="primary">
+      <ion-button @click="clickedStar()">
+        <ion-icon slot="icon-only" name="star"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Right side menu toggle</ion-title>
+    <ion-buttons slot="end">
+      <ion-menu-button autoHide="false"></ion-menu-button>
+    </ion-buttons>
+  </ion-toolbar>
+</template>
+```
\ No newline at end of file
diff --git a/core/src/components/checkbox/usage/vue.md b/core/src/components/checkbox/usage/vue.md
new file mode 100644
index 00000000000..9cffcee32b2
--- /dev/null
+++ b/core/src/components/checkbox/usage/vue.md
@@ -0,0 +1,40 @@
+```html
+<template>
+  <!-- Default Checkbox -->
+  <ion-checkbox></ion-checkbox>
+
+  <!-- Disabled Checkbox -->
+  <ion-checkbox disabled="true"></ion-checkbox>
+
+  <!-- Checked Checkbox -->
+  <ion-checkbox checked="true"></ion-checkbox>
+
+  <!-- Checkbox Colors -->
+  <ion-checkbox color="primary"></ion-checkbox>
+  <ion-checkbox color="secondary"></ion-checkbox>
+  <ion-checkbox color="danger"></ion-checkbox>
+  <ion-checkbox color="light"></ion-checkbox>
+  <ion-checkbox color="dark"></ion-checkbox>
+
+  <!-- Checkboxes in a List -->
+  <ion-list>
+    <ion-item v-for="entry in form">
+      <ion-label>{{entry.val}}</ion-label>
+      <ion-checkbox slot="end" v-on:input="entry.checked = $event.target.value" v-bind:value="entry.isChecked"></ion-checkbox>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+
+  @Component()
+  export default class Menu extends Vue {
+    form = [
+      { val: 'Pepperoni', isChecked: true },
+      { val: 'Sausage', isChecked: false },
+      { val: 'Mushroom', isChecked: false }
+    ];
+  }
+</script>
+```
\ No newline at end of file
diff --git a/core/src/components/content/usage/vue.md b/core/src/components/content/usage/vue.md
new file mode 100644
index 00000000000..91de7bcc701
--- /dev/null
+++ b/core/src/components/content/usage/vue.md
@@ -0,0 +1,11 @@
+```html
+<template>
+  <ion-content
+    :scrollEvents="true"
+    @ionScrollStart="logScrollStart()"
+    @ionScroll="logScrolling($event)"
+    @ionScrollEnd="logScrollEnd()">
+  </ion-content>
+</template>
+```
+
diff --git a/core/src/components/datetime/usage/vue.md b/core/src/components/datetime/usage/vue.md
new file mode 100644
index 00000000000..15ba19be5e1
--- /dev/null
+++ b/core/src/components/datetime/usage/vue.md
@@ -0,0 +1,113 @@
+```html
+<template>
+  <ion-item>
+    <ion-label>MMMM</ion-label>
+    <ion-datetime displayFormat="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>MM DD YY</ion-label>
+    <ion-datetime displayFormat="MM DD YY" placeholder="Select Date"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Disabled</ion-label>
+    <ion-datetime id="dynamicDisabled" displayFormat="MM DD YY" disabled value="1994-12-15"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>YYYY</ion-label>
+    <ion-datetime :pickerOptions="customPickerOptions" placeholder="Custom Options" displayFormat="YYYY" min="1981" max="2002"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="stacked">MMMM YY</ion-label>
+    <ion-datetime displayFormat="MMMM YY" min="1989-06-04" max="2004-08-23" value="1994-12-15T13:47:20.789"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="floating">MM/DD/YYYY</ion-label>
+    <ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="floating">MM/DD/YYYY</ion-label>
+    <ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>DDD. MMM DD, YY (custom locale)</ion-label>
+    <ion-datetime value="1995-04-15" min="1990-02" max="2000"
+      :dayShortNames="customDayShortNames"
+      displayFormat="DDD. MMM DD, YY"
+      monthShortNames="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>D MMM YYYY H:mm</ion-label>
+    <ion-datetime displayFormat="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>DDDD MMM D, YYYY</ion-label>
+    <ion-datetime displayFormat="DDDD MMM D, YYYY" min="2005" max="2016" value="2008-09-02"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>HH:mm</ion-label>
+    <ion-datetime displayFormat="HH:mm"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>h:mm a</ion-label>
+    <ion-datetime displayFormat="h:mm a"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>hh:mm A (15 min steps)</ion-label>
+    <ion-datetime displayFormat="h:mm A" minuteValues="0,15,30,45"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Leap years, summer months</ion-label>
+    <ion-datetime displayFormat="MM/YYYY" pickerFormat="MMMM YYYY" monthValues="6,7,8" :yearValues="customYearValues"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Specific days/months/years</ion-label>
+    <ion-datetime monthValues="6,7,8" yearValues="2014,2015" dayValues="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14" displayFormat="DD/MMM/YYYY"></ion-datetime>
+  </ion-item>
+</template>
+
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+
+  @Component()
+  export default class Menu extends Vue {
+    customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];
+
+    customDayShortNames = [
+      's\u00f8n',
+      'man',
+      'tir',
+      'ons',
+      'tor',
+      'fre',
+      'l\u00f8r'
+    ];
+
+    customPickerOptions = {
+      buttons: [{
+        text: 'Save',
+        handler: () => console.log('Clicked Save!')
+      }, {
+        text: 'Log',
+        handler: () => {
+          console.log('Clicked Log. Do not Dismiss.');
+          return false;
+        }
+      }]
+    }
+  }
+</script>
+```
\ No newline at end of file
diff --git a/core/src/components/img/usage/vue.md b/core/src/components/img/usage/vue.md
new file mode 100644
index 00000000000..2bf18bbca66
--- /dev/null
+++ b/core/src/components/img/usage/vue.md
@@ -0,0 +1,12 @@
+```html
+<template>
+  <ion-list>
+    <ion-item v-for="item in items" :key="item.src">
+      <ion-thumbnail slot="start">
+        <ion-img :src="item.src"></ion-img>
+      </ion-thumbnail>
+      <ion-label>{{item.text}}</ion-label>
+    </ion-item>
+  </ion-list>
+</template>
+```
diff --git a/core/src/components/item-sliding/usage/vue.md b/core/src/components/item-sliding/usage/vue.md
new file mode 100644
index 00000000000..3726ec0841e
--- /dev/null
+++ b/core/src/components/item-sliding/usage/vue.md
@@ -0,0 +1,19 @@
+```html
+<template>
+  <ion-list>
+    <ion-item-sliding>
+      <ion-item>
+        <ion-label>Item</ion-label>
+      </ion-item>
+      <ion-item-options side="start">
+        <ion-item-option @click="favorite(item)">Favorite</ion-item-option>
+        <ion-item-option color="danger" @click="share(item)">Share</ion-item-option>
+      </ion-item-options>
+
+      <ion-item-options side="end">
+        <ion-item-option @click="unread(item)">Unread</ion-item-option>
+      </ion-item-options>
+    </ion-item-sliding>
+  </ion-list>
+</template>
+```
diff --git a/core/src/components/item/usage/vue.md b/core/src/components/item/usage/vue.md
new file mode 100644
index 00000000000..c3959e221f0
--- /dev/null
+++ b/core/src/components/item/usage/vue.md
@@ -0,0 +1,336 @@
+Basic Usage
+
+```html
+<template>
+  <!-- Default Item -->
+  <ion-item>
+    <ion-label>
+      Item
+    </ion-label>
+  </ion-item>
+
+  <!-- Item as a Button -->
+  <ion-item @click="buttonClick()">
+    <ion-label>
+      Button Item
+    </ion-label>
+  </ion-item>
+
+  <!-- Item as an Anchor -->
+  <ion-item href="https://www.ionicframework.com">
+    <ion-label>
+      Anchor Item
+    </ion-label>
+  </ion-item>
+
+  <ion-item color="secondary">
+    <ion-label>
+      Secondary Color Item
+    </ion-label>
+  </ion-item>
+</template>
+```
+
+Detail Arrows
+
+```html
+<template>
+  <ion-item detail>
+    <ion-label>
+      Standard Item with Detail Arrow
+    </ion-label>
+  </ion-item>
+
+  <ion-item @click="buttonClick()" detail>
+    <ion-label>
+      Button Item with Detail Arrow
+    </ion-label>
+  </ion-item>
+
+  <ion-item detail="false" href="https://www.ionicframework.com">
+    <ion-label>
+      Anchor Item with no Detail Arrow
+    </ion-label>
+  </ion-item>
+</template>
+```
+
+List Items
+
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-label>
+        Item
+      </ion-label>
+    </ion-item>
+
+    <ion-item lines="none">
+      <ion-label>
+        No Lines Item
+      </ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-label text-wrap>
+      Multiline text that should wrap when it is too long
+      to fit on one line in the item.
+      </ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-label text-wrap>
+        <ion-text color="primary">
+          <h3>H3 Primary Title</h3>
+        </ion-text>
+        <p>Paragraph line 1</p>
+        <ion-text color="secondary">
+          <p>Paragraph line 2 secondary</p>
+        </ion-text>
+      </ion-label>
+    </ion-item>
+
+    <ion-item lines="full">
+      <ion-label>
+        Item with Full Lines
+      </ion-label>
+    </ion-item>
+
+  </ion-list>
+</template>
+```
+
+Item Lines
+
+```html
+<template>
+  <!-- Item Inset Lines -->
+  <ion-item lines="inset">
+    <ion-label>Item Lines Inset</ion-label>
+  </ion-item>
+
+  <!-- Item Full Lines -->
+  <ion-item lines="full">
+    <ion-label>Item Lines Full</ion-label>
+  </ion-item>
+
+  <!-- Item None Lines -->
+  <ion-item lines="none">
+    <ion-label>Item Lines None</ion-label>
+  </ion-item>
+
+  <!-- List Full Lines -->
+  <ion-list lines="full">
+    <ion-item>
+      <ion-label>Full Lines Item 1</ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Full Lines Item 2</ion-label>
+    </ion-item>
+  </ion-list>
+
+  <!-- List Inset Lines -->
+  <ion-list lines="inset">
+    <ion-item>
+      <ion-label>Inset Lines Item 1</ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Inset Lines Item 2</ion-label>
+    </ion-item>
+  </ion-list>
+
+  <!-- List No Lines -->
+  <ion-list lines="none">
+    <ion-item>
+      <ion-label>No lines Item 1</ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>No lines Item 2</ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>No lines Item 3</ion-label>
+    </ion-item>
+  </ion-list>
+</template>
+```
+
+
+Media Items
+
+```html
+<template>
+  <ion-item @click="testClick()">
+    <ion-avatar slot="start">
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+    </ion-avatar>
+    <ion-label>
+      Avatar Start, Button Item
+    </ion-label>
+  </ion-item>
+
+  <ion-item href="#">
+    <ion-label>
+      Thumbnail End, Anchor Item
+    </ion-label>
+    <ion-thumbnail slot="end">
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+    </ion-thumbnail>
+  </ion-item>
+
+  <ion-item>
+    <ion-thumbnail slot="start">
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+    </ion-thumbnail>
+    <ion-label>
+      <h2>H2 Title Text</h2>
+      <p>Button on right</p>
+    </ion-label>
+    <ion-button fill="outline" slot="end">View</ion-button>
+  </ion-item>
+
+  <ion-item @click="testClick()">
+    <ion-thumbnail slot="start">
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+    </ion-thumbnail>
+    <ion-label>
+      <h3>H3 Title Text</h3>
+      <p>Icon on right</p>
+    </ion-label>
+    <ion-icon name="close-circle" slot="end"></ion-icon>
+  </ion-item>
+</template>
+```
+
+Buttons in Items
+
+```html
+<template>
+  <ion-item>
+    <ion-button slot="start">
+      Start
+    </ion-button>
+    <ion-label>Button Start/End</ion-label>
+    <ion-button slot="end">
+      End
+    </ion-button>
+  </ion-item>
+
+  <ion-item>
+    <ion-button slot="start">
+      Start Icon
+      <ion-icon name="home" slot="end"></ion-icon>
+    </ion-button>
+    <ion-label>Buttons with Icons</ion-label>
+    <ion-button slot="end">
+      <ion-icon name="star" slot="end"></ion-icon>
+      End Icon
+    </ion-button>
+  </ion-item>
+
+  <ion-item>
+    <ion-button slot="start">
+      <ion-icon slot="icon-only" name="navigate"></ion-icon>
+    </ion-button>
+    <ion-label>Icon only Buttons</ion-label>
+    <ion-button slot="end">
+      <ion-icon slot="icon-only" name="star"></ion-icon>
+    </ion-button>
+  </ion-item>
+</template>
+```
+
+Icons in Items
+
+```html
+<template>
+  <ion-item>
+    <ion-label>
+      Icon End
+    </ion-label>
+    <ion-icon name="information-circle" slot="end"></ion-icon>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>
+      Large Icon End
+    </ion-label>
+    <ion-icon name="information-circle" size="large" slot="end"></ion-icon>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>
+      Small Icon End
+    </ion-label>
+    <ion-icon name="information-circle" size="small" slot="end"></ion-icon>
+  </ion-item>
+
+  <ion-item>
+    <ion-icon name="star" slot="start"></ion-icon>
+    <ion-label>
+      Icon Start
+    </ion-label>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>
+      Two Icons End
+    </ion-label>
+    <ion-icon name="checkmark-circle" slot="end"></ion-icon>
+    <ion-icon name="shuffle" slot="end"></ion-icon>
+  </ion-item>
+</template>
+```
+
+Item Inputs
+
+```html
+<template>
+  <ion-item>
+    <ion-label position="floating">Datetime</ion-label>
+    <ion-datetime></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="floating">Select</ion-label>
+    <ion-select>
+      <ion-select-option value="">No Game Console</ion-select-option>
+      <ion-select-option value="nes">NES</ion-select-option>
+      <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
+      <ion-select-option value="ps">PlayStation</ion-select-option>
+      <ion-select-option value="genesis">Sega Genesis</ion-select-option>
+      <ion-select-option value="saturn">Sega Saturn</ion-select-option>
+      <ion-select-option value="snes">SNES</ion-select-option>
+    </ion-select>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Toggle</ion-label>
+    <ion-toggle slot="end"></ion-toggle>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="floating">Floating Input</ion-label>
+    <ion-input></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Input (placeholder)</ion-label>
+    <ion-input placeholder="Placeholder"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Checkbox</ion-label>
+    <ion-checkbox slot="start"></ion-checkbox>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Range</ion-label>
+    <ion-range></ion-range>
+  </ion-item>
+</template>
+```
diff --git a/core/src/components/list/usage/vue.md b/core/src/components/list/usage/vue.md
new file mode 100644
index 00000000000..55c78a0fd0b
--- /dev/null
+++ b/core/src/components/list/usage/vue.md
@@ -0,0 +1,63 @@
+```html
+<template>
+  <!-- List of Text Items -->
+  <ion-list>
+    <ion-item>
+      <ion-label>Pokémon Yellow</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Mega Man X</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>The Legend of Zelda</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Pac-Man</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Super Mario World</ion-label>
+    </ion-item>
+  </ion-list>
+
+  <!-- List of Input Items -->
+  <ion-list>
+    <ion-item>
+      <ion-label>Input</ion-label>
+      <ion-input></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-label>Toggle</ion-label>
+      <ion-toggle slot="end"></ion-toggle>
+    </ion-item>
+    <ion-item>
+      <ion-label>Radio</ion-label>
+      <ion-radio slot="end"></ion-radio>
+    </ion-item>
+    <ion-item>
+      <ion-label>Checkbox</ion-label>
+      <ion-checkbox slot="start"></ion-checkbox>
+    </ion-item>
+  </ion-list>
+
+  <!-- List of Sliding Items -->
+  <ion-list>
+    <ion-item-sliding>
+      <ion-item>
+        <ion-label>Item</ion-label>
+      </ion-item>
+      <ion-item-options side="end">
+        <ion-item-option @click="unread(item)">Unread</ion-item-option>
+      </ion-item-options>
+    </ion-item-sliding>
+
+    <ion-item-sliding>
+      <ion-item>
+        <ion-label>Item</ion-label>
+      </ion-item>
+      <ion-item-options side="end">
+        <ion-item-option @click="unread(item)">Unread</ion-item-option>
+      </ion-item-options>
+    </ion-item-sliding>
+  </ion-list>
+</template>
+```
\ No newline at end of file
diff --git a/core/src/components/menu/usage/vue.md b/core/src/components/menu/usage/vue.md
new file mode 100644
index 00000000000..c7c320064cd
--- /dev/null
+++ b/core/src/components/menu/usage/vue.md
@@ -0,0 +1,83 @@
+```html
+<template>
+  <ion-menu side="start" menuId="first">
+    <ion-header>
+      <ion-toolbar color="primary">
+        <ion-title>Start Menu</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <ion-list>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-menu>
+
+  <ion-menu side="start" menuId="custom" class="my-custom-menu">
+    <ion-header>
+      <ion-toolbar color="tertiary">
+        <ion-title>Custom Menu</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <ion-list>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-menu>
+
+  <ion-menu side="end" type="push">
+    <ion-header>
+      <ion-toolbar color="danger">
+        <ion-title>End Menu</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <ion-list>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-menu>
+
+  <ion-router-outlet main></ion-router-outlet>
+</template>
+<style>
+.my-custom-menu {
+  --width: 500px;
+}
+</style>
+
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+
+  @Component()
+  export default class MenuExample extends Vue {
+
+    openFirst() {
+      this.menu.enable(true, 'first');
+      this.menu.open('first');
+    }
+
+    openEnd() {
+      this.menu.open('end');
+    }
+
+    openCustom() {
+      this.menu.enable(true, 'custom');
+      this.menu.open('custom');
+    }
+  }
+</script>
+```
\ No newline at end of file
diff --git a/core/src/components/refresher/usage/vue.md b/core/src/components/refresher/usage/vue.md
new file mode 100644
index 00000000000..cdb38520f1c
--- /dev/null
+++ b/core/src/components/refresher/usage/vue.md
@@ -0,0 +1,38 @@
+```html
+<template>
+  <!-- Default Refresher -->
+  <ion-content>
+    <ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
+      <ion-refresher-content></ion-refresher-content>
+    </ion-refresher>
+  </ion-content>
+
+  <!-- Custom Refresher Content -->
+  <ion-content>
+    <ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
+      <ion-refresher-content
+        pullingIcon="arrow-dropdown"
+        pullingText="Pull to refresh"
+        refreshingSpinner="circles"
+        refreshingText="Refreshing...">
+      </ion-refresher-content>
+    </ion-refresher>
+  </ion-content>
+</template>
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+
+  @Component()
+  export default class Menu extends Vue {
+
+    doRefresh(event) {
+      console.log('Begin async operation');
+
+      setTimeout(() => {
+        console.log('Async operation has ended');
+        event.target.complete();
+      }, 2000);
+    }
+  }
+</script>
+```
diff --git a/core/src/components/segment-button/usage/vue.md b/core/src/components/segment-button/usage/vue.md
new file mode 100644
index 00000000000..354d6f0b53e
--- /dev/null
+++ b/core/src/components/segment-button/usage/vue.md
@@ -0,0 +1,150 @@
+```html
+<template>
+  <!-- Segment buttons with text and click listeners -->
+  <ion-segment>
+    <ion-segment-button @ionSelect="segmentButtonClicked($event)">
+      <ion-label>Friends</ion-label>
+    </ion-segment-button>
+    <ion-segment-button @ionSelect="segmentButtonClicked($event)">
+      <ion-label>Enemies</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+
+  <!-- Segment buttons with the first checked and the last disabled -->
+  <ion-segment>
+    <ion-segment-button checked>
+      <ion-label>Paid</ion-label>
+    </ion-segment-button>
+    <ion-segment-button>
+      <ion-label>Free</ion-label>
+    </ion-segment-button>
+    <ion-segment-button disabled>
+      <ion-label>Top</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+
+  <!-- Segment buttons with values and icons -->
+  <ion-segment>
+    <ion-segment-button value="camera">
+      <ion-icon name="camera"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button value="bookmark">
+      <ion-icon name="bookmark"></ion-icon>
+    </ion-segment-button>
+  </ion-segment>
+
+  <!-- Segment with a value that checks the last button -->
+  <ion-segment value="shared">
+    <ion-segment-button value="bookmarks">
+      <ion-label>Bookmarks</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="reading">
+      <ion-label>Reading List</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="shared">
+      <ion-label>Shared Links</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+
+  <!-- Label only -->
+  <ion-segment>
+    <ion-segment-button checked>
+      <ion-label>Item One</ion-label>
+    </ion-segment-button>
+    <ion-segment-button>
+      <ion-label>Item Two</ion-label>
+    </ion-segment-button>
+    <ion-segment-button>
+      <ion-label>Item Three</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+
+  <!-- Icon only -->
+  <ion-segment>
+    <ion-segment-button>
+      <ion-icon name="call"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button checked>
+      <ion-icon name="heart"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button>
+      <ion-icon name="pin"></ion-icon>
+    </ion-segment-button>
+  </ion-segment>
+
+  <!-- Icon top -->
+  <ion-segment>
+    <ion-segment-button>
+      <ion-label>Item One</ion-label>
+      <ion-icon name="call"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button checked>
+      <ion-label>Item Two</ion-label>
+      <ion-icon name="heart"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button>
+      <ion-label>Item Three</ion-label>
+      <ion-icon name="pin"></ion-icon>
+    </ion-segment-button>
+  </ion-segment>
+
+  <!-- Icon bottom -->
+  <ion-segment>
+    <ion-segment-button checked layout="icon-bottom">
+      <ion-icon name="call"></ion-icon>
+      <ion-label>Item One</ion-label>
+    </ion-segment-button>
+    <ion-segment-button layout="icon-bottom">
+      <ion-icon name="heart"></ion-icon>
+      <ion-label>Item Two</ion-label>
+    </ion-segment-button>
+    <ion-segment-button layout="icon-bottom">
+      <ion-icon name="pin"></ion-icon>
+      <ion-label>Item Three</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+
+  <!-- Icon start -->
+  <ion-segment>
+    <ion-segment-button checked layout="icon-start">
+      <ion-label>Item One</ion-label>
+      <ion-icon name="call"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button layout="icon-start">
+      <ion-label>Item Two</ion-label>
+      <ion-icon name="heart"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button layout="icon-start">
+      <ion-label>Item Three</ion-label>
+      <ion-icon name="pin"></ion-icon>
+    </ion-segment-button>
+  </ion-segment>
+
+  <!-- Icon end -->
+  <ion-segment>
+    <ion-segment-button checked layout="icon-end">
+      <ion-icon name="call"></ion-icon>
+      <ion-label>Item One</ion-label>
+    </ion-segment-button>
+    <ion-segment-button disabled layout="icon-end">
+      <ion-icon name="heart"></ion-icon>
+      <ion-label>Item Two</ion-label>
+    </ion-segment-button>
+    <ion-segment-button layout="icon-end">
+      <ion-icon name="pin"></ion-icon>
+      <ion-label>Item Three</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+</template>
+
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+
+  @Component()
+  export default class MenuExample extends Vue {
+    segmentButtonClicked(ev: any) {
+      console.log('Segment button clicked', ev);
+    }
+  }
+</script>
+```
diff --git a/core/src/components/segment/usage/vue.md b/core/src/components/segment/usage/vue.md
new file mode 100644
index 00000000000..0c564b223b9
--- /dev/null
+++ b/core/src/components/segment/usage/vue.md
@@ -0,0 +1,104 @@
+```html
+<template>
+  <!-- Default Segment -->
+  <ion-segment @ionChange="segmentChanged($event)">
+    <ion-segment-button value="friends">
+      <ion-label>Friends</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="enemies">
+      <ion-label>Enemies</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+
+  <!-- Disabled Segment -->
+  <ion-segment @ionChange="segmentChanged($event)" disabled>
+    <ion-segment-button value="sunny" checked>
+      <ion-label>Sunny</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="rainy">
+      <ion-label>Rainy</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+
+  <!-- Segment with anchors -->
+  <ion-segment @ionChange="segmentChanged($event)">
+    <ion-segment-button href="#dogs" value="dogs">
+      <ion-label>Dogs</ion-label>
+    </ion-segment-button>
+    <ion-segment-button href="#cats" value="cats">
+      <ion-label>Cats</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+
+  <!-- Scrollable Segment -->
+  <ion-segment scrollable>
+    <ion-segment-button>
+      <ion-icon name="home"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button checked>
+      <ion-icon name="heart"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button>
+      <ion-icon name="pin"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button>
+      <ion-icon name="star"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button>
+      <ion-icon name="call"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button>
+      <ion-icon name="globe"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button>
+      <ion-icon name="basket"></ion-icon>
+    </ion-segment-button>
+  </ion-segment>
+
+  <!-- Segment with secondary color -->
+  <ion-segment @ionChange="segmentChanged($event)" color="secondary">
+    <ion-segment-button value="standard">
+      <ion-label>Standard</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="hybrid">
+      <ion-label>Hybrid</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="sat">
+      <ion-label>Satellite</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+
+  <!-- Segment in a toolbar -->
+  <ion-toolbar>
+    <ion-segment @ionChange="segmentChanged($event)">
+      <ion-segment-button value="camera">
+        <ion-icon name="camera"></ion-icon>
+      </ion-segment-button>
+      <ion-segment-button value="bookmark">
+        <ion-icon name="bookmark"></ion-icon>
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+
+  <!-- Segment with default selection -->
+  <ion-segment @ionChange="segmentChanged($event)" value="javascript">
+    <ion-segment-button value="python">
+      <ion-label>Python</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="javascript">
+      <ion-label>Javascript</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+</template>
+
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+
+  @Component()
+  export default class MenuExample extends Vue {
+    segmentChanged(ev: any) {
+      console.log('Segment changed', ev);
+    }
+  }
+</script>
+```
diff --git a/core/src/components/select/usage/vue.md b/core/src/components/select/usage/vue.md
new file mode 100644
index 00000000000..f19b9f5c91d
--- /dev/null
+++ b/core/src/components/select/usage/vue.md
@@ -0,0 +1,137 @@
+## Single Selection
+
+```html
+<template>
+  <ion-list>
+    <ion-list-header>Single Selection</ion-list-header>
+
+    <ion-item>
+      <ion-label>Gender</ion-label>
+      <ion-select placeholder="Select One">
+        <ion-select-option value="f">Female</ion-select-option>
+        <ion-select-option value="m">Male</ion-select-option>
+      </ion-select>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Hair Color</ion-label>
+      <ion-select value="brown" okText="Okay" cancelText="Dismiss">
+        <ion-select-option value="brown">Brown</ion-select-option>
+        <ion-select-option value="blonde">Blonde</ion-select-option>
+        <ion-select-option value="black">Black</ion-select-option>
+        <ion-select-option value="red">Red</ion-select-option>
+      </ion-select>
+    </ion-item>
+
+  </ion-list>
+</template>
+```
+
+## Multiple Selection
+
+```html
+<template>
+  <ion-list>
+    <ion-list-header>Multiple Selection</ion-list-header>
+
+    <ion-item>
+      <ion-label>Toppings</ion-label>
+      <ion-select multiple="true" cancelText="Nah" okText="Okay!">
+        <ion-select-option value="bacon">Bacon</ion-select-option>
+        <ion-select-option value="olives">Black Olives</ion-select-option>
+        <ion-select-option value="xcheese">Extra Cheese</ion-select-option>
+        <ion-select-option value="peppers">Green Peppers</ion-select-option>
+        <ion-select-option value="mushrooms">Mushrooms</ion-select-option>
+        <ion-select-option value="onions">Onions</ion-select-option>
+        <ion-select-option value="pepperoni">Pepperoni</ion-select-option>
+        <ion-select-option value="pineapple">Pineapple</ion-select-option>
+        <ion-select-option value="sausage">Sausage</ion-select-option>
+        <ion-select-option value="Spinach">Spinach</ion-select-option>
+      </ion-select>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Pets</ion-label>
+      <ion-select multiple="true">
+        <ion-select-option value="bird" selected>Bird</ion-select-option>
+        <ion-select-option value="cat">Cat</ion-select-option>
+        <ion-select-option value="dog" selected>Dog</ion-select-option>
+        <ion-select-option value="honeybadger">Honey Badger</ion-select-option>
+      </ion-select>
+    </ion-item>
+  </ion-list>
+</template>
+```
+
+## Interface Options
+
+```html
+<template>
+  <ion-list>
+    <ion-list-header>Interface Options</ion-list-header>
+
+    <ion-item>
+      <ion-label>Alert</ion-label>
+      <ion-select :interfaceOptions="customAlertOptions" interface="alert" multiple="true" placeholder="Select One">
+        <ion-select-option value="bacon">Bacon</ion-select-option>
+        <ion-select-option value="olives">Black Olives</ion-select-option>
+        <ion-select-option value="xcheese">Extra Cheese</ion-select-option>
+        <ion-select-option value="peppers">Green Peppers</ion-select-option>
+        <ion-select-option value="mushrooms">Mushrooms</ion-select-option>
+        <ion-select-option value="onions">Onions</ion-select-option>
+        <ion-select-option value="pepperoni">Pepperoni</ion-select-option>
+        <ion-select-option value="pineapple">Pineapple</ion-select-option>
+        <ion-select-option value="sausage">Sausage</ion-select-option>
+        <ion-select-option value="Spinach">Spinach</ion-select-option>
+      </ion-select>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Popover</ion-label>
+      <ion-select :interfaceOptions="customPopoverOptions" interface="popover" placeholder="Select One">
+        <ion-select-option value="brown">Brown</ion-select-option>
+        <ion-select-option value="blonde">Blonde</ion-select-option>
+        <ion-select-option value="black">Black</ion-select-option>
+        <ion-select-option value="red">Red</ion-select-option>
+      </ion-select>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Action Sheet</ion-label>
+      <ion-select :interfaceOptions]="customActionSheetOptions" interface="action-sheet" placeholder="Select One">
+        <ion-select-option value="red">Red</ion-select-option>
+        <ion-select-option value="purple">Purple</ion-select-option>
+        <ion-select-option value="yellow">Yellow</ion-select-option>
+        <ion-select-option value="orange">Orange</ion-select-option>
+        <ion-select-option value="green">Green</ion-select-option>
+      </ion-select>
+    </ion-item>
+
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+
+  @Component()
+  export default class SelectExample extends Vue {
+    customAlertOptions: any = {
+      header: 'Pizza Toppings',
+      subHeader: 'Select your toppings',
+      message: '$1.00 per topping',
+      translucent: true
+    };
+
+    customPopoverOptions: any = {
+      header: 'Hair Color',
+      subHeader: 'Select your hair color',
+      message: 'Only select your dominant hair color'
+    };
+
+    customActionSheetOptions: any = {
+      header: 'Colors',
+      subHeader: 'Select your favorite color'
+    };
+  }
+</script>
+```
diff --git a/core/src/components/skeleton-text/usage/vue.md b/core/src/components/skeleton-text/usage/vue.md
new file mode 100644
index 00000000000..5b719c6c37a
--- /dev/null
+++ b/core/src/components/skeleton-text/usage/vue.md
@@ -0,0 +1,153 @@
+```html
+<template>
+  <!-- Data to display after skeleton screen -->
+  <div v-if="data">
+    <div class="ion-padding">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac eros est. Cras iaculis pulvinar arcu non vehicula. Fusce at quam a eros malesuada condimentum. Aliquam tincidunt tincidunt vehicula.
+    </div>
+
+    <ion-list>
+      <ion-list-header>Data</ion-list-header>
+      <ion-item>
+        <ion-avatar slot="start">
+          <img src="./avatar.svg">
+        </ion-avatar>
+        <ion-label>
+          <h3>
+            {{ data.heading }}
+          </h3>
+          <p>
+            {{ data.para1 }}
+          </p>
+          <p>
+            {{ data.para2 }}
+          </p>
+        </ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-thumbnail slot="start">
+          <img src="./thumbnail.svg">
+        </ion-thumbnail>
+        <ion-label>
+          <h3>
+            {{ data.heading }}
+          </h3>
+          <p>
+            {{ data.para1 }}
+          </p>
+          <p>
+            {{ data.para2 }}
+          </p>
+        </ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-icon name="call" slot="start"></ion-icon>
+        <ion-label>
+          <h3>
+            {{ data.heading }}
+          </h3>
+          <p>
+            {{ data.para1 }}
+          </p>
+          <p>
+            {{ data.para2 }}
+          </p>
+        </ion-label>
+      </ion-item>
+    </ion-list>
+  </div>
+
+  <!-- Skeleton screen -->
+  <div *ngIf="!data">
+    <div class="ion-padding custom-skeleton">
+      <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+      <ion-skeleton-text animated></ion-skeleton-text>
+      <ion-skeleton-text animated style="width: 88%"></ion-skeleton-text>
+      <ion-skeleton-text animated style="width: 70%"></ion-skeleton-text>
+      <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+    </div>
+
+    <ion-list>
+      <ion-list-header>
+        <ion-skeleton-text animated style="width: 20%"></ion-skeleton-text>
+      </ion-list-header>
+      <ion-item>
+        <ion-avatar slot="start">
+          <ion-skeleton-text animated></ion-skeleton-text>
+        </ion-avatar>
+        <ion-label>
+          <h3>
+            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+          </h3>
+          <p>
+            <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+          </p>
+          <p>
+            <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+          </p>
+        </ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-thumbnail slot="start">
+          <ion-skeleton-text animated></ion-skeleton-text>
+        </ion-thumbnail>
+        <ion-label>
+          <h3>
+            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+          </h3>
+          <p>
+            <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+          </p>
+          <p>
+            <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+          </p>
+        </ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-skeleton-text animated style="width: 27px; height: 27px" slot="start"></ion-skeleton-text>
+        <ion-label>
+          <h3>
+            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+          </h3>
+          <p>
+            <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+          </p>
+          <p>
+            <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+          </p>
+        </ion-label>
+      </ion-item>
+    </ion-list>
+  </div>
+</template>
+
+<style>
+  /* Custom Skeleton Line Height and Margin */
+  .custom-skeleton ion-skeleton-text {
+    line-height: 13px;
+  }
+
+  .custom-skeleton ion-skeleton-text:last-child {
+    margin-bottom: 5px;
+  }
+</style>
+
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+
+  @Component()
+  export default class SkeletonTextExample extends Vue {
+    data: any;
+
+    mounted() {
+      setTimeout(() => {
+        this.data = {
+          'heading': 'Normal text',
+          'para1': 'Lorem ipsum dolor sit amet, consectetur',
+          'para2': 'adipiscing elit.'
+        };
+      }, 5000);
+    }
+  }
+</script>
+```
\ No newline at end of file
diff --git a/core/src/components/slides/usage/vue.md b/core/src/components/slides/usage/vue.md
new file mode 100644
index 00000000000..aa6e0cd6b5a
--- /dev/null
+++ b/core/src/components/slides/usage/vue.md
@@ -0,0 +1,27 @@
+```html
+<template>
+  <ion-slides pager="true" :options="slideOpts">
+    <ion-slide>
+      <h1>Slide 1</h1>
+    </ion-slide>
+    <ion-slide>
+      <h1>Slide 2</h1>
+    </ion-slide>
+    <ion-slide>
+      <h1>Slide 3</h1>
+    </ion-slide>
+  </ion-slides>
+</template>
+
+
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+
+  @Component()
+  export default class SelectExample extends Vue {
+    slideOpts = {
+      effect: 'flip'
+    };
+  }
+</script>
+```
diff --git a/core/src/components/toggle/usage/vue.md b/core/src/components/toggle/usage/vue.md
new file mode 100644
index 00000000000..01d145dbe67
--- /dev/null
+++ b/core/src/components/toggle/usage/vue.md
@@ -0,0 +1,37 @@
+```html
+<template>
+  <!-- Default Toggle -->
+  <ion-toggle></ion-toggle>
+
+  <!-- Disabled Toggle -->
+  <ion-toggle disabled></ion-toggle>
+
+  <!-- Checked Toggle -->
+  <ion-toggle checked></ion-toggle>
+
+  <!-- Toggle Colors -->
+  <ion-toggle color="primary"></ion-toggle>
+  <ion-toggle color="secondary"></ion-toggle>
+  <ion-toggle color="danger"></ion-toggle>
+  <ion-toggle color="light"></ion-toggle>
+  <ion-toggle color="dark"></ion-toggle>
+
+  <!-- Toggles in a List -->
+  <ion-list>
+    <ion-item>
+      <ion-label>Pepperoni</ion-label>
+      <ion-toggle @ionChange="toppings.push($event.target.value)" value="pepperoni" v-bind:checked="toppings.indexOf('pepperoni') !== -1"></ion-toggle>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Sausage</ion-label>
+      <ion-toggle @ionChange="toppings.push($event.target.value)" value="sausage" v-bind:checked="toppings.indexOf('pepperoni') !== -1" disabled="true"></ion-toggle>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Mushrooms</ion-label>
+      <ion-toggle @ionChange="toppings.push($event.target.value)" value="mushrooms" v-bind:checked="toppings.indexOf('pepperoni') !== -1"></ion-toggle>
+    </ion-item>
+  </ion-list>
+</template>
+```
diff --git a/core/src/components/toolbar/usage/vue.md b/core/src/components/toolbar/usage/vue.md
new file mode 100644
index 00000000000..5700e6d78f2
--- /dev/null
+++ b/core/src/components/toolbar/usage/vue.md
@@ -0,0 +1,157 @@
+```html
+<template>
+  <ion-toolbar>
+    <ion-title>Title Only</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+    <ion-title>Back Button</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="secondary">
+      <ion-button>
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
+      </ion-button>
+      <ion-button>
+        <ion-icon slot="icon-only" name="search"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="primary">
+      <ion-button color="secondary">
+        <ion-icon slot="icon-only" name="more"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Default Buttons</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="secondary">
+      <ion-button fill="solid">
+        <ion-icon slot="start" name="contact"></ion-icon>
+        Contact
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Solid Buttons</ion-title>
+    <ion-buttons slot="primary">
+      <ion-button fill="solid" color="secondary">
+        Help
+        <ion-icon slot="end" name="help-circle"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="secondary">
+      <ion-button fill="outline">
+        <ion-icon slot="start" name="star"></ion-icon>
+        Star
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Outline Buttons</ion-title>
+    <ion-buttons slot="primary">
+      <ion-button color="danger" fill="outline">
+        Edit
+        <ion-icon slot="end" name="create"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="secondary">
+      <ion-button>
+        Account
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="primary">
+      <ion-button color="danger">
+        Edit
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Text Only Buttons</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-menu-button autoHide="false"></ion-menu-button>
+
+    </ion-buttons>
+    <ion-buttons slot="secondary">
+      <ion-button>
+        <ion-icon slot="icon-only" name="star"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Left side menu toggle</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="primary">
+      <ion-button @click="clickedStar()">
+        <ion-icon slot="icon-only" name="star"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Right side menu toggle</ion-title>
+    <ion-buttons slot="end">
+      <ion-menu-button autoHide="false"></ion-menu-button>
+
+    </ion-buttons>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="primary">
+      <ion-button @click="clickedSearch()">
+        <ion-icon slot="icon-only" name="search"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-searchbar placeholder="Search Favorites"></ion-searchbar>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-segment>
+      <ion-segment-button value="all" checked>
+        All
+      </ion-segment-button>
+      <ion-segment-button value="favorites">
+        Favorites
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+
+  <ion-toolbar color="secondary">
+    <ion-buttons slot="secondary">
+      <ion-button>
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
+      </ion-button>
+      <ion-button>
+        <ion-icon slot="icon-only" name="search"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="primary">
+      <ion-button color="primary">
+        <ion-icon slot="icon-only" name="more"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Secondary Toolbar</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar color="dark">
+    <ion-buttons slot="secondary">
+      <ion-button>
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
+      </ion-button>
+      <ion-button>
+        <ion-icon slot="icon-only" name="search"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="primary">
+      <ion-button color="danger">
+        <ion-icon slot="icon-only" name="more"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Dark Toolbar</ion-title>
+  </ion-toolbar>
+</template>
+```
\ No newline at end of file

From c36357a2bdbb58ff40b3d341e4ff5558a757be41 Mon Sep 17 00:00:00 2001
From: Josh Thomas <josh@ionic.io>
Date: Thu, 28 Feb 2019 21:53:18 -0600
Subject: [PATCH 3/3] updated readme docs.

---
 core/src/components/avatar/readme.md          |  25 ++
 core/src/components/back-button/readme.md     |  56 +++
 core/src/components/backdrop/readme.md        |  37 ++
 core/src/components/badge/readme.md           |  28 ++
 core/src/components/button/readme.md          |  56 +++
 core/src/components/buttons/readme.md         |  43 +++
 core/src/components/card/readme.md            |  54 +++
 core/src/components/checkbox/readme.md        |  44 +++
 core/src/components/chip/readme.md            |  48 +++
 core/src/components/content/readme.md         |  14 +
 core/src/components/datetime/readme.md        | 117 ++++++
 core/src/components/fab-button/readme.md      |  29 ++
 core/src/components/fab-list/readme.md        |  22 ++
 core/src/components/fab/readme.md             |  87 +++++
 core/src/components/grid/readme.md            | 185 ++++++++++
 core/src/components/img/readme.md             |  16 +
 .../infinite-scroll-content/readme.md         |  16 +
 core/src/components/input/readme.md           |  49 +++
 core/src/components/item-divider/readme.md    |  46 +++
 core/src/components/item-group/readme.md      | 109 ++++++
 core/src/components/item-sliding/readme.md    |  23 ++
 core/src/components/item/readme.md            | 340 ++++++++++++++++++
 core/src/components/label/readme.md           |  60 ++++
 core/src/components/list/readme.md            |  67 ++++
 core/src/components/menu/readme.md            |  87 +++++
 core/src/components/note/readme.md            |  30 ++
 core/src/components/radio-group/readme.md     |  40 +++
 core/src/components/radio/readme.md           |  30 ++
 core/src/components/range/readme.md           |  35 ++
 core/src/components/refresher/readme.md       |  42 +++
 core/src/components/reorder-group/readme.md   |  55 +++
 core/src/components/searchbar/readme.md       |  36 ++
 core/src/components/segment-button/readme.md  | 154 ++++++++
 core/src/components/segment/readme.md         | 108 ++++++
 core/src/components/select/readme.md          | 141 ++++++++
 core/src/components/skeleton-text/readme.md   | 157 ++++++++
 core/src/components/slides/readme.md          |  31 ++
 core/src/components/spinner/readme.md         |  31 ++
 core/src/components/split-pane/readme.md      |  21 ++
 core/src/components/tab-bar/readme.md         |  22 ++
 core/src/components/tab-button/readme.md      |  33 ++
 core/src/components/tabs/readme.md            |  32 ++
 core/src/components/textarea/readme.md        |  43 +++
 core/src/components/toggle/readme.md          |  41 +++
 core/src/components/toolbar/readme.md         | 161 +++++++++
 45 files changed, 2901 insertions(+)

diff --git a/core/src/components/avatar/readme.md b/core/src/components/avatar/readme.md
index 755936b9d18..244a3bacddf 100644
--- a/core/src/components/avatar/readme.md
+++ b/core/src/components/avatar/readme.md
@@ -65,6 +65,31 @@ export default AvatarExample;
 ```
 
 
+### Vue
+
+```html
+<template>
+  <ion-avatar>
+    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+  </ion-avatar>
+
+  <ion-chip>
+    <ion-avatar>
+      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+    </ion-avatar>
+    <ion-label>Chip Avatar</ion-label>
+  </ion-chip>
+
+  <ion-item>
+    <ion-avatar slot="start">
+      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+    </ion-avatar>
+    <ion-label>Item Avatar</ion-label>
+  </ion-item>
+</template>
+```
+
+
 
 ## CSS Custom Properties
 
diff --git a/core/src/components/back-button/readme.md b/core/src/components/back-button/readme.md
index acc03dba5ba..ee7a3808acb 100644
--- a/core/src/components/back-button/readme.md
+++ b/core/src/components/back-button/readme.md
@@ -180,6 +180,62 @@ export default Example;
 ```
 
 
+### Vue
+
+```html
+<template>
+  <!-- Default back button -->
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-back-button></ion-back-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+
+  <!-- Back button with a default href -->
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-back-button defaultHref="home"></ion-back-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+
+  <!-- Back button with custom text and icon -->
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-back-button
+            :text="buttonText"
+            :icon="buttonIcon">
+        </ion-back-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+
+  <!-- Back button with no text and custom icon -->
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-back-button text="" icon="add"></ion-back-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+
+  <!-- Danger back button next to a menu button -->
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-menu-button></ion-menu-button>
+        <ion-back-button color="danger"></ion-back-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+</template>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/backdrop/readme.md b/core/src/components/backdrop/readme.md
index 85e770afd8d..d444bc2f17b 100644
--- a/core/src/components/backdrop/readme.md
+++ b/core/src/components/backdrop/readme.md
@@ -107,6 +107,43 @@ export default Example;
 ```
 
 
+### Vue
+
+```html
+<template>
+  <!-- Default backdrop -->
+  <ion-backdrop></ion-backdrop>
+
+  <!-- Backdrop that is not tappable -->
+  <ion-backdrop tappable="false"></ion-backdrop>
+
+  <!-- Backdrop that is not visible -->
+  <ion-backdrop visible="false"></ion-backdrop>
+
+  <!-- Backdrop with propagation -->
+  <ion-backdrop stopPropagation="false"></ion-backdrop>
+
+  <!-- Backdrop that sets dynamic properties -->
+  <ion-backdrop
+    :tappable="enableBackdropDismiss"
+    :visible="showBackdrop"
+    :stopPropagation="shouldPropagate">
+  </ion-backdrop>
+</template>
+
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+
+  @Component()
+  export default class Menu extends Vue {
+    backdropDismiss = false;
+    showBackdrop = false;
+    shouldPropagate = false;
+  }
+</script>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/badge/readme.md b/core/src/components/badge/readme.md
index 9ac9a1bf6c7..17a437159e0 100644
--- a/core/src/components/badge/readme.md
+++ b/core/src/components/badge/readme.md
@@ -70,6 +70,34 @@ export default Example;
 ```
 
 
+### Vue
+
+```html
+<template>
+  <!-- Default -->
+  <ion-badge>99</ion-badge>
+
+  <!-- Colors -->
+  <ion-badge color="primary">11</ion-badge>
+  <ion-badge color="secondary">22</ion-badge>
+  <ion-badge color="tertiary">33</ion-badge>
+  <ion-badge color="success">44</ion-badge>
+  <ion-badge color="warning">55</ion-badge>
+  <ion-badge color="danger">66</ion-badge>
+  <ion-badge color="light">77</ion-badge>
+  <ion-badge color="medium">88</ion-badge>
+  <ion-badge color="dark">99</ion-badge>
+
+  <!-- Item with badge on left and right -->
+  <ion-item>
+    <ion-badge slot="start">11</ion-badge>
+    <ion-label>My Item</ion-label>
+    <ion-badge slot="end">22</ion-badge>
+  </ion-item>
+</template>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/button/readme.md b/core/src/components/button/readme.md
index 09a54595c36..68f5346d368 100644
--- a/core/src/components/button/readme.md
+++ b/core/src/components/button/readme.md
@@ -155,6 +155,62 @@ export default Example;
 ```
 
 
+### Vue
+
+```html
+<template>
+  <!-- Default -->
+  <ion-button>Default</ion-button>
+
+  <!-- Anchor -->
+  <ion-button href="#">Anchor</ion-button>
+
+  <!-- Colors -->
+  <ion-button color="primary">Primary</ion-button>
+  <ion-button color="secondary">Secondary</ion-button>
+  <ion-button color="tertiary">Tertiary</ion-button>
+  <ion-button color="success">Success</ion-button>
+  <ion-button color="warning">Warning</ion-button>
+  <ion-button color="danger">Danger</ion-button>
+  <ion-button color="light">Light</ion-button>
+  <ion-button color="medium">Medium</ion-button>
+  <ion-button color="dark">Dark</ion-button>
+
+  <!-- Expand -->
+  <ion-button expand="full">Full Button</ion-button>
+  <ion-button expand="block">Block Button</ion-button>
+
+  <!-- Round -->
+  <ion-button shape="round">Round Button</ion-button>
+
+  <!-- Fill -->
+  <ion-button expand="full" fill="outline">Outline + Full</ion-button>
+  <ion-button expand="block" fill="outline">Outline + Block</ion-button>
+  <ion-button shape="round" fill="outline">Outline + Round</ion-button>
+
+  <!-- Icons -->
+  <ion-button>
+    <ion-icon slot="start" name="star"></ion-icon>
+    Left Icon
+  </ion-button>
+
+  <ion-button>
+    Right Icon
+    <ion-icon slot="end" name="star"></ion-icon>
+  </ion-button>
+
+  <ion-button>
+    <ion-icon slot="icon-only" name="star"></ion-icon>
+  </ion-button>
+
+  <!-- Sizes -->
+  <ion-button size="large">Large</ion-button>
+  <ion-button>Default</ion-button>
+  <ion-button size="small">Small</ion-button>
+</template>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/buttons/readme.md b/core/src/components/buttons/readme.md
index a444d7674c3..52f22fa7238 100644
--- a/core/src/components/buttons/readme.md
+++ b/core/src/components/buttons/readme.md
@@ -153,6 +153,49 @@ const Example: React.SFC<{}> = () => (
 export default Example;
 
 
+### Vue
+
+```html
+<template>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+    <ion-title>Back Button</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="secondary">
+      <ion-button>
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
+      </ion-button>
+      <ion-button>
+        <ion-icon slot="icon-only" name="search"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Default Buttons</ion-title>
+    <ion-buttons slot="primary">
+      <ion-button color="secondary">
+        <ion-icon slot="icon-only" name="more"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="primary">
+      <ion-button @click="clickedStar()">
+        <ion-icon slot="icon-only" name="star"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Right side menu toggle</ion-title>
+    <ion-buttons slot="end">
+      <ion-menu-button autoHide="false"></ion-menu-button>
+    </ion-buttons>
+  </ion-toolbar>
+</template>
+```
+
+
 
 ----------------------------------------------
 
diff --git a/core/src/components/card/readme.md b/core/src/components/card/readme.md
index 0a87e7dcce5..4cf5f8d0f69 100644
--- a/core/src/components/card/readme.md
+++ b/core/src/components/card/readme.md
@@ -125,6 +125,60 @@ export default Example;
 ```
 
 
+### Vue
+
+```html
+<template>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+      <ion-card-title>Card Title</ion-card-title>
+    </ion-card-header>
+
+    <ion-card-content>
+      Keep close to Nature's heart... and break clear away, once in awhile,
+      and climb a mountain or spend a week in the woods. Wash your spirit clean.
+    </ion-card-content>
+  </ion-card>
+
+  <ion-card>
+    <ion-item>
+      <ion-icon name="pin" slot="start"></ion-icon>
+      <ion-label>ion-item in a card, icon left, button right</ion-label>
+      <ion-button fill="outline" slot="end">View</ion-button>
+    </ion-item>
+
+    <ion-card-content>
+      This is content, without any paragraph or header tags,
+      within an ion-card-content element.
+    </ion-card-content>
+  </ion-card>
+
+  <ion-card>
+    <ion-item href="#" class="activated">
+      <ion-icon name="wifi" slot="start"></ion-icon>
+      <ion-label>Card Link Item 1 .activated</ion-label>
+    </ion-item>
+
+    <ion-item href="#">
+      <ion-icon name="wine" slot="start"></ion-icon>
+      <ion-label>Card Link Item 2</ion-label>
+    </ion-item>
+
+    <ion-item class="activated">
+      <ion-icon name="warning" slot="start"></ion-icon>
+      <ion-label>Card Button Item 1 .activated</ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-icon name="walk" slot="start"></ion-icon>
+      <ion-label>Card Button Item 2</ion-label>
+    </ion-item>
+  </ion-card>
+</template>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/checkbox/readme.md b/core/src/components/checkbox/readme.md
index d5a9960b6fd..e5f23d91d79 100644
--- a/core/src/components/checkbox/readme.md
+++ b/core/src/components/checkbox/readme.md
@@ -141,6 +141,50 @@ const CheckboxExample: React.SFC<{}> = () => (
 export default CheckboxExample;
 
 
+### Vue
+
+```html
+<template>
+  <!-- Default Checkbox -->
+  <ion-checkbox></ion-checkbox>
+
+  <!-- Disabled Checkbox -->
+  <ion-checkbox disabled="true"></ion-checkbox>
+
+  <!-- Checked Checkbox -->
+  <ion-checkbox checked="true"></ion-checkbox>
+
+  <!-- Checkbox Colors -->
+  <ion-checkbox color="primary"></ion-checkbox>
+  <ion-checkbox color="secondary"></ion-checkbox>
+  <ion-checkbox color="danger"></ion-checkbox>
+  <ion-checkbox color="light"></ion-checkbox>
+  <ion-checkbox color="dark"></ion-checkbox>
+
+  <!-- Checkboxes in a List -->
+  <ion-list>
+    <ion-item v-for="entry in form">
+      <ion-label>{{entry.val}}</ion-label>
+      <ion-checkbox slot="end" v-on:input="entry.checked = $event.target.value" v-bind:value="entry.isChecked"></ion-checkbox>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+
+  @Component()
+  export default class Menu extends Vue {
+    form = [
+      { val: 'Pepperoni', isChecked: true },
+      { val: 'Sausage', isChecked: false },
+      { val: 'Mushroom', isChecked: false }
+    ];
+  }
+</script>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/chip/readme.md b/core/src/components/chip/readme.md
index 0a545204474..b02f4e19ef5 100644
--- a/core/src/components/chip/readme.md
+++ b/core/src/components/chip/readme.md
@@ -108,6 +108,54 @@ const ChipExample: React.SFC<{}> = () => (
 export default ChipExample;
 
 
+### Vue
+
+```html
+<template>
+  <ion-chip>
+    <ion-label>Default</ion-label>
+  </ion-chip>
+
+  <ion-chip>
+    <ion-label color="secondary">Secondary Label</ion-label>
+  </ion-chip>
+
+  <ion-chip color="secondary">
+    <ion-label color="dark">Secondary w/ Dark label</ion-label>
+  </ion-chip>
+
+  <ion-chip>
+    <ion-icon name="pin"></ion-icon>
+    <ion-label>Default</ion-label>
+  </ion-chip>
+
+  <ion-chip>
+    <ion-icon name="heart" color="dark"></ion-icon>
+    <ion-label>Default</ion-label>
+  </ion-chip>
+
+  <ion-chip>
+    <ion-label>Button Chip</ion-label>
+    <ion-icon name="close-circle"></ion-icon>
+  </ion-chip>
+
+  <ion-chip>
+    <ion-icon name="pin" color="primary"></ion-icon>
+    <ion-label>Icon Chip</ion-label>
+    <ion-icon name="close"></ion-icon>
+  </ion-chip>
+
+  <ion-chip>
+    <ion-avatar>
+      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+    </ion-avatar>
+    <ion-label>Avatar Chip</ion-label>
+    <ion-icon name="close-circle"></ion-icon>
+  </ion-chip>
+</template>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/content/readme.md b/core/src/components/content/readme.md
index 02549e54281..403368ee4bb 100644
--- a/core/src/components/content/readme.md
+++ b/core/src/components/content/readme.md
@@ -56,6 +56,20 @@ export default Example;
 ```
 
 
+### Vue
+
+```html
+<template>
+  <ion-content
+    :scrollEvents="true"
+    @ionScrollStart="logScrollStart()"
+    @ionScroll="logScrolling($event)"
+    @ionScrollEnd="logScrollEnd()">
+  </ion-content>
+</template>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/datetime/readme.md b/core/src/components/datetime/readme.md
index d3e36c9205b..cf6c8e7d76b 100644
--- a/core/src/components/datetime/readme.md
+++ b/core/src/components/datetime/readme.md
@@ -558,6 +558,123 @@ export default Example;
 ```
 
 
+### Vue
+
+```html
+<template>
+  <ion-item>
+    <ion-label>MMMM</ion-label>
+    <ion-datetime displayFormat="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>MM DD YY</ion-label>
+    <ion-datetime displayFormat="MM DD YY" placeholder="Select Date"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Disabled</ion-label>
+    <ion-datetime id="dynamicDisabled" displayFormat="MM DD YY" disabled value="1994-12-15"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>YYYY</ion-label>
+    <ion-datetime :pickerOptions="customPickerOptions" placeholder="Custom Options" displayFormat="YYYY" min="1981" max="2002"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="stacked">MMMM YY</ion-label>
+    <ion-datetime displayFormat="MMMM YY" min="1989-06-04" max="2004-08-23" value="1994-12-15T13:47:20.789"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="floating">MM/DD/YYYY</ion-label>
+    <ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09" value="2002-09-23T15:03:46.789"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="floating">MM/DD/YYYY</ion-label>
+    <ion-datetime displayFormat="MM/DD/YYYY" min="1994-03-14" max="2012-12-09"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>DDD. MMM DD, YY (custom locale)</ion-label>
+    <ion-datetime value="1995-04-15" min="1990-02" max="2000"
+      :dayShortNames="customDayShortNames"
+      displayFormat="DDD. MMM DD, YY"
+      monthShortNames="jan, feb, mar, apr, mai, jun, jul, aug, sep, okt, nov, des"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>D MMM YYYY H:mm</ion-label>
+    <ion-datetime displayFormat="D MMM YYYY H:mm" min="1997" max="2010" value="2005-06-17T11:06Z"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>DDDD MMM D, YYYY</ion-label>
+    <ion-datetime displayFormat="DDDD MMM D, YYYY" min="2005" max="2016" value="2008-09-02"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>HH:mm</ion-label>
+    <ion-datetime displayFormat="HH:mm"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>h:mm a</ion-label>
+    <ion-datetime displayFormat="h:mm a"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>hh:mm A (15 min steps)</ion-label>
+    <ion-datetime displayFormat="h:mm A" minuteValues="0,15,30,45"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Leap years, summer months</ion-label>
+    <ion-datetime displayFormat="MM/YYYY" pickerFormat="MMMM YYYY" monthValues="6,7,8" :yearValues="customYearValues"></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Specific days/months/years</ion-label>
+    <ion-datetime monthValues="6,7,8" yearValues="2014,2015" dayValues="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14" displayFormat="DD/MMM/YYYY"></ion-datetime>
+  </ion-item>
+</template>
+
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+
+  @Component()
+  export default class Menu extends Vue {
+    customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];
+
+    customDayShortNames = [
+      's\u00f8n',
+      'man',
+      'tir',
+      'ons',
+      'tor',
+      'fre',
+      'l\u00f8r'
+    ];
+
+    customPickerOptions = {
+      buttons: [{
+        text: 'Save',
+        handler: () => console.log('Clicked Save!')
+      }, {
+        text: 'Log',
+        handler: () => {
+          console.log('Clicked Log. Do not Dismiss.');
+          return false;
+        }
+      }]
+    }
+  }
+</script>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/fab-button/readme.md b/core/src/components/fab-button/readme.md
index 50b9a1793ad..a1c667c6f3d 100644
--- a/core/src/components/fab-button/readme.md
+++ b/core/src/components/fab-button/readme.md
@@ -69,6 +69,35 @@ const Example: React.SFC<{}> = () => (
 export default Example
 
 
+### Vue
+
+```html
+<template>
+  <ion-content>
+
+    <!-- Fixed Floating Action Button that does not scroll with the content -->
+    <ion-fab>
+      <ion-fab-button>Button</ion-fab-button>
+    </ion-fab>
+
+    <!-- Default Floating Action Button that scrolls with the content.-->
+    <ion-fab-button>Default</ion-fab-button>
+
+    <!-- Mini -->
+    <ion-fab-button size="small">Mini</ion-fab-button>
+
+    <!-- Colors -->
+    <ion-fab-button color="primary">Primary</ion-fab-button>
+    <ion-fab-button color="secondary">Secondary</ion-fab-button>
+    <ion-fab-button color="danger">Danger</ion-fab-button>
+    <ion-fab-button color="light">Light</ion-fab-button>
+    <ion-fab-button color="dark">Dark</ion-fab-button>
+
+  </ion-content>
+</template>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/fab-list/readme.md b/core/src/components/fab-list/readme.md
index 90b78da0fea..ec965456dd3 100644
--- a/core/src/components/fab-list/readme.md
+++ b/core/src/components/fab-list/readme.md
@@ -55,6 +55,28 @@ const Example: React.SFC<{}> = () => (
 export default Example
 
 
+### Vue
+
+```html
+<template>
+  <ion-fab vertical="bottom" horizontal="end">
+    <ion-fab-button>Share</ion-fab-button>
+
+    <ion-fab-list side="top">
+      <ion-fab-button>Facebook</ion-fab-button>
+      <ion-fab-button>Twitter</ion-fab-button>
+      <ion-fab-button>Youtube</ion-fab-button>
+    </ion-fab-list>
+
+    <ion-fab-list side="start">
+      <ion-fab-button>Vimeo</ion-fab-button>
+    </ion-fab-list>
+
+  </ion-fab>
+</template>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/fab/readme.md b/core/src/components/fab/readme.md
index 545b396a297..a55f04b42cb 100644
--- a/core/src/components/fab/readme.md
+++ b/core/src/components/fab/readme.md
@@ -186,6 +186,93 @@ export default Example;
 ```
 
 
+### Vue
+
+```html
+<template>
+  <ion-content>
+    <!-- fab placed to the top end -->
+    <ion-fab vertical="top" horizontal="end" slot="fixed">
+      <ion-fab-button>
+        <ion-icon name="add"></ion-icon>
+      </ion-fab-button>
+    </ion-fab>
+
+    <!-- fab placed to the bottom end -->
+    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+      <ion-fab-button>
+        <ion-icon name="arrow-dropleft"></ion-icon>
+      </ion-fab-button>
+    </ion-fab>
+
+    <!-- fab placed to the top start -->
+    <ion-fab vertical="top" horizontal="start" slot="fixed">
+      <ion-fab-button>
+        <ion-icon name="arrow-dropright"></ion-icon>
+      </ion-fab-button>
+    </ion-fab>
+
+    <!-- fab placed to the bottom start -->
+    <ion-fab vertical="bottom" horizontal="start" slot="fixed">
+      <ion-fab-button>
+        <ion-icon name="arrow-dropup"></ion-icon>
+      </ion-fab-button>
+    </ion-fab>
+
+    <!-- fab placed to the (vertical) center and start -->
+    <ion-fab vertical="center" horizontal="start" slot="fixed">
+      <ion-fab-button>
+        <ion-icon name="share"></ion-icon>
+      </ion-fab-button>
+    </ion-fab>
+
+    <!-- fab placed to the (vertical) center and end -->
+    <ion-fab vertical="center" horizontal="end" slot="fixed">
+      <ion-fab-button>
+        <ion-icon name="add"></ion-icon>
+      </ion-fab-button>
+    </ion-fab>
+
+    <!-- fab placed to the top and end and on the top edge of the content overlapping header -->
+    <ion-fab vertical="top" horizontal="end" edge slot="fixed">
+      <ion-fab-button>
+        <ion-icon name="person"></ion-icon>
+      </ion-fab-button>
+    </ion-fab>
+
+    <!-- fab placed to the bottom and start and on the bottom edge of the content overlapping footer with a list to the right -->
+    <ion-fab vertical="bottom" horizontal="start" edge slot="fixed">
+      <ion-fab-button>
+        <ion-icon name="settings"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-list side="end">
+        <ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
+      </ion-fab-list>
+    </ion-fab>
+
+    <!-- fab placed in the center of the content with a list on each side -->
+    <ion-fab vertical="center" horizontal="center" slot="fixed">
+      <ion-fab-button>
+        <ion-icon name="share"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-list side="top">
+        <ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
+      </ion-fab-list>
+      <ion-fab-list side="bottom">
+        <ion-fab-button><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
+      </ion-fab-list>
+      <ion-fab-list side="start">
+        <ion-fab-button><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
+      </ion-fab-list>
+      <ion-fab-list side="end">
+        <ion-fab-button><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
+      </ion-fab-list>
+    </ion-fab>
+  </ion-content>
+</template>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/grid/readme.md b/core/src/components/grid/readme.md
index 7f44fad4966..83188310409 100644
--- a/core/src/components/grid/readme.md
+++ b/core/src/components/grid/readme.md
@@ -386,6 +386,191 @@ export default Example;
 ```
 
 
+### Vue
+
+```html
+<template>
+  <ion-grid>
+    <ion-row>
+      <ion-col>
+        ion-col
+      </ion-col>
+      <ion-col>
+        ion-col
+      </ion-col>
+      <ion-col>
+        ion-col
+      </ion-col>
+      <ion-col>
+        ion-col
+      </ion-col>
+    </ion-row>
+
+    <ion-row>
+      <ion-col size="6">
+        ion-col [size="6"]
+      </ion-col>
+      <ion-col>
+        ion-col
+      </ion-col>
+      <ion-col>
+        ion-col
+      </ion-col>
+    </ion-row>
+
+    <ion-row>
+      <ion-col size="3">
+        ion-col [size="3"]
+      </ion-col>
+      <ion-col>
+        ion-col
+      </ion-col>
+      <ion-col size="3">
+        ion-col [size="3"]
+      </ion-col>
+    </ion-row>
+
+    <ion-row>
+      <ion-col size="3">
+        ion-col [size="3"]
+      </ion-col>
+      <ion-col size="3" offset="3">
+        ion-col [size="3"] [offset="3"]
+      </ion-col>
+    </ion-row>
+
+    <ion-row>
+      <ion-col>
+        ion-col
+      </ion-col>
+      <ion-col>
+        ion-col
+        <br>#
+      </ion-col>
+      <ion-col>
+        ion-col
+        <br>#
+        <br>#
+      </ion-col>
+      <ion-col>
+        ion-col
+        <br>#
+        <br>#
+        <br>#
+      </ion-col>
+    </ion-row>
+
+    <ion-row>
+      <ion-col align-self-start>
+        ion-col [start]
+      </ion-col>
+      <ion-col align-self-center>
+        ion-col [center]
+      </ion-col>
+      <ion-col align-self-end>
+        ion-col [end]
+      </ion-col>
+      <ion-col>
+        ion-col
+        <br>#
+        <br>#
+      </ion-col>
+    </ion-row>
+
+    <ion-row align-items-start>
+      <ion-col>
+        [start] ion-col
+      </ion-col>
+      <ion-col>
+        [start] ion-col
+      </ion-col>
+      <ion-col align-self-end>
+        [start] ion-col [end]
+      </ion-col>
+      <ion-col>
+        ion-col
+        <br>#
+        <br>#
+      </ion-col>
+    </ion-row>
+
+    <ion-row align-items-center>
+      <ion-col>
+        [center] ion-col
+      </ion-col>
+      <ion-col>
+        [center] ion-col
+      </ion-col>
+      <ion-col>
+        [center] ion-col
+      </ion-col>
+      <ion-col>
+        ion-col
+        <br>#
+        <br>#
+      </ion-col>
+    </ion-row>
+
+    <ion-row align-items-end>
+      <ion-col>
+        [end] ion-col
+      </ion-col>
+      <ion-col align-self-start>
+        [end] ion-col [start]
+      </ion-col>
+      <ion-col>
+        [end] ion-col
+      </ion-col>
+      <ion-col>
+        ion-col
+        <br>#
+        <br>#
+      </ion-col>
+    </ion-row>
+
+    <ion-row>
+      <ion-col size="12" size-sm>
+        ion-col [size="12"] [size-sm]
+      </ion-col>
+      <ion-col size="12" size-sm>
+        ion-col [size="12"] [size-sm]
+      </ion-col>
+      <ion-col size="12" size-sm>
+        ion-col [size="12"] [size-sm]
+      </ion-col>
+      <ion-col size="12" size-sm>
+        ion-col [size="12"] [size-sm]
+      </ion-col>
+    </ion-row>
+
+    <ion-row>
+      <ion-col size="12" size-md>
+        ion-col [size="12"] [size-md]
+      </ion-col>
+      <ion-col size="12" size-md>
+        ion-col [size="12"] [size-md]
+      </ion-col>
+      <ion-col size="12" size-md>
+        ion-col [size="12"] [size-md]
+      </ion-col>
+      <ion-col size="12" size-md>
+        ion-col [size="12"] [size-md]
+      </ion-col>
+    </ion-row>
+
+    <ion-row>
+      <ion-col size="6" size-lg offset="3">
+        ion-col [size="6"] [size-lg] [offset="3"]
+      </ion-col>
+      <ion-col size="3" size-lg>
+        ion-col [size="3"] [size-lg]
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</template>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/img/readme.md b/core/src/components/img/readme.md
index 998cc78b3ed..d4d5316a28b 100644
--- a/core/src/components/img/readme.md
+++ b/core/src/components/img/readme.md
@@ -52,6 +52,22 @@ const Example: React.SFC<{}> = () => (
 export default Example
 
 
+### Vue
+
+```html
+<template>
+  <ion-list>
+    <ion-item v-for="item in items" :key="item.src">
+      <ion-thumbnail slot="start">
+        <ion-img :src="item.src"></ion-img>
+      </ion-thumbnail>
+      <ion-label>{{item.text}}</ion-label>
+    </ion-item>
+  </ion-list>
+</template>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/infinite-scroll-content/readme.md b/core/src/components/infinite-scroll-content/readme.md
index 9a4880bee32..04b3649ec83 100644
--- a/core/src/components/infinite-scroll-content/readme.md
+++ b/core/src/components/infinite-scroll-content/readme.md
@@ -57,6 +57,22 @@ const Example: React.SFC<{}> = () => (
 export default Example
 
 
+### Vue
+
+```html
+<template>
+  <ion-content>
+    <ion-infinite-scroll>
+      <ion-infinite-scroll-content
+        loadingSpinner="bubbles"
+        loadingText="Loading more data…">
+      </ion-infinite-scroll-content>
+    </ion-infinite-scroll>
+  </ion-content>
+</template>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/input/readme.md b/core/src/components/input/readme.md
index 4b11d1d5abe..2bc0f699d13 100644
--- a/core/src/components/input/readme.md
+++ b/core/src/components/input/readme.md
@@ -160,6 +160,55 @@ const Example: React.SFC<{}> = () => (
 export default Example
 
 
+### Vue
+
+```html
+<template>
+  <!-- Default Input -->
+  <ion-input></ion-input>
+
+  <!-- Input with value -->
+  <ion-input value="custom"></ion-input>
+
+  <!-- Input with placeholder -->
+  <ion-input placeholder="Enter Input"></ion-input>
+
+  <!-- Input with clear button when there is a value -->
+  <ion-input clearInput value="clear me"></ion-input>
+
+  <!-- Number type input -->
+  <ion-input type="number" value="333"></ion-input>
+
+  <!-- Disabled input -->
+  <ion-input value="Disabled" disabled></ion-input>
+
+  <!-- Readonly input -->
+  <ion-input value="Readonly" readonly></ion-input>
+
+  <!-- Inputs with labels -->
+  <ion-item>
+    <ion-label>Default Label</ion-label>
+    <ion-input></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="floating">Floating Label</ion-label>
+    <ion-input></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="fixed">Fixed Label</ion-label>
+    <ion-input></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="stacked">Stacked Label</ion-label>
+    <ion-input></ion-input>
+  </ion-item>
+</template>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/item-divider/readme.md b/core/src/components/item-divider/readme.md
index e74ac227a0d..a6eb1bf5b1e 100644
--- a/core/src/components/item-divider/readme.md
+++ b/core/src/components/item-divider/readme.md
@@ -104,6 +104,52 @@ const Example: React.SFC<{}> = () => (
 export default Example
 
 
+### Vue
+
+```html
+<template>
+  <ion-item-divider>
+    <ion-label>
+      Basic Item Divider
+    </ion-label>
+  </ion-item-divider>
+
+  <ion-item-divider color="secondary">
+    <ion-label>
+      Secondary Item Divider
+    </ion-label>
+  </ion-item-divider>
+
+  <!-- Item Dividers in a List -->
+  <ion-list>
+    <ion-item-divider>
+      <ion-label>
+        Section A
+      </ion-label>
+    </ion-item-divider>
+
+    <ion-item><ion-label>A1</ion-label></ion-item>
+    <ion-item><ion-label>A2</ion-label></ion-item>
+    <ion-item><ion-label>A3</ion-label></ion-item>
+    <ion-item><ion-label>A4</ion-label></ion-item>
+    <ion-item><ion-label>A5</ion-label></ion-item>
+
+    <ion-item-divider>
+      <ion-label>
+        Section B
+      </ion-label>
+    </ion-item-divider>
+
+    <ion-item><ion-label>B1</ion-label></ion-item>
+    <ion-item><ion-label>B2</ion-label></ion-item>
+    <ion-item><ion-label>B3</ion-label></ion-item>
+    <ion-item><ion-label>B4</ion-label></ion-item>
+    <ion-item><ion-label>B5</ion-label></ion-item>
+  </ion-list>
+</template>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/item-group/readme.md b/core/src/components/item-group/readme.md
index 69c10c5e59b..c84e263baf4 100644
--- a/core/src/components/item-group/readme.md
+++ b/core/src/components/item-group/readme.md
@@ -234,6 +234,115 @@ export default Example;
 ```
 
 
+### Vue
+
+```html
+<template>
+  <ion-item-group>
+    <ion-item-divider>
+      <ion-label>A</ion-label>
+    </ion-item-divider>
+
+    <ion-item>
+      <ion-label>Angola</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Argentina</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Armenia</ion-label>
+    </ion-item>
+  </ion-item-group>
+
+  <ion-item-group>
+    <ion-item-divider>
+      <ion-label>B</ion-label>
+    </ion-item-divider>
+
+    <ion-item>
+      <ion-label>Bangladesh</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Belarus</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Belgium</ion-label>
+    </ion-item>
+  </ion-item-group>
+
+
+  <!-- They can also be used to group sliding items -->
+  <ion-item-group>
+    <ion-item-divider>
+      <ion-label>
+        Fruits
+      </ion-label>
+    </ion-item-divider>
+
+    <ion-item-sliding>
+      <ion-item>
+        <ion-label>
+          <h3>Grapes</h3>
+        </ion-label>
+      </ion-item>
+      <ion-item-options>
+        <ion-item-option>
+          Favorite
+        </ion-item-option>
+      </ion-item-options>
+    </ion-item-sliding>
+
+    <ion-item-sliding>
+      <ion-item>
+        <ion-label>
+          <h3>Apples</h3>
+        </ion-label>
+      </ion-item>
+      <ion-item-options>
+        <ion-item-option>
+          Favorite
+        </ion-item-option>
+      </ion-item-options>
+    </ion-item-sliding>
+  </ion-item-group>
+
+  <ion-item-group>
+    <ion-item-divider>
+      <ion-label>
+        Vegetables
+      </ion-label>
+    </ion-item-divider>
+
+    <ion-item-sliding>
+      <ion-item>
+        <ion-label>
+          <h3>Carrots</h3>
+        </ion-label>
+      </ion-item>
+      <ion-item-options>
+        <ion-item-option>
+          Favorite
+        </ion-item-option>
+      </ion-item-options>
+    </ion-item-sliding>
+
+    <ion-item-sliding>
+      <ion-item>
+        <ion-label>
+          <h3>Celery</h3>
+        </ion-label>
+      </ion-item>
+      <ion-item-options>
+        <ion-item-option>
+          Favorite
+        </ion-item-option>
+      </ion-item-options>
+    </ion-item-sliding>
+  </ion-item-group>
+</template>
+```
+
+
 
 ----------------------------------------------
 
diff --git a/core/src/components/item-sliding/readme.md b/core/src/components/item-sliding/readme.md
index 169aeeafeab..19bdf38ea9c 100644
--- a/core/src/components/item-sliding/readme.md
+++ b/core/src/components/item-sliding/readme.md
@@ -104,6 +104,29 @@ export default Example;
 ```
 
 
+### Vue
+
+```html
+<template>
+  <ion-list>
+    <ion-item-sliding>
+      <ion-item>
+        <ion-label>Item</ion-label>
+      </ion-item>
+      <ion-item-options side="start">
+        <ion-item-option @click="favorite(item)">Favorite</ion-item-option>
+        <ion-item-option color="danger" @click="share(item)">Share</ion-item-option>
+      </ion-item-options>
+
+      <ion-item-options side="end">
+        <ion-item-option @click="unread(item)">Unread</ion-item-option>
+      </ion-item-options>
+    </ion-item-sliding>
+  </ion-list>
+</template>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/item/readme.md b/core/src/components/item/readme.md
index 7c1ee81588e..2f9859f38b6 100644
--- a/core/src/components/item/readme.md
+++ b/core/src/components/item/readme.md
@@ -1018,6 +1018,346 @@ export default Example;
 ```
 
 
+### Vue
+
+Basic Usage
+
+```html
+<template>
+  <!-- Default Item -->
+  <ion-item>
+    <ion-label>
+      Item
+    </ion-label>
+  </ion-item>
+
+  <!-- Item as a Button -->
+  <ion-item @click="buttonClick()">
+    <ion-label>
+      Button Item
+    </ion-label>
+  </ion-item>
+
+  <!-- Item as an Anchor -->
+  <ion-item href="https://www.ionicframework.com">
+    <ion-label>
+      Anchor Item
+    </ion-label>
+  </ion-item>
+
+  <ion-item color="secondary">
+    <ion-label>
+      Secondary Color Item
+    </ion-label>
+  </ion-item>
+</template>
+```
+
+Detail Arrows
+
+```html
+<template>
+  <ion-item detail>
+    <ion-label>
+      Standard Item with Detail Arrow
+    </ion-label>
+  </ion-item>
+
+  <ion-item @click="buttonClick()" detail>
+    <ion-label>
+      Button Item with Detail Arrow
+    </ion-label>
+  </ion-item>
+
+  <ion-item detail="false" href="https://www.ionicframework.com">
+    <ion-label>
+      Anchor Item with no Detail Arrow
+    </ion-label>
+  </ion-item>
+</template>
+```
+
+List Items
+
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-label>
+        Item
+      </ion-label>
+    </ion-item>
+
+    <ion-item lines="none">
+      <ion-label>
+        No Lines Item
+      </ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-label text-wrap>
+      Multiline text that should wrap when it is too long
+      to fit on one line in the item.
+      </ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-label text-wrap>
+        <ion-text color="primary">
+          <h3>H3 Primary Title</h3>
+        </ion-text>
+        <p>Paragraph line 1</p>
+        <ion-text color="secondary">
+          <p>Paragraph line 2 secondary</p>
+        </ion-text>
+      </ion-label>
+    </ion-item>
+
+    <ion-item lines="full">
+      <ion-label>
+        Item with Full Lines
+      </ion-label>
+    </ion-item>
+
+  </ion-list>
+</template>
+```
+
+Item Lines
+
+```html
+<template>
+  <!-- Item Inset Lines -->
+  <ion-item lines="inset">
+    <ion-label>Item Lines Inset</ion-label>
+  </ion-item>
+
+  <!-- Item Full Lines -->
+  <ion-item lines="full">
+    <ion-label>Item Lines Full</ion-label>
+  </ion-item>
+
+  <!-- Item None Lines -->
+  <ion-item lines="none">
+    <ion-label>Item Lines None</ion-label>
+  </ion-item>
+
+  <!-- List Full Lines -->
+  <ion-list lines="full">
+    <ion-item>
+      <ion-label>Full Lines Item 1</ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Full Lines Item 2</ion-label>
+    </ion-item>
+  </ion-list>
+
+  <!-- List Inset Lines -->
+  <ion-list lines="inset">
+    <ion-item>
+      <ion-label>Inset Lines Item 1</ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Inset Lines Item 2</ion-label>
+    </ion-item>
+  </ion-list>
+
+  <!-- List No Lines -->
+  <ion-list lines="none">
+    <ion-item>
+      <ion-label>No lines Item 1</ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>No lines Item 2</ion-label>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>No lines Item 3</ion-label>
+    </ion-item>
+  </ion-list>
+</template>
+```
+
+
+Media Items
+
+```html
+<template>
+  <ion-item @click="testClick()">
+    <ion-avatar slot="start">
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+    </ion-avatar>
+    <ion-label>
+      Avatar Start, Button Item
+    </ion-label>
+  </ion-item>
+
+  <ion-item href="#">
+    <ion-label>
+      Thumbnail End, Anchor Item
+    </ion-label>
+    <ion-thumbnail slot="end">
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+    </ion-thumbnail>
+  </ion-item>
+
+  <ion-item>
+    <ion-thumbnail slot="start">
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+    </ion-thumbnail>
+    <ion-label>
+      <h2>H2 Title Text</h2>
+      <p>Button on right</p>
+    </ion-label>
+    <ion-button fill="outline" slot="end">View</ion-button>
+  </ion-item>
+
+  <ion-item @click="testClick()">
+    <ion-thumbnail slot="start">
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+    </ion-thumbnail>
+    <ion-label>
+      <h3>H3 Title Text</h3>
+      <p>Icon on right</p>
+    </ion-label>
+    <ion-icon name="close-circle" slot="end"></ion-icon>
+  </ion-item>
+</template>
+```
+
+Buttons in Items
+
+```html
+<template>
+  <ion-item>
+    <ion-button slot="start">
+      Start
+    </ion-button>
+    <ion-label>Button Start/End</ion-label>
+    <ion-button slot="end">
+      End
+    </ion-button>
+  </ion-item>
+
+  <ion-item>
+    <ion-button slot="start">
+      Start Icon
+      <ion-icon name="home" slot="end"></ion-icon>
+    </ion-button>
+    <ion-label>Buttons with Icons</ion-label>
+    <ion-button slot="end">
+      <ion-icon name="star" slot="end"></ion-icon>
+      End Icon
+    </ion-button>
+  </ion-item>
+
+  <ion-item>
+    <ion-button slot="start">
+      <ion-icon slot="icon-only" name="navigate"></ion-icon>
+    </ion-button>
+    <ion-label>Icon only Buttons</ion-label>
+    <ion-button slot="end">
+      <ion-icon slot="icon-only" name="star"></ion-icon>
+    </ion-button>
+  </ion-item>
+</template>
+```
+
+Icons in Items
+
+```html
+<template>
+  <ion-item>
+    <ion-label>
+      Icon End
+    </ion-label>
+    <ion-icon name="information-circle" slot="end"></ion-icon>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>
+      Large Icon End
+    </ion-label>
+    <ion-icon name="information-circle" size="large" slot="end"></ion-icon>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>
+      Small Icon End
+    </ion-label>
+    <ion-icon name="information-circle" size="small" slot="end"></ion-icon>
+  </ion-item>
+
+  <ion-item>
+    <ion-icon name="star" slot="start"></ion-icon>
+    <ion-label>
+      Icon Start
+    </ion-label>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>
+      Two Icons End
+    </ion-label>
+    <ion-icon name="checkmark-circle" slot="end"></ion-icon>
+    <ion-icon name="shuffle" slot="end"></ion-icon>
+  </ion-item>
+</template>
+```
+
+Item Inputs
+
+```html
+<template>
+  <ion-item>
+    <ion-label position="floating">Datetime</ion-label>
+    <ion-datetime></ion-datetime>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="floating">Select</ion-label>
+    <ion-select>
+      <ion-select-option value="">No Game Console</ion-select-option>
+      <ion-select-option value="nes">NES</ion-select-option>
+      <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
+      <ion-select-option value="ps">PlayStation</ion-select-option>
+      <ion-select-option value="genesis">Sega Genesis</ion-select-option>
+      <ion-select-option value="saturn">Sega Saturn</ion-select-option>
+      <ion-select-option value="snes">SNES</ion-select-option>
+    </ion-select>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Toggle</ion-label>
+    <ion-toggle slot="end"></ion-toggle>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="floating">Floating Input</ion-label>
+    <ion-input></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Input (placeholder)</ion-label>
+    <ion-input placeholder="Placeholder"></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Checkbox</ion-label>
+    <ion-checkbox slot="start"></ion-checkbox>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Range</ion-label>
+    <ion-range></ion-range>
+  </ion-item>
+</template>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/label/readme.md b/core/src/components/label/readme.md
index e4e5ac746b7..595866899f9 100644
--- a/core/src/components/label/readme.md
+++ b/core/src/components/label/readme.md
@@ -134,6 +134,66 @@ export default Example;
 ```
 
 
+### Vue
+
+```html
+<template>
+  <!-- Default Label -->
+  <ion-label>Label</ion-label>
+
+  <!-- Label Colors -->
+  <ion-label color="primary">Primary Label</ion-label>
+  <ion-label color="secondary">Secondary Label</ion-label>
+  <ion-label color="danger">Danger Label</ion-label>
+  <ion-label color="light">Light Label</ion-label>
+  <ion-label color="dark">Dark Label</ion-label>
+
+  <!-- Item Labels -->
+  <ion-item>
+    <ion-label>Default Item</ion-label>
+  </ion-item>
+
+  <ion-item text-wrap>
+    <ion-label>
+      Multi-line text that should wrap when it is too long
+      to fit on one line in the item.
+    </ion-label>
+  </ion-item>
+
+  <!-- Input Labels -->
+  <ion-item>
+    <ion-label>Default Input</ion-label>
+    <ion-input></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="fixed">Fixed</ion-label>
+    <ion-input></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="floating">Floating</ion-label>
+    <ion-input></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label position="stacked">Stacked</ion-label>
+    <ion-input></ion-input>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Toggle</ion-label>
+    <ion-toggle slot="end" checked></ion-toggle>
+  </ion-item>
+
+  <ion-item>
+    <ion-checkbox slot="start" checked></ion-checkbox>
+    <ion-label>Checkbox</ion-label>
+  </ion-item>
+</template>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/list/readme.md b/core/src/components/list/readme.md
index 3981793f269..f335f3e6265 100644
--- a/core/src/components/list/readme.md
+++ b/core/src/components/list/readme.md
@@ -216,6 +216,73 @@ export default Example;
 ```
 
 
+### Vue
+
+```html
+<template>
+  <!-- List of Text Items -->
+  <ion-list>
+    <ion-item>
+      <ion-label>Pokémon Yellow</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Mega Man X</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>The Legend of Zelda</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Pac-Man</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label>Super Mario World</ion-label>
+    </ion-item>
+  </ion-list>
+
+  <!-- List of Input Items -->
+  <ion-list>
+    <ion-item>
+      <ion-label>Input</ion-label>
+      <ion-input></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-label>Toggle</ion-label>
+      <ion-toggle slot="end"></ion-toggle>
+    </ion-item>
+    <ion-item>
+      <ion-label>Radio</ion-label>
+      <ion-radio slot="end"></ion-radio>
+    </ion-item>
+    <ion-item>
+      <ion-label>Checkbox</ion-label>
+      <ion-checkbox slot="start"></ion-checkbox>
+    </ion-item>
+  </ion-list>
+
+  <!-- List of Sliding Items -->
+  <ion-list>
+    <ion-item-sliding>
+      <ion-item>
+        <ion-label>Item</ion-label>
+      </ion-item>
+      <ion-item-options side="end">
+        <ion-item-option @click="unread(item)">Unread</ion-item-option>
+      </ion-item-options>
+    </ion-item-sliding>
+
+    <ion-item-sliding>
+      <ion-item>
+        <ion-label>Item</ion-label>
+      </ion-item>
+      <ion-item-options side="end">
+        <ion-item-option @click="unread(item)">Unread</ion-item-option>
+      </ion-item-options>
+    </ion-item-sliding>
+  </ion-list>
+</template>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/menu/readme.md b/core/src/components/menu/readme.md
index be054cfe13f..fae53045e85 100644
--- a/core/src/components/menu/readme.md
+++ b/core/src/components/menu/readme.md
@@ -270,6 +270,93 @@ export default Example;
 ```
 
 
+### Vue
+
+```html
+<template>
+  <ion-menu side="start" menuId="first">
+    <ion-header>
+      <ion-toolbar color="primary">
+        <ion-title>Start Menu</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <ion-list>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-menu>
+
+  <ion-menu side="start" menuId="custom" class="my-custom-menu">
+    <ion-header>
+      <ion-toolbar color="tertiary">
+        <ion-title>Custom Menu</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <ion-list>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-menu>
+
+  <ion-menu side="end" type="push">
+    <ion-header>
+      <ion-toolbar color="danger">
+        <ion-title>End Menu</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <ion-list>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+        <ion-item>Menu Item</ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-menu>
+
+  <ion-router-outlet main></ion-router-outlet>
+</template>
+<style>
+.my-custom-menu {
+  --width: 500px;
+}
+</style>
+
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+
+  @Component()
+  export default class MenuExample extends Vue {
+
+    openFirst() {
+      this.menu.enable(true, 'first');
+      this.menu.open('first');
+    }
+
+    openEnd() {
+      this.menu.open('end');
+    }
+
+    openCustom() {
+      this.menu.enable(true, 'custom');
+      this.menu.open('custom');
+    }
+  }
+</script>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/note/readme.md b/core/src/components/note/readme.md
index 111ee5f920a..dbead3686c1 100644
--- a/core/src/components/note/readme.md
+++ b/core/src/components/note/readme.md
@@ -73,6 +73,36 @@ const Example: React.SFC<{}> = () => (
 export default Example
 
 
+### Vue
+
+```html
+<template>
+  <!-- Default Note -->
+  <ion-note>Default Note</ion-note>
+
+  <!-- Note Colors -->
+  <ion-note color="primary">Primary Note</ion-note>
+  <ion-note color="secondary">Secondary Note</ion-note>
+  <ion-note color="danger">Danger Note</ion-note>
+  <ion-note color="light">Light Note</ion-note>
+  <ion-note color="dark">Dark Note</ion-note>
+
+  <!-- Notes in a List -->
+  <ion-list>
+    <ion-item>
+      <ion-label>Note (End)</ion-label>
+      <ion-note slot="end">On</ion-note>
+    </ion-item>
+
+    <ion-item>
+      <ion-note slot="start">Off</ion-note>
+      <ion-label>Note (Start)</ion-label>
+    </ion-item>
+  </ion-list>
+</template>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/radio-group/readme.md b/core/src/components/radio-group/readme.md
index 00f14185ba4..8d86c8c7c0d 100644
--- a/core/src/components/radio-group/readme.md
+++ b/core/src/components/radio-group/readme.md
@@ -97,6 +97,46 @@ const Example: React.SFC<{}> = () => (
 export default Example
 
 
+### Vue
+
+```html
+<template>
+  <ion-list>
+    <ion-radio-group>
+      <ion-list-header>
+        Auto Manufacturers
+      </ion-list-header>
+
+      <ion-item>
+        <ion-label>Cord</ion-label>
+        <ion-radio value="cord"></ion-radio>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>Duesenberg</ion-label>
+        <ion-radio value="duesenberg"></ion-radio>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>Hudson</ion-label>
+        <ion-radio value="hudson"></ion-radio>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>Packard</ion-label>
+        <ion-radio value="packard"></ion-radio>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>Studebaker</ion-label>
+        <ion-radio value="studebaker"></ion-radio>
+      </ion-item>
+    </ion-radio-group>
+  </ion-list>
+</template>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/radio/readme.md b/core/src/components/radio/readme.md
index d751718c6aa..e8370989051 100644
--- a/core/src/components/radio/readme.md
+++ b/core/src/components/radio/readme.md
@@ -76,6 +76,36 @@ const Example: React.SFC<{}> = () => (
 export default Example
 
 
+### Vue
+
+```html
+<template>
+  <ion-list>
+    <ion-radio-group>
+      <ion-list-header>
+        <ion-label>Name</ion-label>
+      </ion-list-header>
+
+      <ion-item>
+        <ion-label>Biff</ion-label>
+        <ion-radio slot="start" value="biff" checked></ion-radio>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>Griff</ion-label>
+        <ion-radio slot="start" value="griff"></ion-radio>
+      </ion-item>
+
+      <ion-item>
+        <ion-label>Buford</ion-label>
+        <ion-radio slot="start" value="buford"></ion-radio>
+      </ion-item>
+    </ion-radio-group>
+  </ion-list>
+</template>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/range/readme.md b/core/src/components/range/readme.md
index 90a9a428d37..754a727c43d 100644
--- a/core/src/components/range/readme.md
+++ b/core/src/components/range/readme.md
@@ -125,6 +125,41 @@ export default Example;
 ```
 
 
+### Vue
+
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-range color="danger" pin="true"></ion-range>
+    </ion-item>
+
+    <ion-item>
+      <ion-range min="-200" max="200" color="secondary">
+        <ion-label slot="start">-200</ion-label>
+        <ion-label slot="end">200</ion-label>
+      </ion-range>
+    </ion-item>
+
+  <ion-item>
+    <ion-range min="20" max="80" step="2">
+      <ion-icon size="small" slot="start" name="sunny"></ion-icon>
+      <ion-icon slot="end" name="sunny"></ion-icon>
+    </ion-range>
+  </ion-item>
+
+    <ion-item>
+      <ion-range min="1000" max="2000" step="100" snaps="true" color="secondary"></ion-range>
+    </ion-item>
+
+    <ion-item>
+      <ion-range dualKnobs="true" min="21" max="72" step="3" snaps="true"></ion-range>
+    </ion-item>
+  </ion-list>
+</template>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/refresher/readme.md b/core/src/components/refresher/readme.md
index 954ee8a17b6..cc47aae26e7 100644
--- a/core/src/components/refresher/readme.md
+++ b/core/src/components/refresher/readme.md
@@ -131,6 +131,48 @@ const Example: React.SFC<{}> = () => (
 export default Example
 
 
+### Vue
+
+```html
+<template>
+  <!-- Default Refresher -->
+  <ion-content>
+    <ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
+      <ion-refresher-content></ion-refresher-content>
+    </ion-refresher>
+  </ion-content>
+
+  <!-- Custom Refresher Content -->
+  <ion-content>
+    <ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
+      <ion-refresher-content
+        pullingIcon="arrow-dropdown"
+        pullingText="Pull to refresh"
+        refreshingSpinner="circles"
+        refreshingText="Refreshing...">
+      </ion-refresher-content>
+    </ion-refresher>
+  </ion-content>
+</template>
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+
+  @Component()
+  export default class Menu extends Vue {
+
+    doRefresh(event) {
+      console.log('Begin async operation');
+
+      setTimeout(() => {
+        console.log('Async operation has ended');
+        event.target.complete();
+      }, 2000);
+    }
+  }
+</script>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/reorder-group/readme.md b/core/src/components/reorder-group/readme.md
index 4ed45fd7efe..1fd54c1302c 100644
--- a/core/src/components/reorder-group/readme.md
+++ b/core/src/components/reorder-group/readme.md
@@ -225,6 +225,61 @@ const Example: React.SFC<{}> = () => (
 export default Example
 
 
+### Vue
+
+```html
+<template>
+  <ion-content>
+    <ion-list>
+      <ion-reorder-group>
+
+        <ion-item>
+          <ion-label>
+            Item 1
+          </ion-label>
+          <ion-reorder slot="end"></ion-reorder>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            Item 2 (default ion-reorder slot="start")
+          </ion-label>
+          <ion-reorder slot="start"></ion-reorder>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            Item 3 (custom ion-reorder)
+          </ion-label>
+          <ion-reorder slot="end">
+            <ion-icon name="pizza"></ion-icon>
+          </ion-reorder>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>
+            Item 4 (custom ion-reorder slot="start")
+          </ion-label>
+          <ion-reorder slot="start">
+            <ion-icon name="pizza"></ion-icon>
+          </ion-reorder>
+        </ion-item>
+
+        <ion-reorder>
+          <ion-item>
+            <ion-label>
+              Item 5 (the whole item can be dragged)
+            </ion-label>
+            </ion-item>
+        </ion-reorder>
+
+      </ion-reorder-group>
+    </ion-list>
+  </ion-content>
+</template>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/searchbar/readme.md b/core/src/components/searchbar/readme.md
index 769a4211133..6a9c167ed13 100644
--- a/core/src/components/searchbar/readme.md
+++ b/core/src/components/searchbar/readme.md
@@ -123,6 +123,42 @@ export default Example;
 ```
 
 
+### Vue
+
+```html
+<template>
+  <!-- Default Searchbar -->
+  <ion-searchbar></ion-searchbar>
+
+  <!-- Searchbar with danger color -->
+  <ion-searchbar color="danger"></ion-searchbar>
+
+  <!-- Searchbar with value -->
+  <ion-searchbar value="Ionic"></ion-searchbar>
+
+  <!-- Searchbar with telephone type -->
+  <ion-searchbar type="tel"></ion-searchbar>
+
+  <!-- Searchbar with a cancel button and custom cancel button text -->
+  <ion-searchbar showCancelButton cancelButtonText="Custom Cancel"></ion-searchbar>
+
+  <!-- Searchbar with a custom debounce -->
+  <ion-searchbar debounce="500"></ion-searchbar>
+
+  <!-- Animated Searchbar -->
+  <ion-searchbar animated></ion-searchbar>
+
+  <!-- Searchbar with a placeholder -->
+  <ion-searchbar placeholder="Filter Schedules"></ion-searchbar>
+
+  <!-- Searchbar in a Toolbar -->
+  <ion-toolbar>
+    <ion-searchbar></ion-searchbar>
+  </ion-toolbar>
+</template>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/segment-button/readme.md b/core/src/components/segment-button/readme.md
index 5d0b951794e..328287dd1dc 100644
--- a/core/src/components/segment-button/readme.md
+++ b/core/src/components/segment-button/readme.md
@@ -466,6 +466,160 @@ export default Example;
 ```
 
 
+### Vue
+
+```html
+<template>
+  <!-- Segment buttons with text and click listeners -->
+  <ion-segment>
+    <ion-segment-button @ionSelect="segmentButtonClicked($event)">
+      <ion-label>Friends</ion-label>
+    </ion-segment-button>
+    <ion-segment-button @ionSelect="segmentButtonClicked($event)">
+      <ion-label>Enemies</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+
+  <!-- Segment buttons with the first checked and the last disabled -->
+  <ion-segment>
+    <ion-segment-button checked>
+      <ion-label>Paid</ion-label>
+    </ion-segment-button>
+    <ion-segment-button>
+      <ion-label>Free</ion-label>
+    </ion-segment-button>
+    <ion-segment-button disabled>
+      <ion-label>Top</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+
+  <!-- Segment buttons with values and icons -->
+  <ion-segment>
+    <ion-segment-button value="camera">
+      <ion-icon name="camera"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button value="bookmark">
+      <ion-icon name="bookmark"></ion-icon>
+    </ion-segment-button>
+  </ion-segment>
+
+  <!-- Segment with a value that checks the last button -->
+  <ion-segment value="shared">
+    <ion-segment-button value="bookmarks">
+      <ion-label>Bookmarks</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="reading">
+      <ion-label>Reading List</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="shared">
+      <ion-label>Shared Links</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+
+  <!-- Label only -->
+  <ion-segment>
+    <ion-segment-button checked>
+      <ion-label>Item One</ion-label>
+    </ion-segment-button>
+    <ion-segment-button>
+      <ion-label>Item Two</ion-label>
+    </ion-segment-button>
+    <ion-segment-button>
+      <ion-label>Item Three</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+
+  <!-- Icon only -->
+  <ion-segment>
+    <ion-segment-button>
+      <ion-icon name="call"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button checked>
+      <ion-icon name="heart"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button>
+      <ion-icon name="pin"></ion-icon>
+    </ion-segment-button>
+  </ion-segment>
+
+  <!-- Icon top -->
+  <ion-segment>
+    <ion-segment-button>
+      <ion-label>Item One</ion-label>
+      <ion-icon name="call"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button checked>
+      <ion-label>Item Two</ion-label>
+      <ion-icon name="heart"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button>
+      <ion-label>Item Three</ion-label>
+      <ion-icon name="pin"></ion-icon>
+    </ion-segment-button>
+  </ion-segment>
+
+  <!-- Icon bottom -->
+  <ion-segment>
+    <ion-segment-button checked layout="icon-bottom">
+      <ion-icon name="call"></ion-icon>
+      <ion-label>Item One</ion-label>
+    </ion-segment-button>
+    <ion-segment-button layout="icon-bottom">
+      <ion-icon name="heart"></ion-icon>
+      <ion-label>Item Two</ion-label>
+    </ion-segment-button>
+    <ion-segment-button layout="icon-bottom">
+      <ion-icon name="pin"></ion-icon>
+      <ion-label>Item Three</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+
+  <!-- Icon start -->
+  <ion-segment>
+    <ion-segment-button checked layout="icon-start">
+      <ion-label>Item One</ion-label>
+      <ion-icon name="call"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button layout="icon-start">
+      <ion-label>Item Two</ion-label>
+      <ion-icon name="heart"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button layout="icon-start">
+      <ion-label>Item Three</ion-label>
+      <ion-icon name="pin"></ion-icon>
+    </ion-segment-button>
+  </ion-segment>
+
+  <!-- Icon end -->
+  <ion-segment>
+    <ion-segment-button checked layout="icon-end">
+      <ion-icon name="call"></ion-icon>
+      <ion-label>Item One</ion-label>
+    </ion-segment-button>
+    <ion-segment-button disabled layout="icon-end">
+      <ion-icon name="heart"></ion-icon>
+      <ion-label>Item Two</ion-label>
+    </ion-segment-button>
+    <ion-segment-button layout="icon-end">
+      <ion-icon name="pin"></ion-icon>
+      <ion-label>Item Three</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+</template>
+
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+
+  @Component()
+  export default class MenuExample extends Vue {
+    segmentButtonClicked(ev: any) {
+      console.log('Segment button clicked', ev);
+    }
+  }
+</script>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/segment/readme.md b/core/src/components/segment/readme.md
index 4e60c2982d3..4e40913ee95 100644
--- a/core/src/components/segment/readme.md
+++ b/core/src/components/segment/readme.md
@@ -330,6 +330,114 @@ export default Example;
 ```
 
 
+### Vue
+
+```html
+<template>
+  <!-- Default Segment -->
+  <ion-segment @ionChange="segmentChanged($event)">
+    <ion-segment-button value="friends">
+      <ion-label>Friends</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="enemies">
+      <ion-label>Enemies</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+
+  <!-- Disabled Segment -->
+  <ion-segment @ionChange="segmentChanged($event)" disabled>
+    <ion-segment-button value="sunny" checked>
+      <ion-label>Sunny</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="rainy">
+      <ion-label>Rainy</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+
+  <!-- Segment with anchors -->
+  <ion-segment @ionChange="segmentChanged($event)">
+    <ion-segment-button href="#dogs" value="dogs">
+      <ion-label>Dogs</ion-label>
+    </ion-segment-button>
+    <ion-segment-button href="#cats" value="cats">
+      <ion-label>Cats</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+
+  <!-- Scrollable Segment -->
+  <ion-segment scrollable>
+    <ion-segment-button>
+      <ion-icon name="home"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button checked>
+      <ion-icon name="heart"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button>
+      <ion-icon name="pin"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button>
+      <ion-icon name="star"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button>
+      <ion-icon name="call"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button>
+      <ion-icon name="globe"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button>
+      <ion-icon name="basket"></ion-icon>
+    </ion-segment-button>
+  </ion-segment>
+
+  <!-- Segment with secondary color -->
+  <ion-segment @ionChange="segmentChanged($event)" color="secondary">
+    <ion-segment-button value="standard">
+      <ion-label>Standard</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="hybrid">
+      <ion-label>Hybrid</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="sat">
+      <ion-label>Satellite</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+
+  <!-- Segment in a toolbar -->
+  <ion-toolbar>
+    <ion-segment @ionChange="segmentChanged($event)">
+      <ion-segment-button value="camera">
+        <ion-icon name="camera"></ion-icon>
+      </ion-segment-button>
+      <ion-segment-button value="bookmark">
+        <ion-icon name="bookmark"></ion-icon>
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+
+  <!-- Segment with default selection -->
+  <ion-segment @ionChange="segmentChanged($event)" value="javascript">
+    <ion-segment-button value="python">
+      <ion-label>Python</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="javascript">
+      <ion-label>Javascript</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+</template>
+
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+
+  @Component()
+  export default class MenuExample extends Vue {
+    segmentChanged(ev: any) {
+      console.log('Segment changed', ev);
+    }
+  }
+</script>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/select/readme.md b/core/src/components/select/readme.md
index cca9f9ad2fb..d14f3366c4d 100644
--- a/core/src/components/select/readme.md
+++ b/core/src/components/select/readme.md
@@ -453,6 +453,147 @@ export default Example;
 ```
 
 
+### Vue
+
+## Single Selection
+
+```html
+<template>
+  <ion-list>
+    <ion-list-header>Single Selection</ion-list-header>
+
+    <ion-item>
+      <ion-label>Gender</ion-label>
+      <ion-select placeholder="Select One">
+        <ion-select-option value="f">Female</ion-select-option>
+        <ion-select-option value="m">Male</ion-select-option>
+      </ion-select>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Hair Color</ion-label>
+      <ion-select value="brown" okText="Okay" cancelText="Dismiss">
+        <ion-select-option value="brown">Brown</ion-select-option>
+        <ion-select-option value="blonde">Blonde</ion-select-option>
+        <ion-select-option value="black">Black</ion-select-option>
+        <ion-select-option value="red">Red</ion-select-option>
+      </ion-select>
+    </ion-item>
+
+  </ion-list>
+</template>
+```
+
+## Multiple Selection
+
+```html
+<template>
+  <ion-list>
+    <ion-list-header>Multiple Selection</ion-list-header>
+
+    <ion-item>
+      <ion-label>Toppings</ion-label>
+      <ion-select multiple="true" cancelText="Nah" okText="Okay!">
+        <ion-select-option value="bacon">Bacon</ion-select-option>
+        <ion-select-option value="olives">Black Olives</ion-select-option>
+        <ion-select-option value="xcheese">Extra Cheese</ion-select-option>
+        <ion-select-option value="peppers">Green Peppers</ion-select-option>
+        <ion-select-option value="mushrooms">Mushrooms</ion-select-option>
+        <ion-select-option value="onions">Onions</ion-select-option>
+        <ion-select-option value="pepperoni">Pepperoni</ion-select-option>
+        <ion-select-option value="pineapple">Pineapple</ion-select-option>
+        <ion-select-option value="sausage">Sausage</ion-select-option>
+        <ion-select-option value="Spinach">Spinach</ion-select-option>
+      </ion-select>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Pets</ion-label>
+      <ion-select multiple="true">
+        <ion-select-option value="bird" selected>Bird</ion-select-option>
+        <ion-select-option value="cat">Cat</ion-select-option>
+        <ion-select-option value="dog" selected>Dog</ion-select-option>
+        <ion-select-option value="honeybadger">Honey Badger</ion-select-option>
+      </ion-select>
+    </ion-item>
+  </ion-list>
+</template>
+```
+
+## Interface Options
+
+```html
+<template>
+  <ion-list>
+    <ion-list-header>Interface Options</ion-list-header>
+
+    <ion-item>
+      <ion-label>Alert</ion-label>
+      <ion-select :interfaceOptions="customAlertOptions" interface="alert" multiple="true" placeholder="Select One">
+        <ion-select-option value="bacon">Bacon</ion-select-option>
+        <ion-select-option value="olives">Black Olives</ion-select-option>
+        <ion-select-option value="xcheese">Extra Cheese</ion-select-option>
+        <ion-select-option value="peppers">Green Peppers</ion-select-option>
+        <ion-select-option value="mushrooms">Mushrooms</ion-select-option>
+        <ion-select-option value="onions">Onions</ion-select-option>
+        <ion-select-option value="pepperoni">Pepperoni</ion-select-option>
+        <ion-select-option value="pineapple">Pineapple</ion-select-option>
+        <ion-select-option value="sausage">Sausage</ion-select-option>
+        <ion-select-option value="Spinach">Spinach</ion-select-option>
+      </ion-select>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Popover</ion-label>
+      <ion-select :interfaceOptions="customPopoverOptions" interface="popover" placeholder="Select One">
+        <ion-select-option value="brown">Brown</ion-select-option>
+        <ion-select-option value="blonde">Blonde</ion-select-option>
+        <ion-select-option value="black">Black</ion-select-option>
+        <ion-select-option value="red">Red</ion-select-option>
+      </ion-select>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Action Sheet</ion-label>
+      <ion-select :interfaceOptions]="customActionSheetOptions" interface="action-sheet" placeholder="Select One">
+        <ion-select-option value="red">Red</ion-select-option>
+        <ion-select-option value="purple">Purple</ion-select-option>
+        <ion-select-option value="yellow">Yellow</ion-select-option>
+        <ion-select-option value="orange">Orange</ion-select-option>
+        <ion-select-option value="green">Green</ion-select-option>
+      </ion-select>
+    </ion-item>
+
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+
+  @Component()
+  export default class SelectExample extends Vue {
+    customAlertOptions: any = {
+      header: 'Pizza Toppings',
+      subHeader: 'Select your toppings',
+      message: '$1.00 per topping',
+      translucent: true
+    };
+
+    customPopoverOptions: any = {
+      header: 'Hair Color',
+      subHeader: 'Select your hair color',
+      message: 'Only select your dominant hair color'
+    };
+
+    customActionSheetOptions: any = {
+      header: 'Colors',
+      subHeader: 'Select your favorite color'
+    };
+  }
+</script>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/skeleton-text/readme.md b/core/src/components/skeleton-text/readme.md
index f86a9d6ae60..eae894e2f44 100644
--- a/core/src/components/skeleton-text/readme.md
+++ b/core/src/components/skeleton-text/readme.md
@@ -321,6 +321,163 @@ function onLoad() {
 ```
 
 
+### Vue
+
+```html
+<template>
+  <!-- Data to display after skeleton screen -->
+  <div v-if="data">
+    <div class="ion-padding">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac eros est. Cras iaculis pulvinar arcu non vehicula. Fusce at quam a eros malesuada condimentum. Aliquam tincidunt tincidunt vehicula.
+    </div>
+
+    <ion-list>
+      <ion-list-header>Data</ion-list-header>
+      <ion-item>
+        <ion-avatar slot="start">
+          <img src="./avatar.svg">
+        </ion-avatar>
+        <ion-label>
+          <h3>
+            {{ data.heading }}
+          </h3>
+          <p>
+            {{ data.para1 }}
+          </p>
+          <p>
+            {{ data.para2 }}
+          </p>
+        </ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-thumbnail slot="start">
+          <img src="./thumbnail.svg">
+        </ion-thumbnail>
+        <ion-label>
+          <h3>
+            {{ data.heading }}
+          </h3>
+          <p>
+            {{ data.para1 }}
+          </p>
+          <p>
+            {{ data.para2 }}
+          </p>
+        </ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-icon name="call" slot="start"></ion-icon>
+        <ion-label>
+          <h3>
+            {{ data.heading }}
+          </h3>
+          <p>
+            {{ data.para1 }}
+          </p>
+          <p>
+            {{ data.para2 }}
+          </p>
+        </ion-label>
+      </ion-item>
+    </ion-list>
+  </div>
+
+  <!-- Skeleton screen -->
+  <div *ngIf="!data">
+    <div class="ion-padding custom-skeleton">
+      <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+      <ion-skeleton-text animated></ion-skeleton-text>
+      <ion-skeleton-text animated style="width: 88%"></ion-skeleton-text>
+      <ion-skeleton-text animated style="width: 70%"></ion-skeleton-text>
+      <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+    </div>
+
+    <ion-list>
+      <ion-list-header>
+        <ion-skeleton-text animated style="width: 20%"></ion-skeleton-text>
+      </ion-list-header>
+      <ion-item>
+        <ion-avatar slot="start">
+          <ion-skeleton-text animated></ion-skeleton-text>
+        </ion-avatar>
+        <ion-label>
+          <h3>
+            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+          </h3>
+          <p>
+            <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+          </p>
+          <p>
+            <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+          </p>
+        </ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-thumbnail slot="start">
+          <ion-skeleton-text animated></ion-skeleton-text>
+        </ion-thumbnail>
+        <ion-label>
+          <h3>
+            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+          </h3>
+          <p>
+            <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+          </p>
+          <p>
+            <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+          </p>
+        </ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-skeleton-text animated style="width: 27px; height: 27px" slot="start"></ion-skeleton-text>
+        <ion-label>
+          <h3>
+            <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
+          </h3>
+          <p>
+            <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
+          </p>
+          <p>
+            <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
+          </p>
+        </ion-label>
+      </ion-item>
+    </ion-list>
+  </div>
+</template>
+
+<style>
+  /* Custom Skeleton Line Height and Margin */
+  .custom-skeleton ion-skeleton-text {
+    line-height: 13px;
+  }
+
+  .custom-skeleton ion-skeleton-text:last-child {
+    margin-bottom: 5px;
+  }
+</style>
+
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+
+  @Component()
+  export default class SkeletonTextExample extends Vue {
+    data: any;
+
+    mounted() {
+      setTimeout(() => {
+        this.data = {
+          'heading': 'Normal text',
+          'para1': 'Lorem ipsum dolor sit amet, consectetur',
+          'para2': 'adipiscing elit.'
+        };
+      }, 5000);
+    }
+  }
+</script>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/slides/readme.md b/core/src/components/slides/readme.md
index 55bfe5071ef..ea42e23e729 100644
--- a/core/src/components/slides/readme.md
+++ b/core/src/components/slides/readme.md
@@ -107,6 +107,37 @@ export default Example;
 ```
 
 
+### Vue
+
+```html
+<template>
+  <ion-slides pager="true" :options="slideOpts">
+    <ion-slide>
+      <h1>Slide 1</h1>
+    </ion-slide>
+    <ion-slide>
+      <h1>Slide 2</h1>
+    </ion-slide>
+    <ion-slide>
+      <h1>Slide 3</h1>
+    </ion-slide>
+  </ion-slides>
+</template>
+
+
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator';
+
+  @Component()
+  export default class SelectExample extends Vue {
+    slideOpts = {
+      effect: 'flip'
+    };
+  }
+</script>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/spinner/readme.md b/core/src/components/spinner/readme.md
index cbce4b1b783..54ad686013a 100644
--- a/core/src/components/spinner/readme.md
+++ b/core/src/components/spinner/readme.md
@@ -79,6 +79,37 @@ export default Example;
 ```
 
 
+### Vue
+
+```html
+<template>
+  <!-- Default Spinner -->
+  <ion-spinner></ion-spinner>
+
+  <!-- Lines -->
+  <ion-spinner name="lines"></ion-spinner>
+
+  <!-- Lines Small -->
+  <ion-spinner name="lines-small"></ion-spinner>
+
+  <!-- Dots -->
+  <ion-spinner name="dots"></ion-spinner>
+
+  <!-- Bubbles -->
+  <ion-spinner name="bubbles"></ion-spinner>
+
+  <!-- Circles -->
+  <ion-spinner name="circles"></ion-spinner>
+
+  <!-- Crescent -->
+  <ion-spinner name="crescent"></ion-spinner>
+
+  <!-- Paused Default Spinner -->
+  <ion-spinner paused></ion-spinner>
+</template>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/split-pane/readme.md b/core/src/components/split-pane/readme.md
index 6345da85373..31aea0d5eb5 100644
--- a/core/src/components/split-pane/readme.md
+++ b/core/src/components/split-pane/readme.md
@@ -110,6 +110,27 @@ export default Example;
 ```
 
 
+### Vue
+
+```html
+<template>
+  <ion-split-pane contentId="menu-content">
+    <!--  our side menu  -->
+    <ion-menu contentId="menu-content">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Menu</ion-title>
+        </ion-toolbar>
+      </ion-header>
+    </ion-menu>
+
+    <!-- the main content -->
+    <ion-router-outlet id="menu-content"></ion-router-outlet>
+  </ion-split-pane>
+</template>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/tab-bar/readme.md b/core/src/components/tab-bar/readme.md
index 9a1302bd19b..a6a1cb1f232 100644
--- a/core/src/components/tab-bar/readme.md
+++ b/core/src/components/tab-bar/readme.md
@@ -82,6 +82,28 @@ export default Example;
 ```
 
 
+### Vue
+
+```html
+<template>
+  <ion-tabs>
+    <!-- Tab bar -->
+    <ion-tab-bar slot="bottom">
+      <ion-tab-button tab="account">
+        <ion-icon name="person"></ion-icon>
+      </ion-tab-button>
+      <ion-tab-button tab="contact">
+        <ion-icon name="call"></ion-icon>
+      </ion-tab-button>
+      <ion-tab-button tab="settings">
+        <ion-icon name="settings"></ion-icon>
+      </ion-tab-button>
+    </ion-tab-bar>
+  </ion-tabs>
+</template>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/tab-button/readme.md b/core/src/components/tab-button/readme.md
index f0e0a05e582..0883a3356a8 100644
--- a/core/src/components/tab-button/readme.md
+++ b/core/src/components/tab-button/readme.md
@@ -128,6 +128,39 @@ export default Example;
 ```
 
 
+### Vue
+
+```html
+<template>
+  <ion-tabs>
+
+    <ion-tab-bar slot="bottom">
+      <ion-tab-button tab="schedule">
+        <ion-icon name="calendar"></ion-icon>
+        <ion-label>Schedule</ion-label>
+      </ion-tab-button>
+
+      <ion-tab-button tab="speakers">
+        <ion-icon name="contacts"></ion-icon>
+        <ion-label>Speakers</ion-label>
+      </ion-tab-button>
+
+      <ion-tab-button tab="map">
+        <ion-icon name="map"></ion-icon>
+        <ion-label>Map</ion-label>
+      </ion-tab-button>
+
+      <ion-tab-button tab="about">
+        <ion-icon name="information-circle"></ion-icon>
+        <ion-label>About</ion-label>
+      </ion-tab-button>
+    </ion-tab-bar>
+
+  </ion-tabs>
+</template>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/tabs/readme.md b/core/src/components/tabs/readme.md
index 88a41a3c996..8da17460d56 100644
--- a/core/src/components/tabs/readme.md
+++ b/core/src/components/tabs/readme.md
@@ -202,6 +202,38 @@ export default Example;
 ```
 
 
+### Vue
+
+```html
+<template>
+  <ion-tabs>
+    <ion-tab-bar slot="bottom">
+      <ion-tab-button tab="schedule">
+        <ion-icon name="calendar"></ion-icon>
+        <ion-label>Schedule</ion-label>
+        <ion-badge>6</ion-badge>
+      </ion-tab-button>
+
+      <ion-tab-button tab="speakers">
+        <ion-icon name="contacts"></ion-icon>
+        <ion-label>Speakers</ion-label>
+      </ion-tab-button>
+
+      <ion-tab-button tab="map">
+        <ion-icon name="map"></ion-icon>
+        <ion-label>Map</ion-label>
+      </ion-tab-button>
+
+      <ion-tab-button tab="about">
+        <ion-icon name="information-circle"></ion-icon>
+        <ion-label>About</ion-label>
+      </ion-tab-button>
+    </ion-tab-bar>
+  </ion-tabs>
+</template>
+```
+
+
 
 ## Events
 
diff --git a/core/src/components/textarea/readme.md b/core/src/components/textarea/readme.md
index 1ccf8dbc2e3..8c7bb4d793a 100644
--- a/core/src/components/textarea/readme.md
+++ b/core/src/components/textarea/readme.md
@@ -146,6 +146,49 @@ export default Example;
 ```
 
 
+### Vue
+
+```html
+<template>
+  <!-- Default textarea -->
+  <ion-textarea></ion-textarea>
+
+  <!-- Textarea in an item with a placeholder -->
+  <ion-item>
+    <ion-textarea placeholder="Enter more information here..."></ion-textarea>
+  </ion-item>
+
+  <!-- Textarea in an item with a floating label -->
+  <ion-item>
+    <ion-label position="floating">Description</ion-label>
+    <ion-textarea></ion-textarea>
+  </ion-item>
+
+  <!-- Disabled and readonly textarea in an item with a stacked label -->
+  <ion-item>
+    <ion-label position="stacked">Summary</ion-label>
+    <ion-textarea
+      disabled
+      readonly
+      value="Ionic enables developers to build performant, high-quality mobile apps.">
+    </ion-textarea>
+  </ion-item>
+
+  <!-- Textarea that clears the value on edit -->
+  <ion-item>
+    <ion-label>Comment</ion-label>
+    <ion-textarea clearOnEdit="true"></ion-textarea>
+  </ion-item>
+
+  <!-- Textarea with custom number of rows and cols -->
+  <ion-item>
+    <ion-label>Notes</ion-label>
+    <ion-textarea rows="6" cols="20" placeholder="Enter any notes here..."></ion-textarea>
+  </ion-item>
+</template>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/toggle/readme.md b/core/src/components/toggle/readme.md
index 83bfc12acdf..94939598c52 100644
--- a/core/src/components/toggle/readme.md
+++ b/core/src/components/toggle/readme.md
@@ -136,6 +136,47 @@ export default Example;
 ```
 
 
+### Vue
+
+```html
+<template>
+  <!-- Default Toggle -->
+  <ion-toggle></ion-toggle>
+
+  <!-- Disabled Toggle -->
+  <ion-toggle disabled></ion-toggle>
+
+  <!-- Checked Toggle -->
+  <ion-toggle checked></ion-toggle>
+
+  <!-- Toggle Colors -->
+  <ion-toggle color="primary"></ion-toggle>
+  <ion-toggle color="secondary"></ion-toggle>
+  <ion-toggle color="danger"></ion-toggle>
+  <ion-toggle color="light"></ion-toggle>
+  <ion-toggle color="dark"></ion-toggle>
+
+  <!-- Toggles in a List -->
+  <ion-list>
+    <ion-item>
+      <ion-label>Pepperoni</ion-label>
+      <ion-toggle @ionChange="toppings.push($event.target.value)" value="pepperoni" v-bind:checked="toppings.indexOf('pepperoni') !== -1"></ion-toggle>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Sausage</ion-label>
+      <ion-toggle @ionChange="toppings.push($event.target.value)" value="sausage" v-bind:checked="toppings.indexOf('pepperoni') !== -1" disabled="true"></ion-toggle>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Mushrooms</ion-label>
+      <ion-toggle @ionChange="toppings.push($event.target.value)" value="mushrooms" v-bind:checked="toppings.indexOf('pepperoni') !== -1"></ion-toggle>
+    </ion-item>
+  </ion-list>
+</template>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/toolbar/readme.md b/core/src/components/toolbar/readme.md
index 0ad26bea2dd..a6de7800907 100644
--- a/core/src/components/toolbar/readme.md
+++ b/core/src/components/toolbar/readme.md
@@ -511,6 +511,167 @@ export default Example;
 ```
 
 
+### Vue
+
+```html
+<template>
+  <ion-toolbar>
+    <ion-title>Title Only</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+    <ion-title>Back Button</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="secondary">
+      <ion-button>
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
+      </ion-button>
+      <ion-button>
+        <ion-icon slot="icon-only" name="search"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="primary">
+      <ion-button color="secondary">
+        <ion-icon slot="icon-only" name="more"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Default Buttons</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="secondary">
+      <ion-button fill="solid">
+        <ion-icon slot="start" name="contact"></ion-icon>
+        Contact
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Solid Buttons</ion-title>
+    <ion-buttons slot="primary">
+      <ion-button fill="solid" color="secondary">
+        Help
+        <ion-icon slot="end" name="help-circle"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="secondary">
+      <ion-button fill="outline">
+        <ion-icon slot="start" name="star"></ion-icon>
+        Star
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Outline Buttons</ion-title>
+    <ion-buttons slot="primary">
+      <ion-button color="danger" fill="outline">
+        Edit
+        <ion-icon slot="end" name="create"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="secondary">
+      <ion-button>
+        Account
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="primary">
+      <ion-button color="danger">
+        Edit
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Text Only Buttons</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-menu-button autoHide="false"></ion-menu-button>
+
+    </ion-buttons>
+    <ion-buttons slot="secondary">
+      <ion-button>
+        <ion-icon slot="icon-only" name="star"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Left side menu toggle</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="primary">
+      <ion-button @click="clickedStar()">
+        <ion-icon slot="icon-only" name="star"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Right side menu toggle</ion-title>
+    <ion-buttons slot="end">
+      <ion-menu-button autoHide="false"></ion-menu-button>
+
+    </ion-buttons>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-buttons slot="primary">
+      <ion-button @click="clickedSearch()">
+        <ion-icon slot="icon-only" name="search"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-searchbar placeholder="Search Favorites"></ion-searchbar>
+  </ion-toolbar>
+
+  <ion-toolbar>
+    <ion-segment>
+      <ion-segment-button value="all" checked>
+        All
+      </ion-segment-button>
+      <ion-segment-button value="favorites">
+        Favorites
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+
+  <ion-toolbar color="secondary">
+    <ion-buttons slot="secondary">
+      <ion-button>
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
+      </ion-button>
+      <ion-button>
+        <ion-icon slot="icon-only" name="search"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="primary">
+      <ion-button color="primary">
+        <ion-icon slot="icon-only" name="more"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Secondary Toolbar</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar color="dark">
+    <ion-buttons slot="secondary">
+      <ion-button>
+        <ion-icon slot="icon-only" name="contact"></ion-icon>
+      </ion-button>
+      <ion-button>
+        <ion-icon slot="icon-only" name="search"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-buttons slot="primary">
+      <ion-button color="danger">
+        <ion-icon slot="icon-only" name="more"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+    <ion-title>Dark Toolbar</ion-title>
+  </ion-toolbar>
+</template>
+```
+
+
 
 ## Properties