vue2 component template:
"vue2 component template": {
"prefix": "vue2",
"body": [
"<template>",
" <div>\n",
" </div>",
"</template>",
"<script>",
"export default {",
" name: 'APP',",
" data () {",
" return {",
" }",
" },",
" methods: {",
" },",
" created () {",
" },",
" mounted () {",
" },",
"}",
"</script>",
"<style lang=\"scss\" scoped>",
"/* @import url(); import css class*/\n",
"</style>",
"$2"
],
"description": "vue2 component template"
},
Vue3 component setup function template
"Vue3 component setup function template": {
"prefix": "vue3",
"body": [
"<template>",
" <div class=\"container\">\n",
" </div>",
"</template>\n",
"<script>",
"import { reactive, toRefs, onBeforeMount, onMounted } from 'vue'",
"export default {",
" name: '$TM_FILENAME_BASE',",
" setup () {",
"",
// " console.log('1-Start creating components-setup')",
// " const data = reactive({})",
// " onBeforeMount(() => {",
// " console.log('2. Execute before the component mounts the page ----onBeforeMount')",
// " })",
// " onMounted(() => {",
// " console.log('3.- Execute after the component is mounted on the page-------onMounted')",
// " })",
// " return {",
// " ...toRefs(data),",
// " }",
" },",
"}",
"",
"</script>",
"<style lang=\"scss\" scoped>",
"/* @import url(); import css class*/\n",
"</style>",
""
],
"description": "vue3 component setup function template"
},
Vue3 component setup syntax sugar template
"Vue3 component setup syntax sugar template": {
"prefix": "setup",
"body": [
"<template>",
" <div class=\"container\">\n",
" </div>",
"</template>\n",
"<script setup>",
"import {} from \"vue\"\n\n\n\n\n\n",
"</script>\n",
"<style lang=\"scss\" scoped>",
"/* @import url(); import css class*/\n",
"</style>",
"$2"
],
"description": "Vue3 component setup syntax sugar template"
}