VSCode Vetur Snippet for Vue 2.x components

snippet.vue

<template>
  <div class="${TM_FILENAME_BASE/(^[A-Z])|([A-Z])/${2:+-}${2:/downcase}${1:/downcase}/g}"></div>
</template>

<script>
export default {
  name: '${TM_FILENAME_BASE}',
  components: {},
  props: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.${TM_FILENAME_BASE/(^[A-Z])|([A-Z])/${2:+-}${2:/downcase}${1:/downcase}/g} {
  position: relative;
}
</style>

To add this snippet just open command palette and select Vetur: Open user scaffold snippet folder. This action will open a new VSCode Editor and you be able to create a snippet file with the code above.

Example: TrackerSearchForm.vue

Output:

<template>
  <div class="tracker-search-form"></div>
</template>

<script>
export default {
  name: 'TrackerSearchForm',
  components: {},
  props: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.tracker-search-form {
  position: relative;
}
</style>