diff options
Diffstat (limited to 'snippets/vue.snippets')
| -rw-r--r-- | snippets/vue.snippets | 208 |
1 files changed, 0 insertions, 208 deletions
diff --git a/snippets/vue.snippets b/snippets/vue.snippets deleted file mode 100644 index 9462635..0000000 --- a/snippets/vue.snippets +++ /dev/null @@ -1,208 +0,0 @@ -# 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 }) - |
