{
  "Vue Data": {
    "prefix": "vdata",
    "body": [
      "data() {",
      "\treturn {",
      "\t\t${1:key}: ${2:value}",
      "\t}",
      "},"
    ],
    "scope": "(text.html.vue meta.export.default meta.object.member$)|(text.html.vue meta.export.default meta.objectliteral$)|(text.html.basic meta.objectliteral$)|(text.html.basic meta.object.member$)",
    "description": "Vue Component Data"
  },
  "Vue Components": {
    "prefix": "vcomponents",
    "body": [
      "components: {",
      "\t$1",
      "},"
    ],
    "scope": "(text.html.vue meta.export.default meta.object.member$)|(text.html.vue meta.export.default meta.objectliteral$)|(text.html.basic meta.objectliteral$)|(text.html.basic meta.object.member$)",
    "description": "%VueComponents.description%"
  },
  "Vue Methods": {
    "prefix": "vmethod",
    "body": [
      "methods: {",
      "\t${1:name}() {",
      "\t\t${0}",
      "\t}",
      "},"
    ],
    "scope": "(text.html.vue meta.export.default meta.object.member$)|(text.html.vue meta.export.default meta.objectliteral$)|(text.html.basic meta.objectliteral$)|(text.html.basic meta.object.member$)",
    "description": "vue method"
  },
  "Vue Computed": {
    "prefix": "vcomputed",
    "body": [
      "computed: {",
      "\t${1:name}() {",
      "\t\treturn this.${2:data} ${0}",
      "\t}",
      "},"
    ],
    "scope": "(text.html.vue meta.export.default meta.object.member$)|(text.html.vue meta.export.default meta.objectliteral$)|(text.html.basic meta.objectliteral$)|(text.html.basic meta.object.member$)",
    "description": "computed value"
  },
  "Vue Watchers": {
    "prefix": "vwatcher",
    "body": [
      "watch: {",
      "\t${1:data}(${2:newValue}, ${3:oldValue}) {",
      "\t\t${0}",
      "\t}",
      "},"
    ],
    "scope": "(text.html.vue meta.export.default meta.object.member$)|(text.html.vue meta.export.default meta.objectliteral$)|(text.html.basic meta.objectliteral$)|(text.html.basic meta.object.member$)",
    "description": "vue watcher"
  },
  "Vue Props with Default": {
    "prefix": "vprops",
    "body": [
      "props: {",
      "\t${1:propName}: {",
      "\t\ttype: ${2:Number},",
      "\t\tdefault: ${0}",
      "\t},",
      "},"
    ],
    "scope": "(text.html.vue meta.export.default meta.object.member$)|(text.html.vue meta.export.default meta.objectliteral$)|(text.html.basic meta.objectliteral$)|(text.html.basic meta.object.member$)",
    "description": "Vue Props with Default"
  },
  "Vue Import File": {
    "prefix": "vimport",
    "body": [
      "import ${1:New} from '/components/${1:New}.vue';"
    ],
    "description": "Import one component into another"
  },
  "Vue Import into the Component": {
    "prefix": "vcomponents",
    "body": [
      "components: {",
      "\t${1:New},",
      "}"
    ],
    "description": "Import one component into another, within export statement"
  },
  "Vue Import Export": {
    "prefix": "vimport-export",
    "body": [
      "import ${1:Name} from './components/${1:Name}.vue'",
      "",
      "export default {",
      "\tcomponents: {",
      "\t\t${1:Name}",
      "\t},",
      "}"
    ],
    "description": "import a component and include it in export default"
  },
  "Vue Filter": {
    "prefix": "vfilter",
    "body": [
      "filters: {",
      "\t${1:fnName}: function(${2:value}) {",
      "\t\treturn ${2:value}${0};",
      "\t}",
      "}"
    ],
    "scope": "(text.html.vue meta.export.default meta.object.member$)|(text.html.vue meta.export.default meta.objectliteral$)|(text.html.basic meta.objectliteral$)|(text.html.basic meta.object.member$)",
    "description": "vue filter"
  },
  "Vue Mixin": {
    "prefix": "vmixin",
    "body": [
      "const ${1:mixinName} = {",
      "\tmounted() {",
      "\t\tconsole.log('hello from mixin!')",
      "\t},",
      "}"
    ],
    "description": "vue mixin"
  },
  "Vue Use Mixin": {
    "prefix": "vmixin-use",
    "body": [
      "mixins: [${1:mixinName}]"
    ],
    "description": "vue use mixin"
  },
  "Vue Custom Directive": {
    "prefix": "vc-direct",
    "body": [
      "Vue.directive('${1:directiveName}', {",
      "\tbind(el, binding, vnode) {",
      "\t\tel.style.${2:arg} = binding.value.${2:arg};",
      "\t}",
      "});"
    ],
    "description": "vue custom directive"
  },
  "Vue Import Library": {
    "prefix": "vimport-lib",
    "body": [
      "import { ${1:libName} } from '${1:libName}'"
    ],
    "description": "import a library"
  },
  "Vue Import GSAP": {
    "prefix": "vimport-gsap",
    "body": [
      "import { TimelineMax, ${1:Ease} } from 'gsap'"
    ],
    "description": "component methods options that dispatch an action from vuex store."
  },
  "Vue Transition Methods with JavaScript Hooks": {
    "prefix": "vanimhook-js",
    "body": [
      "beforeEnter(el) {",
      "\tconsole.log('beforeEnter');",
      "},",
      "enter(el, done) {",
      "\tconsole.log('enter');",
      "\tdone();",
      "},",
      "beforeLeave(el) {",
      "\tconsole.log('beforeLeave');",
      "},",
      "leave(el, done) {",
      "\tconsole.log('leave');",
      "\tdone();",
      "},"
    ],
    "description": "transition component js hooks"
  },
  "Vue Commit Vuex Store in Methods": {
    "prefix": "vcommit",
    "body": [
      "${1:mutationName}() {",
      "\tthis.\\$store.commit('${1:mutationName}', ${2:payload})",
      "}"
    ],
    "scope": "(text.html.vue meta.export.default meta.object.member$)|(text.html.vue meta.export.default meta.objectliteral$)|(text.html.basic meta.objectliteral$)|(text.html.basic meta.object.member$)",
    "description": "commit to vuex store in methods for mutation"
  },
  "Vue Dispatch Vuex Store in Methods": {
    "prefix": "vdispatch",
    "body": [
      "${1:actionName}() {",
      "\tthis.\\$store.dispatch('${1:actionName}', ${2:payload})",
      "}"
    ],
    "scope": "(text.html.vue meta.export.default meta.object.member$)|(text.html.vue meta.export.default meta.objectliteral$)|(text.html.basic meta.objectliteral$)|(text.html.basic meta.object.member$)",
    "description": "dispatch to vuex store in methods for action"
  },
  "Incrementer": {
    "prefix": "vinc",
    "body": [
      "return ${1:this.num} += ${2:1}"
    ],
    "description": "increment"
  },
  "Decrementer": {
    "prefix": "vdec",
    "body": [
      "return ${1:this.num} -= ${2:1}"
    ],
    "description": "decrement"
  },
  "Unit Test": {
    "prefix": "vtest",
    "body": [
      "import Vue from 'vue'",
      "import ${1:HelloWorld} from './components/${1:HelloWorld}'",
      "",
      "describe('${1:HelloWorld}.vue', () => {",
      "\tit('${2:should render correct contents}', () => {",
      "\t\tconst Constructor = Vue.extend(${1:HelloWorld})",
      "\t\tconst vm = new Constructor().$mount()",
      "\t\texpect(vm.$el.querySelector('.hello h1').textContent)",
      "\t\t\t.to.equal(${3:'Welcome to Your Vue.js App'})",
      "\t})",
      "})"
    ],
    "description": "unit test component"
  },
  "import": {
    "prefix": "import",
    "body": [
      "import { $1 } from \"vue\""
    ]
  },
  "setup": {
    "prefix": "setup",
    "body": [
      "setup(${1:props}, ${2:context}) {",
      "\t$0",
      "}"
    ]
  }
}