# This snippet file enables vue files to use tabs for html, js and css. It also # includes some vue-specific html-like snippets, as well as some general # boilerplate code for vue. extends html, javascript, css # These snippets form a port of Sarah Drasner's vue-sublime-snippets # some html-like snippets snippet slot <slot></slot> snippet template <template></template> snippet transition <transition></transition> # The following snippets create more complex boilerplate code. snippet vbase <template> <div> </div> </template> <script> export default{ ${0} } </script> <style scoped> </style> snippet vimport:c import ${1:Name} from './components/$1.vue'; export default { components: { $1 } } snippet vactions actions: { ${1:updateValue}({commit}, ${2:payload}) { commit($1, $2); } }, # Add in js animation hooks snippet vanim:js:el <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @enter-cancelled="enterCancelled" @before-Leave="beforeLeave" @leave="leave" @after-leave="afterLeave" @leave-cancelled="leaveCancelled" :css="false"> </transition> snippet vanim:js:method methods: { beforeEnter(el) { console.log('beforeEnter'); }, enter(el, done) { console.log('enter'); done(); }, afterEnter(el) { console.log('afterEnter'); }, enterCancelled(el, done) { console.log('enterCancelled'); }, beforeLeave(el) { console.log('beforeLeave'); }, leave(el, done) { console.log('leave'); done(); }, afterLeave(el) { console.log('afterLeave'); }, leaveCancelled(el, done) { console.log('leaveCancelled'); } } snippet vcl @click="${1}" snippet vdata data() { return { ${1:key}: ${2:value} }; }, snippet vmounted mounted() { console.log('mounted'); }, snippet vmethods methods: { ${1:method}() { console.log('method'); } }, snippet vcomputed computed: { ${1:fnName}() { return; } }, snippet vfilter filters: { ${1:fnName}: function(${2:value}) { return; } }, snippet vfor <div v-for="${1:item} in ${2:items}" :key="$1.id"> {{ $1 }} </div> snippet vgetters getters: { ${1:value}: state => { return state.$1; } }, snippet vimport import ${1:New} from './components/$1.vue'; snippet vkeep <keep-alive> <component :is=""> <p>default</p> </component> </keep-alive> snippet vmixin const ${1:mixinName} = { mounted() { console.log('hello from mixin!') }, } const ${2:Component} = Vue.extend({ mixins: [$1] }) snippet vmutations mutations: { ${1:updateValue}(state, ${3:payload}) => { state.${2:value} = $3; } }, snippet vprops:d ${1:propName}: { type: ${2:Number}, default: ${0} }, snippet vprops ${1:propName}: { type: ${2:Number} }, snippet vstore import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export const store = new Vuex.Store({ state: { ${1:key}: ${2:value} } }); # vue-i18n snippets https://github.com/kazupon/vue-i18n snippet trans $t('$1') # Translation with parameter snippet transc $t('$1', { $2: $3 })