From cecc5cdd4b33254c26cbd03ab3e800fdd0a949f9 Mon Sep 17 00:00:00 2001
From: tu4mo <tu4mo@users.noreply.github.com>
Date: Wed, 3 Oct 2018 21:08:16 +0300
Subject: [PATCH] Fix inconsistent SFC styling

---
 docs/guides/dom-events.md                     | 19 +++++++------
 docs/guides/testing-async-components.md       | 28 +++++++++----------
 ...ngle-file-components-with-mocha-webpack.md |  8 +++---
 3 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/docs/guides/dom-events.md b/docs/guides/dom-events.md
index 6761f31e7..74cc76737 100644
--- a/docs/guides/dom-events.md
+++ b/docs/guides/dom-events.md
@@ -37,19 +37,22 @@ wrapper.trigger('click', { button: 0 })
 
 ```html
 <template>
-<div>
-  <button class="yes" @click="callYes">Yes</button>
-  <button class="no" @click="callNo">No</button>
-</div>
+  <div>
+    <button class="yes" @click="callYes">Yes</button>
+    <button class="no" @click="callNo">No</button>
+  </div>
 </template>
+
 <script>
 export default {
   name: 'YesNoComponent',
+
   props: {
     callMe: {
       type: Function
     }
   },
+
   methods: {
     callYes() {
       this.callMe('yes')
@@ -60,7 +63,6 @@ export default {
   }
 }
 </script>
-
 ```
 
 **Test**
@@ -93,8 +95,9 @@ This component allows to increment/decrement the quantity using various keys.
 
 ```html
 <template>
-<input type="text" @keydown.prevent="onKeydown" v-model="quantity" />
+  <input type="text" @keydown.prevent="onKeydown" v-model="quantity" />
 </template>
+
 <script>
 const KEY_DOWN = 40
 const KEY_UP = 38
@@ -107,6 +110,7 @@ export default {
       quantity: 0
     }
   },
+
   methods: {
     increment() {
       this.quantity += 1
@@ -132,6 +136,7 @@ export default {
       }
     }
   },
+
   watch: {
     quantity: function (newValue) {
       this.$emit('input', newValue)
@@ -139,7 +144,6 @@ export default {
   }
 }
 </script>
-
 ```
 
 **Test**
@@ -182,7 +186,6 @@ describe('Key event tests', () => {
     expect(wrapper.vm.quantity).toBe(13)
   })
 })
-
 ```
 
 **Limitations**
diff --git a/docs/guides/testing-async-components.md b/docs/guides/testing-async-components.md
index 1a77155e9..afd442481 100644
--- a/docs/guides/testing-async-components.md
+++ b/docs/guides/testing-async-components.md
@@ -20,22 +20,22 @@ The below component makes an API call when a button is clicked, then assigns the
 </template>
 
 <script>
-  import axios from 'axios'
-
-  export default {
-    data () {
-      return {
-        value: null
-      }
-    },
-
-    methods: {
-      async fetchResults () {
-        const response = await axios.get('mock/service')
-        this.value = response.data
-      }
+import axios from 'axios'
+
+export default {
+  data () {
+    return {
+      value: null
+    }
+  },
+
+  methods: {
+    async fetchResults () {
+      const response = await axios.get('mock/service')
+      this.value = response.data
     }
   }
+}
 </script>
 ```
 
diff --git a/docs/guides/testing-single-file-components-with-mocha-webpack.md b/docs/guides/testing-single-file-components-with-mocha-webpack.md
index dc94d1bed..c4be44b84 100644
--- a/docs/guides/testing-single-file-components-with-mocha-webpack.md
+++ b/docs/guides/testing-single-file-components-with-mocha-webpack.md
@@ -124,10 +124,10 @@ Create a file in `src` named `Counter.vue`:
 
 ``` html
 <template>
-	<div>
-	  {{ count }}
-	  <button @click="increment">Increment</button>
-	</div>
+  <div>
+    {{ count }}
+    <button @click="increment">Increment</button>
+  </div>
 </template>
 
 <script>