diff --git a/README.md b/README.md
index d299090..1c95280 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,9 @@
+[![Installs!](https://img.shields.io/apm/dm/vuejs2-snippets.svg?style=flat-square)](https://atom.io/packages/vuejs2-snippets)
+[![Version!](https://img.shields.io/apm/v/vuejs2-snippets.svg?style=flat-square)](https://atom.io/packages/vuejs2-snippets)
+[![License](https://img.shields.io/apm/l/vuejs2-snippets.svg?style=flat-square)](https://github.com/CorentinAndre/Vuejs-snippets/blob/master/LICENSE)
+
 # Vuejs-snippets
+
 Collection of Vue.js snippets for version 2.0+.
 Also supports Vuex, vue-router still missing.
 
@@ -9,17 +14,23 @@ Feel free to contribute to this package by submitting a PR!
 Just press `TAB` or `ENTER` to unfold a snippet
 
 ### Single file template
+
 ```html
 template          <!--Single file component template-->
 ```
 
 ### HTML snippets
+
 ```html
 router-view       <!--Vuejs router-view component-->
 router-link       <!--Vuejs router-link component with named route-->
 component         <!--Include component in HTML-->
+sccomponent       <!--Include self closed component in HTML-->
+i18n              <!--Include internationalization component-->
 ```
+
 ### HTML tags
+
 ```html
 v-for             <!--Vuejs binding for list rendering-->
 v-if              <!--Vuejs binding for if conditional rendering-->
@@ -27,31 +38,40 @@ v-else-if         <!--Vuejs binding for else if rendering-->
 v-else            <!--Vuejs binding for else conditional rendering-->
 v-show            <!--Vuejs binding for show conditional rendering-->
 v-model           <!--Vuejs binding for model binding-->
+vClassObj         <!--Vuejs binding for class as an object-->
+vClassArr         <!--Vuejs binding for class as an array-->
 ```
 
 ### Javascript
+
 ```javascript
-beforeCreate      // Vuejs instance lifecycle hook for beforeCreate
-created           // Vuejs instance lifecycle hook for created
-beforeMount       // Vuejs instance lifecycle hook for beforeMount
-mounted           // Vuejs instance lifecycle hook for mounted
-beforeUpdate      // Vuejs instance lifecycle hook for beforeUpdate
-updated           // Vuejs instance lifecycle hook for updated
-beforeUpdate      // Vuejs instance lifecycle hook for beforeUpdate
-updated           // Vuejs instance lifecycle hook for updated
-beforeDestroy     // Vuejs instance lifecycle hook for beforeDestroy
-destroyed         // Vuejs instance lifecycle hook for destroyed
-vwatch            // Vuejs way to watch instance properties
-methods           // Vuejs methods event handlers
-components        // Use it when you want to add child components to parent component.
-props             // Vuejs way to pass data to child components
-vcomputed         // Vuejs computed property
+beforeCreate; // Vuejs instance lifecycle hook for beforeCreate
+created; // Vuejs instance lifecycle hook for created
+beforeMount; // Vuejs instance lifecycle hook for beforeMount
+mounted; // Vuejs instance lifecycle hook for mounted
+beforeUpdate; // Vuejs instance lifecycle hook for beforeUpdate
+updated; // Vuejs instance lifecycle hook for updated
+beforeUpdate; // Vuejs instance lifecycle hook for beforeUpdate
+updated; // Vuejs instance lifecycle hook for updated
+beforeDestroy; // Vuejs instance lifecycle hook for beforeDestroy
+destroyed; // Vuejs instance lifecycle hook for destroyed
+beforeRouteEnter; // Vue-router instance lifecycle hook for beforeRouteEnter
+beforeRouteUpdate; // Vue-router instance lifecycle hook for beforeRouteUpdate
+beforeRouteLeave; // Vue-router instance lifecycle hook for beforeRouteLeave
+vwatch; // Vuejs way to watch instance properties
+methods; // Vuejs methods event handlers
+components; // Use it when you want to add child components to parent component.
+props; // Vuejs way to pass data to child components
+vprops; // Vuejs way to pass data to child components with validation
+vcomputed; // Vuejs computed property
 ```
 
 ### Vuex
+
 ```javascript
-vstore            // Vuex template for a complete store with state,getters,actions and mutations
-vmut              // Vuex mutation snippet
-vact              // Vuex action snippet
-vget              // Vuex getter snippet
+vstore; // Vuex template for a complete store with state,getters,actions and mutations
+vmut; // Vuex mutation snippet
+vact; // Vuex action snippet
+vget; // Vuex getter snippet
+vtype; // Vuex constant type snipppet
 ```
diff --git a/package.json b/package.json
index e0b2563..d24c34e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vuejs2-snippets",
-  "version": "0.7.0",
+  "version": "1.1.0",
   "description": "Vuejs 2.0+ snippets for Atom",
   "author": {
     "name": "Corentin Andre",
diff --git a/snippets/snippets.cson b/snippets/snippets.cson
index cc73fc6..59f7fc6 100644
--- a/snippets/snippets.cson
+++ b/snippets/snippets.cson
@@ -4,6 +4,11 @@
     "body": "<${1:componentName}>$2</${1:componentName}>"
     "description": "Use a component in a template file"
     "descriptionMoreURL": "https://vuejs.org/v2/guide/components.html"
+  "Self closed component":
+    "prefix": "sccomponent"
+    "body": "<${1:componentName}/>"
+    "description": "Use a self closed component in a template file"
+    "descriptionMoreURL": "https://vuejs.org/v2/guide/components.html"
   "Router View":
     "prefix": "router-view"
     "body": "<router-view name=\"${1:routeName}\">$2</router-view>"
@@ -19,24 +24,35 @@
     "body": """
       <template>
         <div id="$1">
-          $2
+
         </div>
       </template>
       <script>
       export default {
-        name: "$1",
-        data: function data() {
-          return {
+        name: "$2",
+        data: () => ({
 
-          }
-        }
+        })
       }
       </script>
-      <style>
+      <style${3: lang="${4:scss}"} ${5:scoped}>
       </style>
     """
     "description": "Single file component template"
     "descriptionMoreURL": "https://vuejs.org/v2/guide/single-file-components.html"
+  "Internationalization component":
+    "prefix": "i18n",
+    "body": """
+      <i18n>
+      {
+        "${1:en}": {
+          "${2:key}": "${3:value}"
+        }
+      }
+      </i18n>
+    """
+    "description": "Per component translation"
+    "descriptionMoreURL": "http://kazupon.github.io/vue-i18n/en/sfc.html"
 
 ".meta.tag":
   'v-for':
@@ -72,6 +88,12 @@
   'v-bind':
     'prefix': 'v-bind'
     'body': ':${1:attribute}=\"${2}\"'
+  'v-bind:class as an object':
+    'prefix': 'vClassObj'
+    'body': ':class=\"{${1:className}: ${2:property}}\"'
+  'v-bind:class as an array':
+    'prefix': 'vClassArr'
+    'body': ':class=\"[${1:property}]\"'
 
 '.source.js':
   'Vue computed':
@@ -88,17 +110,22 @@
   'beforeCreate Vuejs hook':
     'prefix': 'beforeCreate'
     'body': """
-    beforeCreate: function beforeCreate() {
+    beforeCreate() {
       //do something before creating vue instance
       $1
     }
     """
     'description': 'Vuejs instance lifecycle hook for beforeCreate'
     'descriptionMoreURL': 'https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram'
+  'mixin':
+    'prefix': 'mixin'
+    'body': "mixins: [$1]"
+    'description': 'Vuejs mixins to improve component readability and code sharing'
+    'descriptionMoreURL': 'https://vuejs.org/v2/guide/mixins.html'
   'created Vuejs hook':
     'prefix': 'created'
     'body': """
-    created: function created() {
+    created() {
       //do something after creating vue instance
       $1
     }
@@ -108,7 +135,7 @@
   'beforeMount Vuejs hook':
     'prefix': 'beforeMount'
     'body': """
-    beforeMount: function beforeMount() {
+    beforeMount() {
       //do something before mounting vue instance
       $1
     }
@@ -118,7 +145,7 @@
   'mounted Vuejs hook':
     'prefix': 'mounted'
     'body': """
-    mounted: function mounted() {
+    mounted() {
       //do something after mounting vue instance
       $1
     }
@@ -128,7 +155,7 @@
   'beforeUpdate Vuejs hook':
     'prefix': 'beforeUpdate'
     'body': """
-    beforeUpdate: function beforeUpdate() {
+    beforeUpdate() {
       //do something before updating vue instance
       $1
     }
@@ -138,7 +165,7 @@
   'updated Vuejs hook':
     'prefix': 'updated'
     'body': """
-    updated: function updated() {
+    updated() {
       //do something after updating vue instance
       $1
     }
@@ -148,7 +175,7 @@
   'beforeDestroy Vuejs hook':
     'prefix': 'beforeDestroy'
     'body': """
-    beforeDestroy: function beforeDestroy() {
+    beforeDestroy() {
       //do something before destroying vue instance
       $1
     }
@@ -158,13 +185,40 @@
   'destroyed Vuejs hook':
     'prefix': 'destroyed'
     'body': """
-    destroyed: function destroyed() {
+    destroyed() {
       //do something after destroying vue instance
       $1
     }
     """
     'description': 'Vuejs instance lifecycle hook for destroyed'
     'descriptionMoreURL': 'https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram'
+  'beforeRouteEnter Vue-router hook':
+    'prefix': 'beforeRouteEnter'
+    'body': """
+    beforeRouteEnter(to, from, next) {
+      $1
+    }
+    """
+    'description': 'Vue-router instance lifecycle hook for beforeRouteEnter'
+    'descriptionMoreURL': 'https://router.vuejs.org/en/advanced/navigation-guards.html'
+  'beforeRouteUpdate Vue-router hook':
+    'prefix': 'beforeRouteUpdate'
+    'body': """
+    beforeRouteUpdate(to, from, next) {
+      $1
+    }
+    """
+    'description': 'Vue-router instance lifecycle hook for beforeRouteUpdate'
+    'descriptionMoreURL': 'https://router.vuejs.org/en/advanced/navigation-guards.html'
+  'beforeRouteLeave Vue-router hook':
+    'prefix': 'beforeRouteLeave'
+    'body': """
+    beforeRouteLeave(to, from, next) {
+      $1
+    }
+    """
+    'description': 'Vue-router instance lifecycle hook for beforeRouteLeave'
+    'descriptionMoreURL': 'https://router.vuejs.org/en/advanced/navigation-guards.html'
   'Vue watch':
     'prefix': 'vwatch'
     'body': """
@@ -181,13 +235,22 @@
     'prefix': 'methods'
     'body': """
     methods: {
-      ${1:methodName}: function ${1:methodName}() {
+      ${1:methodName}() {
         $2
       }
     }
     """
     'description': 'Vuejs methods event handlers'
     'descriptionMoreURL': 'https://vuejs.org/v2/guide/events.html#Method-Event-Handlers'
+  'Vuejs data':
+    'prefix': 'vdata'
+    'body': """
+    data: () => ({
+      $1
+    })
+    """
+    'description': 'Vuejs data must be a function'
+    'descriptionMoreURL': 'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function'
   'Vuejs components include':
     'prefix': 'components'
     'body': """
@@ -202,6 +265,21 @@
     'body': 'props: [\'${1:propName}\']'
     'description': 'Vuejs way to pass data to child components'
     'descriptionMoreURL': 'https://vuejs.org/v2/guide/components.html#Props'
+  'Vuejs props with validation':
+    'prefix': 'vprops'
+    'body': """
+    props: {
+      \'${1:propName}\': {
+        type: ${2:propType},
+        required: ${3:true},
+        ${4:default: function() {
+          return ${5:\'propDefault\'}
+        \\}}
+      }
+    }
+    """
+    'description': 'Vuejs way to pass data to child components with validation'
+    'descriptionMoreURL': 'https://vuejs.org/v2/guide/components.html#Prop-Validation'
 
 '.source.js.jsx':
   'Store template':
@@ -264,3 +342,6 @@
     'body': '${1:variable}: () => state.${1:variable}'
     'description': 'Vuex snippet for getters.'
     'descriptionMoreURL': 'https://vuex.vuejs.org/en/getters.html'
+  'Mutation type':
+    'prefix': 'vtype'
+    'body': 'export const ${1:MUTATION_TYPE} = \'${1:MUTATION_TYPE}\''