1 files changed, 208 insertions, 0 deletions
diff --git a/snippets/vue.snippets b/snippets/vue.snippets
new file mode 100644
index 0000000..9462635
--- /dev/null
+++ b/snippets/vue.snippets
@@ -0,0 +1,208 @@
+# 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 })
+