├── .gitignore ├── LICENSE ├── README.md ├── package.json └── snippets └── snippets.cson /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .git 3 | npm-debug.log 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Corentin.Andre 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Installs!](https://img.shields.io/apm/dm/vuejs2-snippets.svg?style=flat-square)](https://atom.io/packages/vuejs2-snippets) 2 | [![Version!](https://img.shields.io/apm/v/vuejs2-snippets.svg?style=flat-square)](https://atom.io/packages/vuejs2-snippets) 3 | [![License](https://img.shields.io/apm/l/vuejs2-snippets.svg?style=flat-square)](https://github.com/CorentinAndre/Vuejs-snippets/blob/master/LICENSE) 4 | 5 | # Vuejs-snippets 6 | 7 | Collection of Vue.js snippets for version 2.0+. 8 | Also supports Vuex, vue-router still missing. 9 | 10 | Feel free to contribute to this package by submitting a PR! 11 | 12 | ## Usage 13 | 14 | Just press `TAB` or `ENTER` to unfold a snippet 15 | 16 | ### Single file template 17 | 18 | ```html 19 | template 20 | ``` 21 | 22 | ### HTML snippets 23 | 24 | ```html 25 | router-view 26 | router-link 27 | component 28 | sccomponent 29 | i18n 30 | ``` 31 | 32 | ### HTML tags 33 | 34 | ```html 35 | v-for 36 | v-if 37 | v-else-if 38 | v-else 39 | v-show 40 | v-model 41 | vClassObj 42 | vClassArr 43 | ``` 44 | 45 | ### Javascript 46 | 47 | ```javascript 48 | beforeCreate; // Vuejs instance lifecycle hook for beforeCreate 49 | created; // Vuejs instance lifecycle hook for created 50 | beforeMount; // Vuejs instance lifecycle hook for beforeMount 51 | mounted; // Vuejs instance lifecycle hook for mounted 52 | beforeUpdate; // Vuejs instance lifecycle hook for beforeUpdate 53 | updated; // Vuejs instance lifecycle hook for updated 54 | beforeUpdate; // Vuejs instance lifecycle hook for beforeUpdate 55 | updated; // Vuejs instance lifecycle hook for updated 56 | beforeDestroy; // Vuejs instance lifecycle hook for beforeDestroy 57 | destroyed; // Vuejs instance lifecycle hook for destroyed 58 | beforeRouteEnter; // Vue-router instance lifecycle hook for beforeRouteEnter 59 | beforeRouteUpdate; // Vue-router instance lifecycle hook for beforeRouteUpdate 60 | beforeRouteLeave; // Vue-router instance lifecycle hook for beforeRouteLeave 61 | vwatch; // Vuejs way to watch instance properties 62 | methods; // Vuejs methods event handlers 63 | components; // Use it when you want to add child components to parent component. 64 | props; // Vuejs way to pass data to child components 65 | vprops; // Vuejs way to pass data to child components with validation 66 | vcomputed; // Vuejs computed property 67 | ``` 68 | 69 | ### Vuex 70 | 71 | ```javascript 72 | vstore; // Vuex template for a complete store with state,getters,actions and mutations 73 | vmut; // Vuex mutation snippet 74 | vact; // Vuex action snippet 75 | vget; // Vuex getter snippet 76 | vtype; // Vuex constant type snipppet 77 | ``` 78 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuejs2-snippets", 3 | "version": "1.1.0", 4 | "description": "Vuejs 2.0+ snippets for Atom", 5 | "author": { 6 | "name": "Corentin Andre", 7 | "email": "candre@edu.ece.fr", 8 | "url": "https://github.com/CorentinAndre" 9 | }, 10 | "keywords": [ 11 | "Vuejs", 12 | "snippets", 13 | "Vuejs 2.0", 14 | "Vue" 15 | ], 16 | "repository": "https://github.com/CorentinAndre/Vuejs-snippets", 17 | "license": "MIT", 18 | "engines": { 19 | "atom": ">=1.0.0" 20 | }, 21 | "dependencies": {} 22 | } 23 | -------------------------------------------------------------------------------- /snippets/snippets.cson: -------------------------------------------------------------------------------- 1 | ".text.html.vue": 2 | "Component include": 3 | "prefix": "component" 4 | "body": "<${1:componentName}>$2" 5 | "description": "Use a component in a template file" 6 | "descriptionMoreURL": "https://vuejs.org/v2/guide/components.html" 7 | "Self closed component": 8 | "prefix": "sccomponent" 9 | "body": "<${1:componentName}/>" 10 | "description": "Use a self closed component in a template file" 11 | "descriptionMoreURL": "https://vuejs.org/v2/guide/components.html" 12 | "Router View": 13 | "prefix": "router-view" 14 | "body": "$2" 15 | "description": "Vuejs router-view component" 16 | "descriptionMoreURL": "https://router.vuejs.org/en/api/router-view.html" 17 | 'Router Link': 18 | 'prefix': 'router-link' 19 | 'body': '$4' 20 | 'description': 'Vuejs router-link component with named route' 21 | 'descriptionMoreURL': 'https://router.vuejs.org/en/api/router-link.html' 22 | "Vue Component template": 23 | "prefix": "template" 24 | "body": """ 25 | 30 | 38 | 39 | 40 | """ 41 | "description": "Single file component template" 42 | "descriptionMoreURL": "https://vuejs.org/v2/guide/single-file-components.html" 43 | "Internationalization component": 44 | "prefix": "i18n", 45 | "body": """ 46 | 47 | { 48 | "${1:en}": { 49 | "${2:key}": "${3:value}" 50 | } 51 | } 52 | 53 | """ 54 | "description": "Per component translation" 55 | "descriptionMoreURL": "http://kazupon.github.io/vue-i18n/en/sfc.html" 56 | 57 | ".meta.tag": 58 | 'v-for': 59 | 'prefix': 'v-for' 60 | 'body': 'v-for=\"${1:elem} in ${2:elemArray}\" :key=\"${1:elem}.${3:key}\"' 61 | 'description': 'Vuejs binding for list rendering' 62 | 'descriptionMoreURL': 'https://vuejs.org/v2/guide/list.html#v-for' 63 | 'v-if': 64 | 'prefix': 'v-if' 65 | 'body': 'v-if=\"${1:condition}\"' 66 | 'description': 'Vuejs binding for if conditional rendering' 67 | 'descriptionMoreURL': 'https://vuejs.org/v2/guide/conditional.html#v-if' 68 | 'v-show': 69 | 'prefix': 'v-show' 70 | 'body': 'v-show=\"${1:condition}\"' 71 | 'description': 'Vuejs binding for show conditional rendering' 72 | 'descriptionMoreURL': 'https://vuejs.org/v2/guide/conditional.html#v-show' 73 | 'v-else-if': 74 | 'prefix': 'v-else-if' 75 | 'body': 'v-else-if=\"${1:condition}\"' 76 | 'description': 'Vuejs binding for else-if conditional rendering' 77 | 'descriptionMoreURL': 'https://vuejs.org/v2/guide/conditional.html#v-else-if' 78 | 'v-else': 79 | 'prefix': 'v-else' 80 | 'body': 'v-else' 81 | 'description': 'Vuejs binding for else conditional rendering' 82 | 'descriptionMoreURL': 'https://vuejs.org/v2/guide/conditional.html#v-else' 83 | 'v-model': 84 | 'prefix': 'v-model' 85 | 'body': 'v-model=\"${1:model}\"' 86 | 'description': 'Vuejs binding for model binding' 87 | 'descriptionMoreURL': 'https://vuejs.org/v2/guide/forms.html' 88 | 'v-bind': 89 | 'prefix': 'v-bind' 90 | 'body': ':${1:attribute}=\"${2}\"' 91 | 'v-bind:class as an object': 92 | 'prefix': 'vClassObj' 93 | 'body': ':class=\"{${1:className}: ${2:property}}\"' 94 | 'v-bind:class as an array': 95 | 'prefix': 'vClassArr' 96 | 'body': ':class=\"[${1:property}]\"' 97 | 98 | '.source.js': 99 | 'Vue computed': 100 | 'prefix': 'vcomputed' 101 | 'body': """ 102 | computed: { 103 | ${1:computedProperty}: function ${1:computedProperty}() { 104 | return ${2:something} 105 | } 106 | } 107 | """ 108 | 'description': 'Vuejs computed property' 109 | 'descriptionMoreURL': 'https://vuejs.org/v2/guide/computed.html' 110 | 'beforeCreate Vuejs hook': 111 | 'prefix': 'beforeCreate' 112 | 'body': """ 113 | beforeCreate() { 114 | //do something before creating vue instance 115 | $1 116 | } 117 | """ 118 | 'description': 'Vuejs instance lifecycle hook for beforeCreate' 119 | 'descriptionMoreURL': 'https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram' 120 | 'mixin': 121 | 'prefix': 'mixin' 122 | 'body': "mixins: [$1]" 123 | 'description': 'Vuejs mixins to improve component readability and code sharing' 124 | 'descriptionMoreURL': 'https://vuejs.org/v2/guide/mixins.html' 125 | 'created Vuejs hook': 126 | 'prefix': 'created' 127 | 'body': """ 128 | created() { 129 | //do something after creating vue instance 130 | $1 131 | } 132 | """ 133 | 'description': 'Vuejs instance lifecycle hook for created' 134 | 'descriptionMoreURL': 'https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram' 135 | 'beforeMount Vuejs hook': 136 | 'prefix': 'beforeMount' 137 | 'body': """ 138 | beforeMount() { 139 | //do something before mounting vue instance 140 | $1 141 | } 142 | """ 143 | 'description': 'Vuejs instance lifecycle hook for beforeMount' 144 | 'descriptionMoreURL': 'https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram' 145 | 'mounted Vuejs hook': 146 | 'prefix': 'mounted' 147 | 'body': """ 148 | mounted() { 149 | //do something after mounting vue instance 150 | $1 151 | } 152 | """ 153 | 'description': 'Vuejs instance lifecycle hook for mounted' 154 | 'descriptionMoreURL': 'https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram' 155 | 'beforeUpdate Vuejs hook': 156 | 'prefix': 'beforeUpdate' 157 | 'body': """ 158 | beforeUpdate() { 159 | //do something before updating vue instance 160 | $1 161 | } 162 | """ 163 | 'description': 'Vuejs instance lifecycle hook for beforeUpdate' 164 | 'descriptionMoreURL': 'https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram' 165 | 'updated Vuejs hook': 166 | 'prefix': 'updated' 167 | 'body': """ 168 | updated() { 169 | //do something after updating vue instance 170 | $1 171 | } 172 | """ 173 | 'description': 'Vuejs instance lifecycle hook for updated' 174 | 'descriptionMoreURL': 'https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram' 175 | 'beforeDestroy Vuejs hook': 176 | 'prefix': 'beforeDestroy' 177 | 'body': """ 178 | beforeDestroy() { 179 | //do something before destroying vue instance 180 | $1 181 | } 182 | """ 183 | 'description': 'Vuejs instance lifecycle hook for beforeDestroy' 184 | 'descriptionMoreURL': 'https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram' 185 | 'destroyed Vuejs hook': 186 | 'prefix': 'destroyed' 187 | 'body': """ 188 | destroyed() { 189 | //do something after destroying vue instance 190 | $1 191 | } 192 | """ 193 | 'description': 'Vuejs instance lifecycle hook for destroyed' 194 | 'descriptionMoreURL': 'https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram' 195 | 'beforeRouteEnter Vue-router hook': 196 | 'prefix': 'beforeRouteEnter' 197 | 'body': """ 198 | beforeRouteEnter(to, from, next) { 199 | $1 200 | } 201 | """ 202 | 'description': 'Vue-router instance lifecycle hook for beforeRouteEnter' 203 | 'descriptionMoreURL': 'https://router.vuejs.org/en/advanced/navigation-guards.html' 204 | 'beforeRouteUpdate Vue-router hook': 205 | 'prefix': 'beforeRouteUpdate' 206 | 'body': """ 207 | beforeRouteUpdate(to, from, next) { 208 | $1 209 | } 210 | """ 211 | 'description': 'Vue-router instance lifecycle hook for beforeRouteUpdate' 212 | 'descriptionMoreURL': 'https://router.vuejs.org/en/advanced/navigation-guards.html' 213 | 'beforeRouteLeave Vue-router hook': 214 | 'prefix': 'beforeRouteLeave' 215 | 'body': """ 216 | beforeRouteLeave(to, from, next) { 217 | $1 218 | } 219 | """ 220 | 'description': 'Vue-router instance lifecycle hook for beforeRouteLeave' 221 | 'descriptionMoreURL': 'https://router.vuejs.org/en/advanced/navigation-guards.html' 222 | 'Vue watch': 223 | 'prefix': 'vwatch' 224 | 'body': """ 225 | watch: { 226 | ${1:propertyToWatch}: function ${1:propertyToWatch}Watcher() { 227 | //do something when ${1:propertyToWatch} value changes 228 | $2 229 | } 230 | } 231 | """ 232 | 'description': 'Vuejs way to watch instance properties' 233 | 'descriptionMoreURL': 'https://vuejs.org/v2/guide/computed.html#Watchers' 234 | 'Vuejs methods': 235 | 'prefix': 'methods' 236 | 'body': """ 237 | methods: { 238 | ${1:methodName}() { 239 | $2 240 | } 241 | } 242 | """ 243 | 'description': 'Vuejs methods event handlers' 244 | 'descriptionMoreURL': 'https://vuejs.org/v2/guide/events.html#Method-Event-Handlers' 245 | 'Vuejs data': 246 | 'prefix': 'vdata' 247 | 'body': """ 248 | data: () => ({ 249 | $1 250 | }) 251 | """ 252 | 'description': 'Vuejs data must be a function' 253 | 'descriptionMoreURL': 'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function' 254 | 'Vuejs components include': 255 | 'prefix': 'components' 256 | 'body': """ 257 | components: { 258 | ${1:componentName} 259 | } 260 | """ 261 | 'description': 'Use it when you want to add child components to parent component.' 262 | 'descriptionMoreURL': 'https://vuejs.org/v2/guide/single-file-components.html' 263 | 'Vuejs props': 264 | 'prefix': 'props' 265 | 'body': 'props: [\'${1:propName}\']' 266 | 'description': 'Vuejs way to pass data to child components' 267 | 'descriptionMoreURL': 'https://vuejs.org/v2/guide/components.html#Props' 268 | 'Vuejs props with validation': 269 | 'prefix': 'vprops' 270 | 'body': """ 271 | props: { 272 | \'${1:propName}\': { 273 | type: ${2:propType}, 274 | required: ${3:true}, 275 | ${4:default: function() { 276 | return ${5:\'propDefault\'} 277 | \\}} 278 | } 279 | } 280 | """ 281 | 'description': 'Vuejs way to pass data to child components with validation' 282 | 'descriptionMoreURL': 'https://vuejs.org/v2/guide/components.html#Prop-Validation' 283 | 284 | '.source.js.jsx': 285 | 'Store template': 286 | 'prefix': 'vstore' 287 | 'body': """ 288 | //Imports on top 289 | 290 | const state = { 291 | // Initial state of ${1:your store} 292 | 293 | }; 294 | 295 | const getters = { 296 | // Getters to access ${1:your store} values 297 | 298 | }; 299 | 300 | const actions = { 301 | // Asynchronous mutations commits to modify ${1:your store} 302 | 303 | } 304 | 305 | const mutations = { 306 | // Synchronous modifications of ${1: your store} 307 | } 308 | 309 | export default { 310 | state, 311 | getters, 312 | actions, 313 | mutations 314 | } 315 | """ 316 | 'description': 'Vuex template for a complete store to be imported as a module or as a single file store.' 317 | 'descriptionMoreURL': 'https://vuex.vuejs.org/en/structure.html' 318 | 'Mutation template': 319 | 'prefix': 'vmut' 320 | 'body': """ 321 | [${1:mutation_type}] (state, $2) { 322 | $3 323 | } 324 | """ 325 | 'description': 'Vuex snippet for mutations.' 326 | 'descriptionMoreURL': 'https://vuex.vuejs.org/en/mutations.html' 327 | 'Action template': 328 | 'prefix': 'vact' 329 | 'body': """ 330 | ${1:action_name}({ 331 | commit, 332 | state 333 | }, $2) { 334 | // Asynchronous stuff here. 335 | $3 336 | } 337 | """ 338 | 'description': 'Vuex snippet for actions.' 339 | 'descriptionMoreURL': 'https://vuex.vuejs.org/en/actions.html' 340 | 'Getter template': 341 | 'prefix': 'vget' 342 | 'body': '${1:variable}: () => state.${1:variable}' 343 | 'description': 'Vuex snippet for getters.' 344 | 'descriptionMoreURL': 'https://vuex.vuejs.org/en/getters.html' 345 | 'Mutation type': 346 | 'prefix': 'vtype' 347 | 'body': 'export const ${1:MUTATION_TYPE} = \'${1:MUTATION_TYPE}\'' 348 | --------------------------------------------------------------------------------