# 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 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 })