├── v.sublime-snippet
├── v-el.sublime-snippet
├── v-ref.sublime-snippet
├── v-bind.sublime-snippet
├── v-else.sublime-snippet
├── v-on.sublime-snippet
├── v-if.sublime-snippet
├── vuert.sublime-snippet
├── vuecmixins.sublime-snippet
├── v-link.sublime-snippet
├── vuertgo.sublime-snippet
├── v-for.sublime-snippet
├── vuenexttick.sublime-snippet
├── vue.sublime-snippet
├── vuecdata.sublime-snippet
├── vuef.sublime-snippet
├── vuecmethods.sublime-snippet
├── vueccomputed.sublime-snippet
├── vuecwatch.sublime-snippet
├── vueht.sublime-snippet
├── vuehtget.sublime-snippet
├── vuehtpost.sublime-snippet
├── vuecprops.sublime-snippet
├── vuex.sublime-snippet
├── vued.sublime-snippet
├── LICENSE.md
├── vuec.sublime-snippet
├── package.json
└── README.md


/v.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | : {
 4 |   ${1://content}
 5 | }
 6 | ]]></content>
 7 |   <tabTrigger>v</tabTrigger>
 8 |   <scope>source.js.embedded.html</scope>
 9 | </snippet>
10 | 


--------------------------------------------------------------------------------
/v-el.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[
3 | v-el:${1:el-name}
4 | ]]></content>
5 |   <tabTrigger>v-el</tabTrigger>
6 |   <scope>text.html</scope>
7 |   <description>v-el:el-name</description>
8 | </snippet>
9 | 


--------------------------------------------------------------------------------
/v-ref.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[
3 | v-ref:${1:ref-name}
4 | ]]></content>
5 |   <tabTrigger>v-ref</tabTrigger>
6 |   <scope>text.html</scope>
7 |   <description>v-ref:ref-name</description>
8 | </snippet>
9 | 


--------------------------------------------------------------------------------
/v-bind.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[
3 | :${1:prop}="${2:data}"
4 | ]]></content>
5 |   <tabTrigger>v-bind</tabTrigger>
6 |   <scope>text.html</scope>
7 |   <description>:prop="data"</description>
8 | </snippet>
9 | 


--------------------------------------------------------------------------------
/v-else.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[
3 | <div v-else>${1}</div>
4 | ]]></content>
5 |   <tabTrigger>v-else</tabTrigger>
6 |   <scope>text.html</scope>
7 |   <description>&lt;div v-else&gt;</description>
8 | </snippet>


--------------------------------------------------------------------------------
/v-on.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[
3 | @${1:evt}="${2:callback}"
4 | ]]></content>
5 |   <tabTrigger>v-on</tabTrigger>
6 |   <scope>text.html</scope>
7 |   <description>@evt="callback"</description>
8 | </snippet>
9 | 


--------------------------------------------------------------------------------
/v-if.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[
3 | <div v-if="${1}">${2}</div>
4 | ]]></content>
5 |   <tabTrigger>v-if</tabTrigger>
6 |   <scope>text.html</scope>
7 |   <description>&lt;div v-if=""&gt;</description>
8 | </snippet>


--------------------------------------------------------------------------------
/vuert.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[
3 | this.\$route${1}
4 | ]]></content>
5 |   <tabTrigger>vuert</tabTrigger>
6 |   <scope>source.js.embedded.html</scope>
7 |   <description>this.$route</description>
8 | </snippet>
9 | 


--------------------------------------------------------------------------------
/vuecmixins.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[
3 | mixins: [${1:mixin}]${2}
4 | ]]></content>
5 |   <tabTrigger>vuecmixins</tabTrigger>
6 |   <scope>source.js.embedded.html</scope>
7 |   <description>Vue component mixins</description>
8 | </snippet>
9 | 


