🚧 VueJS naming convention in progress

Author: sandoche

vuejs/components-naming.md

@@ -1 +1,15 @@
-# VueJS Naming Convention > Components Naming
+# VueJS Naming Convention > Components Naming
+
+## PascalCase
+- Begin with an uppercase letter
+- Components names should always be multiwords like "AlertModal", "DropdownMenu" or "NavbarLogo"
+- Child components should use the name of their parent as a preffix. For example a Form component child of AlertModal should be called AlertModalForm
+- Avoid acronyms and abbreviations
+
+
+```javascript
+export default {
+  name: 'AlertModal'
+}
+```
+

vuejs/smart-dumb-naming.md

@@ -1 +1,44 @@
-# VueJS Naming Convention > Smart vs Dumb Components Naming
+# VueJS Naming Convention > Smart vs Dumb Components Naming
+
+Smart components sometimes called contrainer are the one that handles state changes. Dumb components, also called presentational, handles the look and feel. Dumb components are comparable to the View and Smart component to the Controller in the MVC pattern.
+
+## Dumb components
+- Starts with the prefix "Base", "App" or "V"
+- For example "BaseButton", "AppButton" or "VButton" for a simple button
+- Takes only care of the look and feel
+
+## Smart components
+- Takes the name of a dumb component but replace the prefix ("Base", "App" or "V") with another name
+- For example "SubmitButton", "UserDeleteButton", "IncrementButton"
+- Implements methods or are connected with the Vuex actions
+
+```javascript
+<template>
+  <div class="increment-button" v-on:click="increment">
+    <base-button>{{ number }} Increment</base-button>
+  </div>
+</template>
+
+<script>
+// Base Button is dumb
+const BaseButton = {
+  template: `<button><slot></slot></button>`
+}
+
+// Increment Button is smart
+export default {
+  name: 'IncrementButton',
+  components: { BaseButton },
+  data () {
+    return {
+      number: 0
+    }
+  },
+  methods: {
+    increment () {
+      this.number++
+    }
+  }
+}
+</script>
+```