vim/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