--------------------------------------------------------------------------------
/v-link.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <a href="#" v-link="{path:'${1:url}'}">${2}</a>
 4 | ]]></content>
 5 |   <tabTrigger>v-link</tabTrigger>
 6 |   <scope>text.html</scope>
 7 |   <description>&lt;a v-link=""&gt;</description>
 8 | </snippet>
 9 | 
10 | 


--------------------------------------------------------------------------------
/vuertgo.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[
3 | this.\$route.router.go(${1:objectOrString});
4 | ]]></content>
5 |   <tabTrigger>vuertgo</tabTrigger>
6 |   <scope>source.js.embedded.html</scope>
7 |   <description>this.$route.router.go()</description>
8 | </snippet>
9 | 


--------------------------------------------------------------------------------
/v-for.sublime-snippet:
--------------------------------------------------------------------------------
1 | <snippet>
2 |   <content><![CDATA[
3 | <${1:div} v-for="${2:item} in ${3:items}">${4}</${1:div}>
4 | ]]></content>
5 |   <tabTrigger>v-for</tabTrigger>
6 |   <scope>text.html</scope>
7 |   <description>&lt;div v-for="item in items"&gt;</description>
8 | </snippet>
9 | 


--------------------------------------------------------------------------------
/vuenexttick.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | Vue.nextTick(() => {
 4 |   ${1}
 5 | });${2}
 6 | ]]></content>
 7 |   <tabTrigger>vuenextick</tabTrigger>
 8 |   <scope>source.js.embedded.html</scope>
 9 |   <description>Vue.nextTick()</description>
10 | </snippet>
11 | 


--------------------------------------------------------------------------------
/vue.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | var ${1:vm} = new Vue({
 4 | 
 5 |   ${2:el: "${3:#demo}"}${4:}
 6 | 
 7 | })
 8 | ]]></content>
 9 |   <tabTrigger>vue</tabTrigger>
10 |   <scope>source.js.embedded.html</scope>
11 |   <description>Vue instance</description>
12 | </snippet>
13 | 


--------------------------------------------------------------------------------
/vuecdata.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | data () {
 4 |   return {
 5 |     ${1:name}:${2:data}
 6 |   };
 7 | }${3}
 8 | ]]></content>
 9 |   <tabTrigger>vuecdata</tabTrigger>
10 |   <scope>source.js.embedded.html</scope>
11 |   <description>Vue component data</description>
12 | </snippet>
13 | 


--------------------------------------------------------------------------------
/vuef.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | Vue.filter('${1:my-filter}', function (value) {
 4 | 
 5 |   ${2://content}
 6 | 
 7 | })
 8 | ]]></content>
 9 |   <tabTrigger>vuef</tabTrigger>
10 |   <scope>source.js.embedded.html</scope>
11 |   <description>Vue filter</description>
12 | </snippet>
13 | 


--------------------------------------------------------------------------------
/vuecmethods.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | methods: {
 4 |   ${1:methodName} () {
 5 |     ${2}
 6 |   }
 7 | }${3}
 8 | ]]></content>
 9 |   <tabTrigger>vuecmethods</tabTrigger>
10 |   <scope>source.js.embedded.html</scope>
11 |   <description>Vue component methods</description>
12 | </snippet>
13 | 


--------------------------------------------------------------------------------
/vueccomputed.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | computed: {
 4 |   ${1:property} () {
 5 |     return ${2:true};
 6 |   }
 7 | }${3}
 8 | ]]></content>
 9 |   <tabTrigger>vueccomputed</tabTrigger>
10 |   <scope>source.js.embedded.html</scope>
11 |   <description>Vue computed props</description>
12 | </snippet>
13 | 


--------------------------------------------------------------------------------
/vuecwatch.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | watch: {
 4 |   '${1:name}': (${2:val}, ${3:oldVal}) => {
 5 |     ${4}
 6 |   }
 7 | }${5}
 8 | ]]></content>
 9 |   <tabTrigger>vuecwatch</tabTrigger>
10 |   <scope>source.js.embedded.html</scope>
11 |   <description>Vue component watch</description>
12 | </snippet>
13 | 


