nvim/UltiSnips/vue.snippets

extends html, javascript, scss

snippet vue "Default template"
<template>
  $0
</template>

<script>
export default {
  props: {
  },

  data () {
    return {
    }
  },

  methods: {
  }
}
</script>

<style lang="scss" scoped>
</style>
endsnippet

snippet byinput "Beufy Input Field"
<div class="field"> <!-- $1 -->
  <label class="label">$1</label>
  <div class="control">
    <input class="input"
     name="$2"
     ${3:type="${4:text}"}
     v-model="${5:$2}">
  </div>
</div>$0
endsnippet

snippet byselect "Buefy Select Field"
<div class="field"> <!-- $1 -->
  <label class="label">$1</label> 
  <div class="control">
    <div class="select">
      <select name="$2"
              :v-model="$2">
	$0
      </select>
    </div>
  </div>
</div>
endsnippet

snippet nt "this.$nextTick( () => { ... })"
this.$nextTick( () => {
  $0
})
endsnippet

snippet props "props: { ...  }"
props: {
  $1: {
    type: ${2:Boolean},
    required: ${3:false},
    default() {
      return ${4:false};
    },
  },
},$0
endsnippet

snippet prop "property: { ...  }"
$1: {
  type: ${2:Boolean},
  required: ${3:false},
  default() {
    return ${4:false};
  },
},$0
endsnippet

snippet comps "components { ...  }"
components: {
  $0,
},
endsnippet

snippet data "data() { return { ... } }"
data() {
  return {
    $1: $2,$0
  };
},
endsnippet

snippet compd "computed: { ...  }"
computed: {
  $1() {
    $0
  },
},
endsnippet

snippet meth "methods: { ...  }"
methods: {
  $1() {
    $0
  },
},
endsnippet

snippet style "<style ..."
<style ${1:lang="${2:scss}"} ${3:scoped}>
$0
</style>
endsnippet

snippet impc "import ... from '~/components...';"
import $1 from '~/components/$1';$0
endsnippet

snippet tran "<transition ..."
<transition name="$1">
  ${VISUAL}$0
</transition>
endsnippet

snippet .tran "vue transition selector"
.$1 {
  &-enter-active {
    transition: ${2:opacity} ${3:1}s;
  }

  &-leave-active {
    transition: $2 ${4:1}s;
  }
  
  &-enter,
  &-leave-to {
    $2: ${5:0};
  }
}$0
endsnippet

snippet script "<script> ...</script>"
<script>
export default {
  name: '$0',
};
</script>
endsnippet

snippet s ":style='{ ... }"
:style="{ '$1': $2 }"$0
endsnippet