From da6263a0442db2a0e660976988cbb5b9a4b9cb7f Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Mon, 27 Jan 2020 14:22:42 -0500
Subject: [PATCH] docs(vue): update usage examples to kebab-case (#20313)

references #20296
---
 core/src/components/backdrop/readme.md        |  4 +--
 core/src/components/backdrop/usage/vue.md     |  4 +--
 core/src/components/buttons/readme.md         |  2 +-
 core/src/components/buttons/usage/vue.md      |  2 +-
 core/src/components/checkbox/readme.md        |  6 +++-
 core/src/components/checkbox/usage/vue.md     |  6 +++-
 core/src/components/datetime/readme.md        | 34 +++++++++----------
 core/src/components/datetime/usage/vue.md     | 34 +++++++++----------
 core/src/components/input/readme.md           |  2 +-
 core/src/components/input/usage/vue.md        |  2 +-
 core/src/components/progress-bar/readme.md    | 24 ++++++++++++-
 .../components/progress-bar/usage/angular.md  | 16 +++++++++
 core/src/components/progress-bar/usage/vue.md | 18 ++++++++++
 core/src/components/select/readme.md          | 10 +++---
 core/src/components/select/usage/vue.md       | 10 +++---
 core/src/components/textarea/readme.md        |  2 +-
 core/src/components/textarea/usage/vue.md     |  2 +-
 core/src/components/thumbnail/readme.md       | 20 ++++++++++-
 .../src/components/thumbnail/usage/angular.md | 12 +++++++
 core/src/components/thumbnail/usage/vue.md    | 14 ++++++++
 core/src/components/toggle/readme.md          | 19 +++++++++--
 core/src/components/toggle/usage/vue.md       | 19 +++++++++--
 core/src/components/toolbar/readme.md         |  4 +--
 core/src/components/toolbar/usage/vue.md      |  4 +--
 24 files changed, 202 insertions(+), 68 deletions(-)
 create mode 100644 core/src/components/progress-bar/usage/angular.md
 create mode 100644 core/src/components/progress-bar/usage/vue.md
 create mode 100644 core/src/components/thumbnail/usage/angular.md
 create mode 100644 core/src/components/thumbnail/usage/vue.md

diff --git a/core/src/components/backdrop/readme.md b/core/src/components/backdrop/readme.md
index 0011eeead5..8c671e13ff 100644
--- a/core/src/components/backdrop/readme.md
+++ b/core/src/components/backdrop/readme.md
@@ -114,13 +114,13 @@ export const BackdropExample: React.FC = () => (
   <ion-backdrop visible="false"></ion-backdrop>
 
   <!-- Backdrop with propagation -->
-  <ion-backdrop stopPropagation="false"></ion-backdrop>
+  <ion-backdrop stop-propagation="false"></ion-backdrop>
 
   <!-- Backdrop that sets dynamic properties -->
   <ion-backdrop
     :tappable="enableBackdropDismiss"
     :visible="showBackdrop"
-    :stopPropagation="shouldPropagate">
+    :stop-propagation="shouldPropagate">
   </ion-backdrop>
 </template>
 
diff --git a/core/src/components/backdrop/usage/vue.md b/core/src/components/backdrop/usage/vue.md
index d2ea30800e..c912d31816 100644
--- a/core/src/components/backdrop/usage/vue.md
+++ b/core/src/components/backdrop/usage/vue.md
@@ -10,13 +10,13 @@
   <ion-backdrop visible="false"></ion-backdrop>
 
   <!-- Backdrop with propagation -->
-  <ion-backdrop stopPropagation="false"></ion-backdrop>
+  <ion-backdrop stop-propagation="false"></ion-backdrop>
 
   <!-- Backdrop that sets dynamic properties -->
   <ion-backdrop
     :tappable="enableBackdropDismiss"
     :visible="showBackdrop"
-    :stopPropagation="shouldPropagate">
+    :stop-propagation="shouldPropagate">
   </ion-backdrop>
 </template>
 
diff --git a/core/src/components/buttons/readme.md b/core/src/components/buttons/readme.md
index 30587cf014..fb186fbae7 100644
--- a/core/src/components/buttons/readme.md
+++ b/core/src/components/buttons/readme.md
@@ -223,7 +223,7 @@ export const ButtonsExample: React.FC = () => (
     </ion-buttons>
     <ion-title>Right side menu toggle</ion-title>
     <ion-buttons slot="end">
-      <ion-menu-button autoHide="false"></ion-menu-button>
+      <ion-menu-button auto-hide="false"></ion-menu-button>
     </ion-buttons>
   </ion-toolbar>
 
diff --git a/core/src/components/buttons/usage/vue.md b/core/src/components/buttons/usage/vue.md
index 114cc2579b..060fbd2b67 100644
--- a/core/src/components/buttons/usage/vue.md
+++ b/core/src/components/buttons/usage/vue.md
@@ -32,7 +32,7 @@
     </ion-buttons>
     <ion-title>Right side menu toggle</ion-title>
     <ion-buttons slot="end">
-      <ion-menu-button autoHide="false"></ion-menu-button>
+      <ion-menu-button auto-hide="false"></ion-menu-button>
     </ion-buttons>
   </ion-toolbar>
 
diff --git a/core/src/components/checkbox/readme.md b/core/src/components/checkbox/readme.md
index 9fe619b517..5f57317e9e 100644
--- a/core/src/components/checkbox/readme.md
+++ b/core/src/components/checkbox/readme.md
@@ -163,7 +163,11 @@ export const CheckboxExample: React.FC = () => (
   <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-checkbox
+        slot="end"
+        @input="entry.checked = $event.target.value"
+        :value="entry.isChecked">
+      </ion-checkbox>
     </ion-item>
   </ion-list>
 </template>
diff --git a/core/src/components/checkbox/usage/vue.md b/core/src/components/checkbox/usage/vue.md
index 4465c8d655..84e3cbe4bd 100644
--- a/core/src/components/checkbox/usage/vue.md
+++ b/core/src/components/checkbox/usage/vue.md
@@ -20,7 +20,11 @@
   <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-checkbox
+        slot="end"
+        @input="entry.checked = $event.target.value"
+        :value="entry.isChecked">
+      </ion-checkbox>
     </ion-item>
   </ion-list>
 </template>
diff --git a/core/src/components/datetime/readme.md b/core/src/components/datetime/readme.md
index 140aceed5b..8a8c039094 100644
--- a/core/src/components/datetime/readme.md
+++ b/core/src/components/datetime/readme.md
@@ -543,80 +543,80 @@ export const DateTimeExample: React.FC = () => (
 <template>
   <ion-item>
     <ion-label>MMMM</ion-label>
-    <ion-datetime displayFormat="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
+    <ion-datetime display-format="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-datetime display-format="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-datetime id="dynamicDisabled" display-format="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-datetime :picker-options="customPickerOptions" placeholder="Custom Options" display-format="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-datetime display-format="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-datetime display-format="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-datetime display-format="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>
+      :day-short-names="customDayShortNames"
+      display-format="DDD. MMM DD, YY"
+      month-short-names="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-datetime display-format="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-datetime display-format="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-datetime display-format="HH:mm"></ion-datetime>
   </ion-item>
 
   <ion-item>
     <ion-label>h:mm a</ion-label>
-    <ion-datetime displayFormat="h:mm a"></ion-datetime>
+    <ion-datetime display-format="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-datetime display-format="h:mm A" minute-values="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-datetime display-format="MM/YYYY" picker-format="MMMM YYYY" month-values="6,7,8" :year-values="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-datetime month-values="6,7,8" year-values="2014,2015" day-values="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14" display-format="DD/MMM/YYYY"></ion-datetime>
   </ion-item>
 </template>
 
diff --git a/core/src/components/datetime/usage/vue.md b/core/src/components/datetime/usage/vue.md
index 3734c00fc4..6d5c6730b1 100644
--- a/core/src/components/datetime/usage/vue.md
+++ b/core/src/components/datetime/usage/vue.md
@@ -2,80 +2,80 @@
 <template>
   <ion-item>
     <ion-label>MMMM</ion-label>
-    <ion-datetime displayFormat="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
+    <ion-datetime display-format="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-datetime display-format="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-datetime id="dynamicDisabled" display-format="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-datetime :picker-options="customPickerOptions" placeholder="Custom Options" display-format="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-datetime display-format="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-datetime display-format="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-datetime display-format="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>
+      :day-short-names="customDayShortNames"
+      display-format="DDD. MMM DD, YY"
+      month-short-names="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-datetime display-format="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-datetime display-format="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-datetime display-format="HH:mm"></ion-datetime>
   </ion-item>
 
   <ion-item>
     <ion-label>h:mm a</ion-label>
-    <ion-datetime displayFormat="h:mm a"></ion-datetime>
+    <ion-datetime display-format="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-datetime display-format="h:mm A" minute-values="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-datetime display-format="MM/YYYY" picker-format="MMMM YYYY" month-values="6,7,8" :year-values="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-datetime month-values="6,7,8" year-values="2014,2015" day-values="01,02,03,04,05,06,08,09,10, 11, 12, 13, 14" display-format="DD/MMM/YYYY"></ion-datetime>
   </ion-item>
 </template>
 
diff --git a/core/src/components/input/readme.md b/core/src/components/input/readme.md
index d2bf31568a..6837d62983 100644
--- a/core/src/components/input/readme.md
+++ b/core/src/components/input/readme.md
@@ -172,7 +172,7 @@ export const InputExample: React.FC = () => (
   <ion-input placeholder="Enter Input"></ion-input>
 
   <!-- Input with clear button when there is a value -->
-  <ion-input clearInput value="clear me"></ion-input>
+  <ion-input clear-input value="clear me"></ion-input>
 
   <!-- Number type input -->
   <ion-input type="number" value="333"></ion-input>
diff --git a/core/src/components/input/usage/vue.md b/core/src/components/input/usage/vue.md
index 9be8fc3497..c423a8563d 100644
--- a/core/src/components/input/usage/vue.md
+++ b/core/src/components/input/usage/vue.md
@@ -10,7 +10,7 @@
   <ion-input placeholder="Enter Input"></ion-input>
 
   <!-- Input with clear button when there is a value -->
-  <ion-input clearInput value="clear me"></ion-input>
+  <ion-input clear-input value="clear me"></ion-input>
 
   <!-- Number type input -->
   <ion-input type="number" value="333"></ion-input>
diff --git a/core/src/components/progress-bar/readme.md b/core/src/components/progress-bar/readme.md
index f5e3e4c651..8008cc9256 100644
--- a/core/src/components/progress-bar/readme.md
+++ b/core/src/components/progress-bar/readme.md
@@ -21,7 +21,7 @@ If you add `reversed="true"`, you receive a query which is used to indicate pre-
 
 ## Usage
 
-### Javascript
+### Angular / javascript
 
 ```html
 <!-- Default Progressbar -->
@@ -68,6 +68,28 @@ export const ProgressbarExample: React.FC = () => (
 ```
 
 
+### Vue
+
+```html
+<template>
+  <!-- Default Progressbar -->
+  <ion-progress-bar></ion-progress-bar>
+
+  <!-- Default Progressbar with 50 percent -->
+  <ion-progress-bar value="0.5"></ion-progress-bar>
+
+  <!-- Colorize Progressbar -->
+  <ion-progress-bar color="primary" value="0.5"></ion-progress-bar>
+  <ion-progress-bar color="secondary" value="0.5"></ion-progress-bar>
+
+  <!-- Other types -->
+  <ion-progress-bar value="0.25" buffer="0.5"></ion-progress-bar>
+  <ion-progress-bar type="indeterminate"></ion-progress-bar>
+  <ion-progress-bar type="indeterminate" reversed="true"></ion-progress-bar>
+</template>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/progress-bar/usage/angular.md b/core/src/components/progress-bar/usage/angular.md
new file mode 100644
index 0000000000..976f5d44ac
--- /dev/null
+++ b/core/src/components/progress-bar/usage/angular.md
@@ -0,0 +1,16 @@
+```html
+<!-- Default Progressbar -->
+<ion-progress-bar></ion-progress-bar>
+
+<!-- Default Progressbar with 50 percent -->
+<ion-progress-bar value="0.5"></ion-progress-bar>
+
+<!-- Colorize Progressbar -->
+<ion-progress-bar color="primary" value="0.5"></ion-progress-bar>
+<ion-progress-bar color="secondary" value="0.5"></ion-progress-bar>
+
+<!-- Other types -->
+<ion-progress-bar value="0.25" buffer="0.5"></ion-progress-bar>
+<ion-progress-bar type="indeterminate"></ion-progress-bar>
+<ion-progress-bar type="indeterminate" reversed="true"></ion-progress-bar>
+```
diff --git a/core/src/components/progress-bar/usage/vue.md b/core/src/components/progress-bar/usage/vue.md
new file mode 100644
index 0000000000..2b3261e288
--- /dev/null
+++ b/core/src/components/progress-bar/usage/vue.md
@@ -0,0 +1,18 @@
+```html
+<template>
+  <!-- Default Progressbar -->
+  <ion-progress-bar></ion-progress-bar>
+
+  <!-- Default Progressbar with 50 percent -->
+  <ion-progress-bar value="0.5"></ion-progress-bar>
+
+  <!-- Colorize Progressbar -->
+  <ion-progress-bar color="primary" value="0.5"></ion-progress-bar>
+  <ion-progress-bar color="secondary" value="0.5"></ion-progress-bar>
+
+  <!-- Other types -->
+  <ion-progress-bar value="0.25" buffer="0.5"></ion-progress-bar>
+  <ion-progress-bar type="indeterminate"></ion-progress-bar>
+  <ion-progress-bar type="indeterminate" reversed="true"></ion-progress-bar>
+</template>
+```
diff --git a/core/src/components/select/readme.md b/core/src/components/select/readme.md
index 238ad84cc1..cb4da4041a 100644
--- a/core/src/components/select/readme.md
+++ b/core/src/components/select/readme.md
@@ -683,7 +683,7 @@ export const SelectExample: React.FC = () => (
 
     <ion-item>
       <ion-label>Hair Color</ion-label>
-      <ion-select value="brown" okText="Okay" cancelText="Dismiss">
+      <ion-select value="brown" ok-text="Okay" cancel-text="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>
@@ -708,7 +708,7 @@ export const SelectExample: React.FC = () => (
 
     <ion-item>
       <ion-label>Toppings</ion-label>
-      <ion-select multiple="true" cancelText="Nah" okText="Okay!">
+      <ion-select multiple="true" cancel-text="Nah" ok-text="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>
@@ -748,7 +748,7 @@ export const SelectExample: React.FC = () => (
 
     <ion-item>
       <ion-label>Alert</ion-label>
-      <ion-select :interfaceOptions="customAlertOptions" interface="alert" multiple="true" placeholder="Select One">
+      <ion-select :interface-options="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>
@@ -764,7 +764,7 @@ export const SelectExample: React.FC = () => (
 
     <ion-item>
       <ion-label>Popover</ion-label>
-      <ion-select :interfaceOptions="customPopoverOptions" interface="popover" placeholder="Select One">
+      <ion-select :interface-options="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>
@@ -774,7 +774,7 @@ export const SelectExample: React.FC = () => (
 
     <ion-item>
       <ion-label>Action Sheet</ion-label>
-      <ion-select :interfaceOptions="customActionSheetOptions" interface="action-sheet" placeholder="Select One">
+      <ion-select :interface-options="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>
diff --git a/core/src/components/select/usage/vue.md b/core/src/components/select/usage/vue.md
index 664d684630..390245aa8b 100644
--- a/core/src/components/select/usage/vue.md
+++ b/core/src/components/select/usage/vue.md
@@ -19,7 +19,7 @@
 
     <ion-item>
       <ion-label>Hair Color</ion-label>
-      <ion-select value="brown" okText="Okay" cancelText="Dismiss">
+      <ion-select value="brown" ok-text="Okay" cancel-text="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>
@@ -44,7 +44,7 @@
 
     <ion-item>
       <ion-label>Toppings</ion-label>
-      <ion-select multiple="true" cancelText="Nah" okText="Okay!">
+      <ion-select multiple="true" cancel-text="Nah" ok-text="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>
@@ -84,7 +84,7 @@
 
     <ion-item>
       <ion-label>Alert</ion-label>
-      <ion-select :interfaceOptions="customAlertOptions" interface="alert" multiple="true" placeholder="Select One">
+      <ion-select :interface-options="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>
@@ -100,7 +100,7 @@
 
     <ion-item>
       <ion-label>Popover</ion-label>
-      <ion-select :interfaceOptions="customPopoverOptions" interface="popover" placeholder="Select One">
+      <ion-select :interface-options="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>
@@ -110,7 +110,7 @@
 
     <ion-item>
       <ion-label>Action Sheet</ion-label>
-      <ion-select :interfaceOptions="customActionSheetOptions" interface="action-sheet" placeholder="Select One">
+      <ion-select :interface-options="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>
diff --git a/core/src/components/textarea/readme.md b/core/src/components/textarea/readme.md
index 1a8609340b..31fd85c3d7 100644
--- a/core/src/components/textarea/readme.md
+++ b/core/src/components/textarea/readme.md
@@ -174,7 +174,7 @@ export const TextAreaExample: React.FC = () => (
   <!-- Textarea that clears the value on edit -->
   <ion-item>
     <ion-label>Comment</ion-label>
-    <ion-textarea clearOnEdit="true"></ion-textarea>
+    <ion-textarea clear-on-edit="true"></ion-textarea>
   </ion-item>
 
   <!-- Textarea with custom number of rows and cols -->
diff --git a/core/src/components/textarea/usage/vue.md b/core/src/components/textarea/usage/vue.md
index ace6b08b67..4806200480 100644
--- a/core/src/components/textarea/usage/vue.md
+++ b/core/src/components/textarea/usage/vue.md
@@ -27,7 +27,7 @@
   <!-- Textarea that clears the value on edit -->
   <ion-item>
     <ion-label>Comment</ion-label>
-    <ion-textarea clearOnEdit="true"></ion-textarea>
+    <ion-textarea clear-on-edit="true"></ion-textarea>
   </ion-item>
 
   <!-- Textarea with custom number of rows and cols -->
diff --git a/core/src/components/thumbnail/readme.md b/core/src/components/thumbnail/readme.md
index e2e9f0de0b..4b50961c2a 100644
--- a/core/src/components/thumbnail/readme.md
+++ b/core/src/components/thumbnail/readme.md
@@ -10,7 +10,7 @@ Thumbnails can be used by themselves or inside of any element. If placed inside
 
 ## Usage
 
-### Javascript
+### Angular / javascript
 
 ```html
 <ion-thumbnail>
@@ -49,6 +49,24 @@ export const ThumbnailExample: React.FC = () => (
 ```
 
 
+### Vue
+
+```html
+<template>
+  <ion-thumbnail>
+    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+  </ion-thumbnail>
+
+  <ion-item>
+    <ion-thumbnail slot="start">
+      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+    </ion-thumbnail>
+    <ion-label>Item Thumbnail</ion-label>
+  </ion-item>
+</template>
+```
+
+
 
 ## CSS Custom Properties
 
diff --git a/core/src/components/thumbnail/usage/angular.md b/core/src/components/thumbnail/usage/angular.md
new file mode 100644
index 0000000000..5dca313b70
--- /dev/null
+++ b/core/src/components/thumbnail/usage/angular.md
@@ -0,0 +1,12 @@
+```html
+<ion-thumbnail>
+  <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+</ion-thumbnail>
+
+<ion-item>
+  <ion-thumbnail slot="start">
+    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+  </ion-thumbnail>
+  <ion-label>Item Thumbnail</ion-label>
+</ion-item>
+```
\ No newline at end of file
diff --git a/core/src/components/thumbnail/usage/vue.md b/core/src/components/thumbnail/usage/vue.md
new file mode 100644
index 0000000000..6ea7a73a95
--- /dev/null
+++ b/core/src/components/thumbnail/usage/vue.md
@@ -0,0 +1,14 @@
+```html
+<template>
+  <ion-thumbnail>
+    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+  </ion-thumbnail>
+
+  <ion-item>
+    <ion-thumbnail slot="start">
+      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+    </ion-thumbnail>
+    <ion-label>Item Thumbnail</ion-label>
+  </ion-item>
+</template>
+```
\ No newline at end of file
diff --git a/core/src/components/toggle/readme.md b/core/src/components/toggle/readme.md
index 13ba675ee4..475b89b70c 100644
--- a/core/src/components/toggle/readme.md
+++ b/core/src/components/toggle/readme.md
@@ -157,17 +157,30 @@ export const ToggleExample: React.FC = () => (
   <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-toggle
+        @ionChange="toppings.push($event.target.value)"
+        value="pepperoni"
+        :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-toggle
+        @ionChange="toppings.push($event.target.value)"
+        value="sausage"
+        :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-toggle
+        @ionChange="toppings.push($event.target.value)"
+        value="mushrooms"
+        :checked="toppings.indexOf('pepperoni') !== -1">
+      </ion-toggle>
     </ion-item>
   </ion-list>
 </template>
diff --git a/core/src/components/toggle/usage/vue.md b/core/src/components/toggle/usage/vue.md
index 01d145dbe6..dd2c5cad4a 100644
--- a/core/src/components/toggle/usage/vue.md
+++ b/core/src/components/toggle/usage/vue.md
@@ -20,17 +20,30 @@
   <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-toggle
+        @ionChange="toppings.push($event.target.value)"
+        value="pepperoni"
+        :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-toggle
+        @ionChange="toppings.push($event.target.value)"
+        value="sausage"
+        :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-toggle
+        @ionChange="toppings.push($event.target.value)"
+        value="mushrooms"
+        :checked="toppings.indexOf('pepperoni') !== -1">
+      </ion-toggle>
     </ion-item>
   </ion-list>
 </template>
diff --git a/core/src/components/toolbar/readme.md b/core/src/components/toolbar/readme.md
index 0da522df7c..51f89d1a47 100644
--- a/core/src/components/toolbar/readme.md
+++ b/core/src/components/toolbar/readme.md
@@ -617,7 +617,7 @@ export const ToolbarExample: React.FC = () => (
 
   <ion-toolbar>
     <ion-buttons slot="start">
-      <ion-menu-button autoHide="false"></ion-menu-button>
+      <ion-menu-button auto-hide="false"></ion-menu-button>
 
     </ion-buttons>
     <ion-buttons slot="secondary">
@@ -636,7 +636,7 @@ export const ToolbarExample: React.FC = () => (
     </ion-buttons>
     <ion-title>Right side menu toggle</ion-title>
     <ion-buttons slot="end">
-      <ion-menu-button autoHide="false"></ion-menu-button>
+      <ion-menu-button auto-hide="false"></ion-menu-button>
 
     </ion-buttons>
   </ion-toolbar>
diff --git a/core/src/components/toolbar/usage/vue.md b/core/src/components/toolbar/usage/vue.md
index 38169b4350..d34df718b8 100644
--- a/core/src/components/toolbar/usage/vue.md
+++ b/core/src/components/toolbar/usage/vue.md
@@ -83,7 +83,7 @@
 
   <ion-toolbar>
     <ion-buttons slot="start">
-      <ion-menu-button autoHide="false"></ion-menu-button>
+      <ion-menu-button auto-hide="false"></ion-menu-button>
 
     </ion-buttons>
     <ion-buttons slot="secondary">
@@ -102,7 +102,7 @@
     </ion-buttons>
     <ion-title>Right side menu toggle</ion-title>
     <ion-buttons slot="end">
-      <ion-menu-button autoHide="false"></ion-menu-button>
+      <ion-menu-button auto-hide="false"></ion-menu-button>
 
     </ion-buttons>
   </ion-toolbar>