# 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{

		}
	</script>
	<style scoped>

	</style>
snippet vimport:c
	import New from './components/New.vue';

	export default{
		components: {
			appNew: New 
		}
	}

snippet vactionsis now

	actions: {
		updateValue({commit}, payload) {
			commit(updateValue, payload);
		}
	}

# 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=""

snippet vdata
	data: function () {
	  return {
		key: value
	  };
	}

snippet vfilter
	filters: {
	  fnName: function (v) {
		return;
	  }
	}

snippet vfor
	<div v-for="item in items" :key="item.id">
	  {{ item }}
	</div

snippet vgetters
	getters: {
		value: state => {
			return state.value;
		}
	}

snippet vimport 
	import New from './components/New.vue';

snippet vkeep
	<keep-alive>
	  <component :is="">
		<p>default</p>
	  </component>
	</keep-alive>

snippet vmixin
	// define a mixin object
	var myMixin = {
	  created: function () {
		this.hello()
	  },
	  methods: {
		hello: function () {
		  console.log('hello from mixin!')
		}
	  }
	}
	// define a component that uses this mixin
	var Component = Vue.extend({
	  mixins: [myMixin]
	})
	var component = new Component() // -> "hello from mixin!"

snippet vmutations
	// define a mixin object
	var myMixin = {
	  created: function () {
		this.hello()
	  },
	  methods: {
		hello: function () {
		  console.log('hello from mixin!')
		}
	  }
	}
	// define a component that uses this mixin
	var Component = Vue.extend({
	  mixins: [myMixin]
	})
	var component = new Component() // -> "hello from mixin!"

snippet vprops:d
	propName: {
	  type: Number,
	  default: 100
	},

snippet vprops 
	propName: {
		type: Number
	},