--------------------------------------------------------------------------------
/vueht.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | this.\$http('${1:url}',${2:data}, {method:'${3:method}'}).then(res => {
 4 |   console.log(res);
 5 | }).catch(err => {
 6 |   console.log(err);
 7 | });
 8 | ]]></content>
 9 |   <tabTrigger>vueht</tabTrigger>
10 |   <scope>source.js.embedded.html</scope>
11 |   <description>this.$http()</description>
12 | </snippet>
13 | 


--------------------------------------------------------------------------------
/vuehtget.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | this.\$http.get('${1:url}',${2:data}, ${3:options}).then(res => {
 4 |   console.log(res);
 5 | }).catch(err => {
 6 |   console.log(err);
 7 | });
 8 | ]]></content>
 9 |   <tabTrigger>vuehtget</tabTrigger>
10 |   <scope>source.js.embedded.html</scope>
11 |   <description>this.$http.get()</description>
12 | </snippet>
13 | 


--------------------------------------------------------------------------------
/vuehtpost.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | this.\$http.post('${1:url}',${2:data}, ${3:options}).then(res => {
 4 |   console.log(res);
 5 | }).catch(err => {
 6 |   console.log(err);
 7 | });
 8 | ]]></content>
 9 |   <tabTrigger>vuehtpost</tabTrigger>
10 |   <scope>source.js.embedded.html</scope>
11 |   <description>this.$http.post()</description>
12 | </snippet>
13 | 


--------------------------------------------------------------------------------
/vuecprops.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | props: {
 4 |   ${1:name} {
 5 |     type: ${2:String}, ${3:// String, Number, Boolean, Function, Object, Array}
 6 |     required: ${4:true},
 7 |     default: ${5:null}
 8 |   }
 9 | }${5}
10 | ]]></content>
11 |   <tabTrigger>vuecprops</tabTrigger>
12 |   <scope>source.js.embedded.html</scope>
13 |   <description>Vue component props</description>
14 | </snippet>
15 | 


--------------------------------------------------------------------------------
/vuex.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | import Vue from 'vue'
 4 | import Vuex from 'vuex'
 5 | 
 6 | Vue.use(Vuex)
 7 | 
 8 | export default new Vuex.store({
 9 |   state: {
10 | 
11 |   },
12 | 
13 |   mutations:{
14 | 
15 |   },
16 | 
17 |   actions: {
18 | 
19 |   },
20 | 
21 | })
22 | ]]></content>
23 |   <tabTrigger>vuex</tabTrigger>
24 |   <scope>source.js.embedded.html</scope>
25 |   <description>Vue component</description>
26 | </snippet>
27 | 


