Vue js style guide

1 files changed, 126 insertions, 0 deletions

diff --git a/doc/development/fe_guide/style_guide.md b/doc/development/fe_guide/style_guide.md
index 8cd18b9a9aa..4afb31bb237 100644
--- a/doc/development/fe_guide/style_guide.md
+++ b/doc/development/fe_guide/style_guide.md
@@ -87,6 +87,132 @@ Insert table of contents
   ```
 
 #### Props
+- Props should be declared as an object
+  ```javascript
+  // bad
+  props: ['foo']
+
+  // good
+  props: {
+    foo: {
+      type: String,
+      required: false,
+      default: 'bar'
+    }
+  }
+  ```
+- Required key should always be provided when declaring a prop
+  ```javascript
+  // bad
+  props: {
+    foo: {
+      type: String,
+    }
+  }
+
+  // good
+  props: {
+    foo: {
+      type: String,
+      required: false,
+      default: 'bar'
+    }
+  }
+  ```
+
+- Default key should always be provided if the prop is not required:
+  ```javascript
+  // bad
+  props: {
+    foo: {
+      type: String,
+      required: false,
+    }
+  }
+
+  // good
+  props: {
+    foo: {
+      type: String,
+      required: false,
+      default: 'bar'
+    }
+  }
+
+  // good
+  props: {
+    foo: {
+      type: String,
+      required: true
+    }
+  }
+  ```
+
+#### Data
+- `data` method should always be a function
+  ```javascript
+  // bad
+  data: {
+    foo: 'foo'
+  }
+
+  // good
+  data() {
+    return {
+      foo: 'foo'
+    };
+  }
+  ```
+
+#### Directives
+
+- Shorthand `@` is preferable over `v-on`
+  ```javascript
+  // bad
+  <component v-on:click="eventHandler"/>
+
+
+  // good
+  <component @click="eventHandler"/>
+  ```
+
+- Shorthand `:` is preferable over `v-bind`
+  ```javascript
+  // bad
+  <component v-bind:class="btn"/>
+
+
+  // good
+  <component :class="btn"/>
+  ```
+
+#### Closing tags
+- Prefer self closing component tags
+  ```javascript
+  // bad
+  <component></component>
+
+  // good
+  <component />
+  ```
+
+#### Ordering
+- Order for a Vue Component:
+  1. `props`
+  2. `data`
+  3. `beforeCreate`
+  4. `created`
+  5. `beforeMount`
+  6. `mounted`
+  7. `beforeUpdate`
+  8. `updated`
+  9. `activated`
+  10. `deactivated`
+  11. `beforeDestroy`
+  12. `destroyed`
+  13. `computedProps`
+  14. `methods`
+  15. `template`
 
 
 ## SCSS