--------------------------------------------------------------------------------
/vued.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |     <content><![CDATA[
 3 | Vue.directive('${1:my-directive}', {
 4 | 
 5 |   bind: function () {
 6 |     ${2://content}
 7 |   },
 8 | 
 9 |   update: function (value) {
10 |     ${3://content}
11 |   },
12 | 
13 |   unbind: function () {
14 |     ${4://content}
15 |   }
16 | })
17 | ]]></content>
18 |   <tabTrigger>vued</tabTrigger>
19 |   <scope>source.js.embedded.html</scope>
20 |   <description>Vue directive</description>
21 | </snippet>
22 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 
 2 | Version 2, December 2004 
 3 | 
 4 | Copyright © 2017 Filipe Linhares <lip.linhares@gmail.com> 
 5 | 
 6 | Everyone is permitted to copy and distribute verbatim or modified copies of this license document, and changing it is allowed as long as the name is changed. 
 7 | 
 8 | DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE  
 9 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 
10 | 
11 | 0. You just DO WHAT THE FUCK YOU WANT TO.


--------------------------------------------------------------------------------
/vuec.sublime-snippet:
--------------------------------------------------------------------------------
 1 | <snippet>
 2 |   <content><![CDATA[
 3 | <template>
 4 | </template>
 5 | 
 6 | <script>
 7 | export default {
 8 | 
 9 |   name: '${1:${TM_FILENAME/(.+)\..+|.*/$1/:component_name}}',
10 | 
11 |   data () {
12 |     return {
13 | 
14 |     }
15 |   }
16 | }
17 | </script>
18 | 
19 | <style lang="${2:css}" scoped>
20 | </style>
21 | ]]></content>
22 |   <tabTrigger>vuec</tabTrigger>
23 |   <scope>text.html.vue</scope>
24 |   <description>Vue component</description>
25 | </snippet>
26 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vuejs-snippets-sublime",
 3 |   "version": "1.1.2",
 4 |   "description": "Vuejs snippets for Sublime Text",
 5 |   "main": "vuejs",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "https://github.com/filipelinhares/vuejs-sublime-snippets.git"
 9 |   },
10 |   "keywords": [
11 |     "javascript",
12 |     "sublime",
13 |     "text",
14 |     "snippets"
15 |   ],
16 |   "author": "Filipe Linhares <filipelinhares@outlook.com>",
17 |   "contributors": [
18 |     "Tiago <prog4mr@gmail.com>"
19 |   ],
20 |   "license": "ISC",
21 |   "bugs": {
22 |     "url": "https://github.com/filipelinhares/vuejs-sublime-snippets/issues"
23 |   },
24 |   "homepage": "https://github.com/filipelinhares/vuejs-sublime-snippets"
25 | }
26 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # [Vue.js](http://vuejs.org/) Snippets for Sublime Text
 2 | Snippets for Sublime Text with the key features of Vue.js
 3 | 
 4 | ## Install
 5 | 1. Open [packagecontrol.io](packagecontro.io) - (<kbd>ctrl</kbd> or <kbd>⌘</kbd>) +  <kbd>⇧</kbd> + <kbd>p</kbd>
 6 | 2. Type "*Vuejs Snippets*"
 7 | 3. :white_check_mark: Installed!
 8 | 
 9 | ## Snippets
10 | 
11 | ### Global:
12 | - `v`
13 | - `vue` ⇢ Vue instance
14 | - `vued` ⇢ Vue directive
15 | - `vuef` ⇢ Vue filter
16 | - `vuenexttick` ⇢ `Vue.nextTick()`
17 | 
18 | ### Component + Options/Data
19 | - `vuec` ⇢ Vue component
20 | - `vueccomputed` ⇢ Vue computed props
21 | - `vuecdata` ⇢ Vue component data
22 | - `vuecmethods` ⇢ Vue component methods
23 | - `vuecmixins` ⇢ Vue component mixins
24 | - `vuecprops` ⇢ Vue component props
25 | - `vuecwatch` ⇢ Vue component watch
26 | 
27 | ### Vue Resource
28 | - `vueht` ⇢ `this.$http()`
29 | - `vuehtget` ⇢ `this.$http.get()`
30 | - `vuehtpost` ⇢ `this.$http.post()`
31 | 
32 | ### Vue Router
33 | - `vuert` ⇢ `this.$route`
34 | - `vuertgo` ⇢ `this.$route.router.go()`
35 | 
36 | ### Vuex
37 | - `vuex` ⇢ `Vuex instance`
38 | 
39 | ### Directives:
40 | 
41 | - `v-bind` ⇢ `:prop="data"`
42 | - `v-el` ⇢ `v-el:el-name`
43 | - `v-else` ⇢ `<div v-else>`
44 | - `v-for` ⇢ `<div v-for="item in items">`
45 | - `v-if` ⇢ `<div v-if="">`
46 | - `v-link` ⇢ `<a v-link="">`
47 | - `v-on` ⇢ `@evt="callback"`
48 | - `v-ref` ⇢ `v-ref:ref-name`
49 | 
50 | ## Update
51 | Just Remove and Install again.
52 | 
53 | ## License
54 | ● **filipe** - [WTFPL](LICENSE.md)


--------------------------------------------------------------------------------