diff --git a/snippets/frameworks/vue/html.json b/snippets/frameworks/vue/html.json
index 79a221a3..95df1853 100644
--- a/snippets/frameworks/vue/html.json
+++ b/snippets/frameworks/vue/html.json
@@ -52,19 +52,14 @@
         ],
         "description": "Expects: Array | Object | number | string"
     },
-    "v-on": {
-        "prefix": "vOn",
-        "body": ["v-on:${1:event}=\"${2:handle}\""],
-        "description": "Expects: Function | Inline Statement"
-    },
-    "v-on-shortcut": {
+    "v-on-shorthand": {
         "prefix": "@",
         "body": ["@${1:event}=\"${2:handle}\""],
         "description": "v-on shortcut from vue 3"
     },
-    "v-bind": {
+    "v-bind-shorthand": {
         "prefix": "vBind",
-        "body": ["v-bind$1=\"${2}\""],
+        "body": [":{$1}=\"${2}\""],
         "description": "Expects: any (with argument) | Object (without argument)"
     },
     "v-model": {
@@ -74,7 +69,7 @@
     },
     "v-slot": {
         "prefix": "vSlot",
-        "body": ["v-slot$1=\"${2}\""],
+        "body": ["#{$1:nameSlot}=\"${2}\""],
         "description": "Expects: JavaScript expression that is valid in a function argument position (supports destructuring in supported environments). Optional - only needed if expecting props to be passed to the slot."
     },
     "v-pre": {
@@ -112,16 +107,6 @@
         "body": ["<slot$1>$2</slot>$0"],
         "description": "<slot></slot>. Expects: string. Used on content inserted into child components to indicate which named slot the content belongs to."
     },
-    "slotScope": {
-        "prefix": "slotScope",
-        "body": ["slot-scope=\"$1\"$0"],
-        "description": "Used to denote an element or component as a scoped slot. The attribute’s value should be a valid JavaScript expression that can appear in the argument position of a function signature. This means in supported environments you can also use ES2015 destructuring in the expression. Serves as a replacement for scope in 2.5.0+."
-    },
-    "scope": {
-        "prefix": "scope",
-        "body": ["scope=\"${1:this api replaced by slot-scope in 2.5.0+}\"$0"],
-        "description": "Used to denote a <template> element as a scoped slot, which is replaced by `slot-scope` in 2.5.0+."
-    },
     "component": {
         "prefix": "component",
         "body": ["<component :is=\"${1:componentId}\"></component>$0"],
@@ -142,111 +127,6 @@
         "body": ["<transition-group$1>", "$2", "</transition-group>"],
         "description": "transition-group element"
     },
-    "enter-class": {
-        "prefix": "enterClass",
-        "body": ["enter-class=\"$1\"$0"],
-        "description": "enter-class=''. Expects: string."
-    },
-    "leave-class": {
-        "prefix": "leaveClass",
-        "body": ["leave-class=\"$1\"$0"],
-        "description": "leave-class=''. Expects: string."
-    },
-    "appear-class": {
-        "prefix": "appearClass",
-        "body": ["appear-class=\"$1\"$0"],
-        "description": "appear-class=''. Expects: string."
-    },
-    "enter-to-class": {
-        "prefix": "enterToClass",
-        "body": ["enter-to-class=\"$1\"$0"],
-        "description": "enter-to-class=''. Expects: string."
-    },
-    "leave-to-class": {
-        "prefix": "leaveToClass",
-        "body": ["leave-to-class=\"$1\"$0"],
-        "description": "leave-to-class=''. Expects: string."
-    },
-    "appear-to-class": {
-        "prefix": "appearToClass",
-        "body": ["appear-to-class=\"$1\"$0"],
-        "description": "appear-to-class=''. Expects: string."
-    },
-    "enter-active-class": {
-        "prefix": "enterActiveClass",
-        "body": ["enter-active-class=\"$1\"$0"],
-        "description": "enter-active-class=''. Expects: string."
-    },
-    "leave-active-class": {
-        "prefix": "leaveActiveClass",
-        "body": ["leave-active-class=\"$1\"$0"],
-        "description": "leave-active-class=''. Expects: string."
-    },
-    "appear-active-class": {
-        "prefix": "appearActiveClass",
-        "body": ["appear-active-class=\"$1\"$0"],
-        "description": "appear-active-class=''. Expects: string."
-    },
-    "before-enter": {
-        "prefix": "beforeEnterEvent",
-        "body": ["@before-enter=\"$1\"$0"],
-        "description": "@before-enter=''"
-    },
-    "before-leave": {
-        "prefix": "beforeLeaveEvent",
-        "body": ["@before-leave=\"$1\"$0"],
-        "description": "@before-leave=''"
-    },
-    "before-appear": {
-        "prefix": "beforeAppearEvent",
-        "body": ["@before-appear=\"$1\"$0"],
-        "description": "@before-appear=''"
-    },
-    "enter": {
-        "prefix": "enterEvent",
-        "body": ["@enter=\"$1\"$0"],
-        "description": "@enter=''"
-    },
-    "leave": {
-        "prefix": "leaveEvent",
-        "body": ["@leave=\"$1\"$0"],
-        "description": "@leave=''"
-    },
-    "appear": {
-        "prefix": "appearEvent",
-        "body": ["@appear=\"$1\"$0"],
-        "description": "@appear=''"
-    },
-    "after-enter": {
-        "prefix": "afterEnterEvent",
-        "body": ["@after-enter=\"$1\"$0"],
-        "description": "@after-enter=''"
-    },
-    "after-leave": {
-        "prefix": "afterLeaveEvent",
-        "body": ["@after-leave=\"$1\"$0"],
-        "description": "@after-leave=''"
-    },
-    "after-appear": {
-        "prefix": "afterAppearEvent",
-        "body": ["@after-appear=\"$1\"$0"],
-        "description": "@after-appear=''"
-    },
-    "enter-cancelled": {
-        "prefix": "enterCancelledEvent",
-        "body": ["@enter-cancelled=\"$1\"$0"],
-        "description": "@enter-cancelled=''"
-    },
-    "leave-cancelled": {
-        "prefix": "leaveCancelledEvent",
-        "body": ["@leave-cancelled=\"$1\"$0"],
-        "description": "@leave-cancelled='' (v-show only)"
-    },
-    "appear-cancelled": {
-        "prefix": "appearCancelledEvent",
-        "body": ["@appear-cancelled=\"$1\"$0"],
-        "description": "@appear-cancelled=''"
-    },
     "routerLink": {
         "prefix": "routerLink",
         "body": ["<router-link $1>$2</router-link>$0"],
diff --git a/snippets/frameworks/vue/javascript.json b/snippets/frameworks/vue/javascript.json
index 8b2e74c7..7a1a64c7 100644
--- a/snippets/frameworks/vue/javascript.json
+++ b/snippets/frameworks/vue/javascript.json
@@ -1,984 +1,657 @@
 {
-    "import": {
-        "prefix": "import",
-        "body": ["import $1 from '$2'"],
-        "description": "import ... from ..."
-    },
-    "vue": {
-        "prefix": "newVue",
-        "body": ["new Vue({", "\t$1", "})"],
-        "description": "new Vue()"
-    },
-    "silent": {
-        "prefix": "VueConfigSilent",
-        "body": ["Vue.config.silent = ${1:true}"],
-        "description": "Vue.config.silent"
-    },
-    "optionMergeStrategies": {
-        "prefix": "VueConfigOptionMergeStrategies",
-        "body": ["Vue.config.optionMergeStrategies$1"],
-        "description": "Vue.config.optionMergeStrategies"
-    },
-    "devtools": {
-        "prefix": "VueConfigDevtools",
-        "body": ["Vue.config.devtools = ${1:true}"],
-        "description": "Vue.config.devtools"
-    },
-    "errorHandler": {
-        "prefix": "VueConfigErrorHandler",
-        "body": [
-            "Vue.config.errorHandler = function (err, vm, info) {",
-            "\t${1:// handle error}",
-            "}"
-        ],
-        "description": "Vue.config.errorHandler"
-    },
-    "warnHandler": {
-        "prefix": "VueConfigWarnHandler",
-        "body": [
-            "Vue.config.warnHandler = function (msg, vm, trace) {",
-            "\t${1:// handle warn}",
-            "}"
-        ],
-        "description": "Vue.config.warnHandler"
-    },
-    "ignoredElements": {
-        "prefix": "VueConfigIgnoredElements",
-        "body": ["Vue.config.ignoredElements = [", "\t'${1}'", "]$0"],
-        "description": "Vue.config.ignoredElements"
-    },
-    "keyCodes": {
-        "prefix": "VueConfigKeyCodes",
-        "body": [
-            "Vue.config.keyCodes = {",
-            "\t${1:// camelCase won`t work}",
-            "}"
-        ],
-        "description": "Vue.config.keyCodes"
-    },
-    "performance": {
-        "prefix": "VueConfigPerformance",
-        "body": ["Vue.config.performance = ${1:true}"],
-        "description": "Vue.config.performance"
-    },
-    "productionTip": {
-        "prefix": "VueConfigProductionTip",
-        "body": ["Vue.config.productionTip = ${1:false}"],
-        "description": "Vue.config.productionTip"
-    },
-    "extend": {
-        "prefix": "vueExtend",
-        "body": ["Vue.extend({", "\ttemplate:${1:template}", "})"],
-        "description": "Vue.extend( options )"
-    },
-    "nextTick": {
-        "prefix": "VueNextTick",
-        "body": ["Vue.nextTick({", "\t$1", "})"],
-        "description": "Vue.nextTick( callback, [context] )"
-    },
-    "nextTick-composition": {
-        "prefix": "nextTickVue3",
-        "body": ["nextTick({", "\t$1", "})"],
-        "description": "A utility for waiting for the next DOM update flush."
-    },
-    "nextTick-word": {
-        "prefix": "nextTick",
-        "body": ["nextTick()"],
-        "description": "just a word"
-    },
-    "nextTickThen": {
-        "prefix": "VueNextTickThen",
-        "body": [
-            "Vue.nextTick({",
-            "\t$1",
-            "}).then(function ($2) {",
-            "\t$3",
-            "})"
-        ],
-        "description": "Vue.nextTick( callback, [context] ).then(function(){ })"
-    },
-    "set": {
-        "prefix": "VueSet",
-        "body": ["Vue.set(${1:target}, ${2:key}, ${3:value})"],
-        "description": "Vue.set( target, key, value )"
-    },
-    "delete": {
-        "prefix": "VueDelete",
-        "body": ["Vue.delete(${1:target}, ${2:key})"],
-        "description": "Vue.delete( target, key )"
-    },
-    "directive": {
-        "prefix": "VueDirective",
-        "body": ["Vue.directive(${1:id}${2:, [definition]})"],
-        "description": "Vue.directive( id, [definition] )"
-    },
-    "filter": {
-        "prefix": "VueFilter",
-        "body": ["Vue.filter(${1:id}${2:, [definition]})"],
-        "description": "Vue.filter( id, [definition] )"
-    },
-    "component": {
-        "prefix": "VueComponent",
-        "body": ["Vue.component(${1:id}${2:, [definition]})$0"],
-        "description": "Vue.component( id, [definition] )"
-    },
-    "defineAsyncComponent": {
-        "prefix": "defineAsyncComponent",
-        "body": ["const $1 = defineAsyncComponent(() =>", "import('$0')", ");"],
-        "description": "create a async vue component"
-    },
-    "defineComponent": {
-        "prefix": "defineComponent",
-        "body": ["const $1 = defineComponent({", "$0", "})"],
-        "description": "create a component vue component"
-    },
-    "defineCustomElement": {
-        "prefix": "defineCustomElement",
-        "body": ["const $1 = defineCustomElement({", "$0", "})"],
-        "description": "create a custom element vue"
-    },
-    "Vueuse": {
-        "prefix": "VueUse",
-        "body": ["Vue.use(${1:plugin})$0"],
-        "description": "Vue.use( plugin )"
-    },
-    "mixin": {
-        "prefix": "VueMixin",
-        "body": ["Vue.mixin({${1:mixin}})"],
-        "description": "Vue.mixin( mixin )"
-    },
-    "compile": {
-        "prefix": "VueCompile",
-        "body": ["Vue.compile(${1:template})"],
-        "description": "Vue.compile( template )"
-    },
-    "observable": {
-        "prefix": "VueObservable",
-        "body": ["Vue.observable({${1:object}})"],
-        "description": "Vue.observable( object )"
-    },
-    "version": {
-        "prefix": "VueVersion",
-        "body": ["Vue.version$0"],
-        "description": "Vue.version.split('.')[]"
-    },
-    "data": {
-        "prefix": "data",
-        "body": ["data() {", "\treturn {", "\t\t$1", "\t}", "},$0"],
-        "description": "The data object for the Vue instance."
-    },
-    "props": {
-        "prefix": "props",
-        "body": ["props"],
-        "description": "A list/hash of attributes that are exposed to accept data from the parent component. "
-    },
-    "props-composition": {
-        "prefix": "defineProps",
-        "body": ["const props = defineProps({", "$0", "});"],
-        "description": "A list/hash of attributes that are exposed to accept data from the parent component. "
-    },
-    "emits-composition": {
-        "prefix": "emitsVue",
-        "body": ["const emits = defineEmits([ $0 ]);"],
-        "description": "A list of events that componetnt can emits to the parent component. "
-    },
-    "propsData": {
-        "prefix": "propsData",
-        "body": ["propsData"],
-        "description": "Restriction: only respected in instance creation via `new`. Pass props to an instance during its creation. This is primarily intended to make unit testing easier."
-    },
-    "scopedSlots": {
-        "prefix": "scopedSlots",
-        "body": ["scopedSlots"],
-        "description": "just a word"
-    },
-    "computed": {
-        "prefix": "computed",
-        "body": ["computed: {", "\t$1", "},$0"],
-        "description": "Computed properties to be mixed into the Vue instance. "
-    },
-    "computed-composition": {
-        "prefix": "computedVue",
-        "body": ["const $1 = computed(() => {", "$0", "});"],
-        "description": "Computed properties to be mixed into the Vue instance. "
-    },
-    "reactive-composition": {
-        "prefix": "reactVue",
-        "body": ["const $1 = reactive($0)"],
-        "description": "Reative properties to be mixed into the Vue instance. "
-    },
-    "shallow-reactive-composition": {
-        "prefix": "sreactVue",
-        "body": ["const $1 = shallowReactive({$0})"],
-        "description": "Shallow reative properties to be mixed into the Vue instance. "
-    },
-    "ref-composition": {
-        "prefix": "rfVue",
-        "body": ["const $1 = ref($2)", "$0"],
-        "description": "Ref properties to be mixed into the Vue instance. "
-    },
-    "template-ref-ts-composition": {
-        "prefix": "trfVue",
-        "body": ["const $0 = ref<HTMLInputElement | null>(null)"],
-        "description": "Template ref to be mixed into the Vue instance. "
-    },
-    "component-ref-ts-composition": {
-        "prefix": "crfVue",
-        "body": ["const $1 = ref<InstanceType<typeof $0> | null>(null)"],
-        "description": "Template ref to be mixed into the Vue instance. "
-    },
-    "methods": {
-        "prefix": "methods",
-        "body": ["methods: {", "\t$1", "},$0"],
-        "description": "Methods to be mixed into the Vue instance."
-    },
-    "method-composition": {
-        "prefix": "functionVue3",
-        "body": ["const $1 = ($2) => {", "$0", "};"],
-        "description": "Method composition properties to be mixed into the Vue instance. "
-    },
-    "watch": {
-        "prefix": "watch",
-        "body": ["watch: {", "\t$1", "},$0"],
-        "description": "An object where keys are expressions to watch and values are the corresponding callbacks. The value can also be a string of a method name, or an Object that contains additional options. Note that you should not use an arrow function to define a watcher."
-    },
-    "watch-composition": {
-        "prefix": "cwatch",
-        "body": ["watch($1, ($2, $3) => {", "$0", "});"],
-        "description": "Watch over a reactive source and call a function in reaction to state changes "
-    },
-    "watchWithOptions": {
-        "prefix": "watchWithOptions",
-        "body": [
-            "${1:key}: {",
-            "\tdeep: ${2:true},",
-            "\timmediate: ${3:true},",
-            "\thandler: function (${4:val}, ${5:oldVal}) {",
-            "\t\t$6",
-            "\t}",
-            "},$0"
-        ],
-        "description": "Vue Watcher with options."
-    },
-    "watchEffect-composition": {
-        "prefix": "watchEffect",
-        "body": ["watchEffect($1, ($2, $3) => {", "$0", "});"],
-        "description": "watchEffect from vue composition "
-    },
-    "el": {
-        "prefix": "el",
-        "body": ["el"],
-        "description": "just a word"
-    },
-    "template": {
-        "prefix": "template",
-        "body": ["template"],
-        "description": "just a word"
-    },
-    "render": {
-        "prefix": "render",
-        "body": ["render(h) {", "\t$1", "},"],
-        "description": "An alternative to string templates allowing you to leverage the full programmatic power of JavaScript."
-    },
-    "renderError": {
-        "prefix": "renderError",
-        "body": ["renderError(h, err) {", "\t$1", "},"],
-        "description": "Provide an alternative render output when the default render function encounters an error."
-    },
-    "beforeCreate": {
-        "prefix": "beforeCreate",
-        "body": ["beforeCreate() {", "\t$1", "},"],
-        "description": "Type: Function."
-    },
-    "created": {
-        "prefix": "created",
-        "body": ["created() {", "\t$1", "},"],
-        "description": "Type: Function."
-    },
-    "beforeMount": {
-        "prefix": "beforeMount",
-        "body": ["beforeMount() {", "\t$1", "},"],
-        "description": "Type: Function."
-    },
-    "mounted": {
-        "prefix": "mounted",
-        "body": ["mounted() {", "\t$1", "},"],
-        "description": "Type: Function."
-    },
-    "onBeforeMount-composition": {
-        "prefix": "onBeforeMount",
-        "body": ["onBeforeMount(() => {$0})"],
-        "description": "Vue before mount composition lifecycle hook"
-    },
-    "onMounted-composition": {
-        "prefix": "onmounted",
-        "body": ["onMounted(() => {$0})"],
-        "description": "Vue mounted lifecycle hook"
-    },
-    "onBeforeUnmount-composition": {
-        "prefix": "onBeforeUnmount",
-        "body": ["onBeforeUnmount(() => {$0})"],
-        "description": "Vue before unmount composition lifecycle hook"
-    },
-    "onUnmounted-composition": {
-        "prefix": "onunmounted",
-        "body": ["onUnmounted(() => {$0})"],
-        "description": "Vue unMounted lifecycle hook"
-    },
-    "beforeUpdate": {
-        "prefix": "beforeUpdate",
-        "body": ["beforeUpdate() {", "\t$1", "},"],
-        "description": "Type: Function."
-    },
-    "updated": {
-        "prefix": "updated",
-        "body": ["updated() {", "\t$1", "},"],
-        "description": "Type: Function."
-    },
-    "onBeforeUpdate-composition": {
-        "prefix": "onBeforeUpdate",
-        "body": ["onBeforeUpdate(() => {$0})"],
-        "description": "Vue before update composition lifecycle hook"
-    },
-    "onUpdated-composition": {
-        "prefix": "onupdated",
-        "body": ["onUpdated(() => {$0})"],
-        "description": "Vue updated lifecycle hook"
-    },
-    "activated": {
-        "prefix": "activated",
-        "body": ["activated() {", "\t$1", "},"],
-        "description": "Type: Function."
-    },
-    "deactivated": {
-        "prefix": "deactivated",
-        "body": ["deactivated() {", "\t$1", "},"],
-        "description": "Type: Function."
-    },
-    "onActivated-composition": {
-        "prefix": "onActivated",
-        "body": ["onActivated(() => {$0})"],
-        "description": "Vue activated composition lifecycle hook"
-    },
-    "onDeactivated-composition": {
-        "prefix": "onDeactivated",
-        "body": ["onDeactivated(() => {$0})"],
-        "description": "Vue deactivated composition lifecycle hook"
-    },
-    "beforeDestroy": {
-        "prefix": "beforeDestroy",
-        "body": ["beforeDestroy() {", "\t$1", "},"],
-        "description": "Type: Function."
-    },
-    "destroyed": {
-        "prefix": "destroyed",
-        "body": ["destroyed() {", "\t$1", "},"],
-        "description": "Type: Function."
-    },
-    "errorCaptured": {
-        "prefix": "errorCaptured",
-        "body": ["errorCaptured: (err, vm, info) => {", "\t$1", "},"],
-        "description": "Type: (err: Error, vm: Component, info: string) => ?boolean"
-    },
-    "directives": {
-        "prefix": "directives",
-        "body": ["directives"],
-        "description": "just a word"
-    },
-    "filters": {
-        "prefix": "filters",
-        "body": ["filters"],
-        "description": "just a word"
-    },
-    "componentWord": {
-        "prefix": "component",
-        "body": ["component"],
-        "description": "just a word"
-    },
-    "components": {
-        "prefix": "components",
-        "body": ["components"],
-        "description": "just a word"
-    },
-    "parent": {
-        "prefix": "parent",
-        "body": ["parent"],
-        "description": "just a word"
-    },
-    "mixins": {
-        "prefix": "mixins",
-        "body": ["mixins"],
-        "description": "just a word"
-    },
-    "extends": {
-        "prefix": "extends",
-        "body": ["extends"],
-        "description": "just a word"
-    },
-    "provide": {
-        "prefix": "provide",
-        "body": ["provide"],
-        "description": "just a word"
-    },
-    "inject": {
-        "prefix": "inject",
-        "body": ["inject"],
-        "description": "just a word"
-    },
-    "name": {
-        "prefix": "name",
-        "body": ["name"],
-        "description": "just a word"
-    },
-    "delimiters": {
-        "prefix": "delimiters",
-        "body": ["delimiters"],
-        "description": "just a word"
-    },
-    "functional": {
-        "prefix": "functional",
-        "body": ["functional"],
-        "description": "just a word"
-    },
-    "model": {
-        "prefix": "model",
-        "body": ["model"],
-        "description": "just a word"
-    },
-    "value": {
-        "prefix": "value",
-        "body": ["value"],
-        "description": "'this' change to 'value' using ref vuejs"
-    },
-    "inheritAttrs": {
-        "prefix": "inheritAttrs",
-        "body": ["inheritAttrs"],
-        "description": "just a word"
-    },
-    "comments": {
-        "prefix": "comments",
-        "body": ["comments"],
-        "description": "just a word"
-    },
-    "deep": {
-        "prefix": "deep",
-        "body": ["deep"],
-        "description": "just a word"
-    },
-    "immediate": {
-        "prefix": "immediate",
-        "body": ["immediate"],
-        "description": "just a word"
-    },
-    "vm.$data": {
-        "prefix": "vmData",
-        "body": ["${1|this,vm|}.\\$data$2"],
-        "description": "Type: Object. Read only."
-    },
-    "vm.$props": {
-        "prefix": "vmProps",
-        "body": ["${1|this,vm|}.\\$props$2"],
-        "description": "Type: Object. Read only."
-    },
-    "vm.$el": {
-        "prefix": "vmEl",
-        "body": ["${1|this,vm|}.\\$el$2"],
-        "description": "Type: HTMLElement. Read only."
-    },
-    "vm.$options": {
-        "prefix": "vmOptions",
-        "body": ["${1|this,vm|}.\\$options$2"],
-        "description": "Type: Object. Read only."
-    },
-    "vm.$parent": {
-        "prefix": "vmParent",
-        "body": ["${1|this,vm|}.\\$parent$2"],
-        "description": "Type: Vue instance. Read only."
-    },
-    "vm.$root": {
-        "prefix": "vmRoot",
-        "body": ["${1|this,vm|}.\\$root$2"],
-        "description": "Type: Vue instance. Read only."
-    },
-    "vm.$children": {
-        "prefix": "vmChildren",
-        "body": ["${1|this,vm|}.\\$children$2"],
-        "description": "Type: Array<Vue instance>. Read only."
-    },
-    "vm.$slots": {
-        "prefix": "vmSlots",
-        "body": ["${1|this,vm|}.\\$slots$2"],
-        "description": "Type: Object. Read only."
-    },
-    "vm.$scopedSlots": {
-        "prefix": "vmScopedSlots",
-        "body": ["${1|this,vm|}.\\$scopedSlots.default({", "\t$2", "})"],
-        "description": "Type: { [name: string]: props => VNode | Array<VNode> }. Read only."
-    },
-    "vm.$refs": {
-        "prefix": "vmRefs",
-        "body": ["${1|this,vm|}.\\$refs$2"],
-        "description": "Type: Object. Read only."
-    },
-    "vm.$isServer": {
-        "prefix": "vmIsServer",
-        "body": ["${1|this,vm|}.\\$isServer$2"],
-        "description": "Type: boolean. Read only."
-    },
-    "vm.$attrs": {
-        "prefix": "vmAttrs",
-        "body": ["${1|this,vm|}.\\$attrs$2"],
-        "description": "Type: { [key: string]: string }. Read only."
-    },
-    "vm.$listeners": {
-        "prefix": "vmListeners",
-        "body": ["${1|this,vm|}.\\$listeners$2"],
-        "description": "Type: { [key: string]: Function | Array<Function> }. Read only."
-    },
-    "vm.$watch": {
-        "prefix": "vmWatch",
-        "body": [
-            "${1|this,vm|}.\\$watch(${2:expOrFn}, ${3:callback}${4:, [options]})"
-        ],
-        "description": "vm.$watch( expOrFn, callback, [options] )\n Arguments:\n {string | Function} expOrFn\n {Function | Object} callback\n {Object} [options]\n {boolean} [options.deep]\n\t {boolean} [options.immediate]"
-    },
-    "vm.$set": {
-        "prefix": "vmSet",
-        "body": ["${1|this,vm|}.\\$set(${2:target}, ${3:key}, ${4:value})"],
-        "description": "vm.$set( target, key, value ). This is the alias of the global Vue.set."
-    },
-    "vm.$delete": {
-        "prefix": "vmDelete",
-        "body": [
-            "${1|this,vm|}.\\$delete(${2:target}, ${3:key}). This is the alias of the global Vue.delete."
-        ],
-        "description": "vm.$delete( target, key )"
-    },
-    "vm.$on": {
-        "prefix": "vmOn",
-        "body": ["${1|this,vm|}.\\$on('${2:event}', ${3:callback})$4"],
-        "description": "vm.$on( event, callback )"
-    },
-    "vm.$once": {
-        "prefix": "vmOnce",
-        "body": ["${1|this,vm|}.\\$once('${2:event}', ${3:callback})$4"],
-        "description": "vm.$once( event, callback )"
-    },
-    "vm.$off": {
-        "prefix": "vmOff",
-        "body": ["${1|this,vm|}.\\$off('${2:event}', ${3:callback})$4"],
-        "description": "vm.$off( [event, callback] )"
-    },
-    "vm.$emit": {
-        "prefix": "vmEmit",
-        "body": ["${1|this,vm|}.\\$emit('${2:event}'${3:, […args]})$4"],
-        "description": "vm.$emit( event, […args] )"
-    },
-    "vm.$mount": {
-        "prefix": "vmMount",
-        "body": ["${1|this,vm|}.\\$mount('$2')"],
-        "description": "vm.$mount( [elementOrSelector] )"
-    },
-    "vm.$forceUpdate": {
-        "prefix": "vmForceUpdate",
-        "body": ["${1|this,vm|}.\\$forceUpdate()"],
-        "description": "vm.$forceUpdate()"
-    },
-    "vm.$nextTick": {
-        "prefix": "vmNextTick",
-        "body": ["${1|this,vm|}.\\$nextTick(${2:callback})"],
-        "description": "vm.$nextTick( callback )"
-    },
-    "vm.$destroy": {
-        "prefix": "vmDestroy",
-        "body": ["${1|this,vm|}.\\$destroy()$2"],
-        "description": "vm.$destroy()"
-    },
-    "renderer": {
-        "prefix": "renderer",
-        "body": [
-            "const ${1:renderer} = require('vue-server-renderer').createRenderer()$0"
-        ],
-        "description": "require('vue-server-renderer').createRenderer()"
-    },
-    "createRenderer": {
-        "prefix": "createRenderer",
-        "body": ["createRenderer({", "\t$1", "})"],
-        "description": "createRenderer({ })"
-    },
-    "renderToString": {
-        "prefix": "renderToString",
-        "body": ["renderToString"],
-        "description": "just a word"
-    },
-    "renderToStream": {
-        "prefix": "renderToStream",
-        "body": ["renderToStream"],
-        "description": "just a word"
-    },
-    "createBundleRenderer": {
-        "prefix": "createBundleRenderer",
-        "body": ["createBundleRenderer"],
-        "description": "just a word"
-    },
-    "bundleRenderer.renderToString": {
-        "prefix": "bundleRendererRenderToString",
-        "body": ["bundleRenderer.renderToString"],
-        "description": "just a word"
-    },
-    "bundleRenderer.renderToStream": {
-        "prefix": "bundleRendererRenderToStream",
-        "body": ["bundleRenderer.renderToStream"],
-        "description": "just a word"
-    },
-    "preventDefault": {
-        "prefix": "preventDefault",
-        "body": ["preventDefault();", "$1"],
-        "description": "preventDefault()"
-    },
-    "stopPropagation": {
-        "prefix": "stopPropagation",
-        "body": ["stopPropagation();", "$1"],
-        "description": "stopPropagation()"
-    },
-    "importVueRouter": {
-        "prefix": "importVueRouter",
-        "body": ["import VueRouter from 'vue-router'"],
-        "description": "import VueRouter from 'vue-router'"
-    },
-    "importuseRouter-composition": {
-        "prefix": "importuseRouter",
-        "body": ["import useRouter from 'vue-router'"],
-        "description": "import useRouter from 'vue-router'"
-    },
-    "newVueRouter": {
-        "prefix": "newVueRouter",
-        "body": ["const ${1:router} = new VueRouter({", "\t$2", "})$0"],
-        "description": "const router = newVueRouter({ })"
-    },
-    "useRouter-composition": {
-        "prefix": "useRouter",
-        "body": ["const ${1:router} = useRouter()"],
-        "description": "const router = useRouter()"
-    },
-    "useRoute-composition": {
-        "prefix": "useRoute",
-        "body": ["const ${1:route} = useRoute()"],
-        "description": "const route = useRoute()"
-    },
-    "routerBeforeEach": {
-        "prefix": "routerBeforeEach",
-        "body": [
-            "${1:router}.beforeEach((to, from, next) => {",
-            "\t${2:// to and from are both route objects. must call `next`.}",
-            "})$0"
-        ],
-        "description": "router.beforeEach"
-    },
-    "routerBeforeResolve": {
-        "prefix": "routerBeforeResolve",
-        "body": [
-            "${1:router}.beforeResolve((to, from, next) => {",
-            "\t${2:// to and from are both route objects. must call `next`.}",
-            "})$0"
-        ],
-        "description": "router.beforeResolve"
-    },
-    "routerAfterEach": {
-        "prefix": "routerAfterEach",
-        "body": [
-            "${1:router}.afterEach((to, from) => {",
-            "\t${2:// to and from are both route objects.}",
-            "})$0"
-        ],
-        "description": "router.afterEach"
-    },
-    "routerPush": {
-        "prefix": "routerPush",
-        "body": ["${1:router}.push($2)$0"],
-        "description": "router.push()"
-    },
-    "routerReplace": {
-        "prefix": "routerReplace",
-        "body": ["${1:router}.replace($2)$0"],
-        "description": "router.replace()"
-    },
-    "routerGo": {
-        "prefix": "routerGo",
-        "body": ["${1:router}.go($2)$0"],
-        "description": "router.go()"
-    },
-    "routerBack": {
-        "prefix": "routerBack",
-        "body": ["${1:router}.back($2)$0"],
-        "description": "router.back()"
-    },
-    "routerForward": {
-        "prefix": "routerForward",
-        "body": ["${1:router}.forward($2)$0"],
-        "description": "router.forward()"
-    },
-    "routerGetMatchedComponents": {
-        "prefix": "routerGetMatchedComponents",
-        "body": ["${1:router}.getMatchedComponents($2)$0"],
-        "description": "router.getMatchedComponents()"
-    },
-    "routerResolve": {
-        "prefix": "routerResolve",
-        "body": ["${1:router}.resolve($2)$0"],
-        "description": "router.resolve()"
-    },
-    "routerAddRoutes": {
-        "prefix": "routerAddRoutes",
-        "body": ["${1:router}.addRoutes($2)$0"],
-        "description": "router.addRoutes()"
-    },
-    "routerOnReady": {
-        "prefix": "routerOnReady",
-        "body": ["${1:router}.onReady($2)$0"],
-        "description": "router.onReady()"
-    },
-    "routerOnError": {
-        "prefix": "routerOnError",
-        "body": ["${1:router}.onError($2)$0"],
-        "description": "router.onError()"
-    },
-    "routes": {
-        "prefix": "routes",
-        "body": ["routes: [$1]$0"],
-        "description": "routes: []"
-    },
-    "beforeEnter": {
-        "prefix": "beforeEnter",
-        "body": ["beforeEnter: (to, from, next) => {", "\t${1:// ...}", "}"],
-        "description": "beforeEnter: (to, from, next) => { }"
-    },
-    "beforeRouteEnter": {
-        "prefix": "beforeRouteEnter",
-        "body": ["beforeRouteEnter (to, from, next) {", "\t${1:// ...}", "}"],
-        "description": "beforeRouteEnter (to, from, next) { }"
-    },
-    "beforeRouteLeave": {
-        "prefix": "beforeRouteLeave",
-        "body": ["beforeRouteLeave (to, from, next) {", "\t${1:// ...}", "}"],
-        "description": "beforeRouteLeave (to, from, next) { }"
-    },
-    "scrollBehavior": {
-        "prefix": "scrollBehavior",
-        "body": [
-            "scrollBehavior (to, from, savedPosition) {",
-            "\t${1:// ...}",
-            "}"
-        ],
-        "description": "scrollBehavior (to, from, savedPosition) { }"
-    },
-    "path": {
-        "prefix": "path",
-        "body": ["path"],
-        "description": "just a word"
-    },
-    "alias": {
-        "prefix": "alias",
-        "body": ["alias"],
-        "description": "just a word"
-    },
-    "mode": {
-        "prefix": "mode",
-        "body": ["mode"],
-        "description": "just a word"
-    },
-    "children": {
-        "prefix": "children",
-        "body": ["children"],
-        "description": "just a word"
-    },
-    "meta": {
-        "prefix": "meta",
-        "body": ["meta"],
-        "description": "just a word"
-    },
-    "newVuexStore": {
-        "prefix": "newVuexStore",
-        "body": ["const ${1:store} = new Vuex.Store({", "\t${2:// ...}", "})"],
-        "description": "const store = new Vuex.Store({ })"
-    },
-    "state": {
-        "prefix": "state",
-        "body": ["state"],
-        "description": "just a word"
-    },
-    "getters": {
-        "prefix": "getters",
-        "body": ["getters"],
-        "description": "just a word"
-    },
-    "mutations": {
-        "prefix": "mutations",
-        "body": ["mutations"],
-        "description": "just a word"
-    },
-    "actions": {
-        "prefix": "actions",
-        "body": ["actions"],
-        "description": "just a word"
-    },
-    "modules": {
-        "prefix": "modules",
-        "body": ["modules"],
-        "description": "just a word"
-    },
-    "plugins": {
-        "prefix": "plugins",
-        "body": ["plugins"],
-        "description": "just a word"
-    },
-    "commit": {
-        "prefix": "commit",
-        "body": ["commit"],
-        "description": "just a word"
-    },
-    "dispatch": {
-        "prefix": "dispatch",
-        "body": ["dispatch"],
-        "description": "just a word"
-    },
-    "replaceState": {
-        "prefix": "replaceState",
-        "body": ["replaceState"],
-        "description": "just a word"
-    },
-    "subscribe": {
-        "prefix": "subscribe",
-        "body": ["subscribe"],
-        "description": "just a word"
-    },
-    "registerModule": {
-        "prefix": "registerModule",
-        "body": ["registerModule"],
-        "description": "just a word"
-    },
-    "unregisterModule": {
-        "prefix": "unregisterModule",
-        "body": ["unregisterModule"],
-        "description": "just a word"
-    },
-    "hotUpdate": {
-        "prefix": "hotUpdate",
-        "body": ["hotUpdate"],
-        "description": "just a word"
-    },
-    "mapState": {
-        "prefix": "mapState",
-        "body": ["mapState"],
-        "description": "just a word"
-    },
-    "mapGetters": {
-        "prefix": "mapGetters",
-        "body": ["mapGetters"],
-        "description": "just a word"
-    },
-    "mapActions": {
-        "prefix": "mapActions",
-        "body": ["mapActions"],
-        "description": "just a word"
-    },
-    "mapMutations": {
-        "prefix": "mapMutations",
-        "body": ["mapMutations"],
-        "description": "just a word"
-    },
-    "asyncData": {
-        "prefix": "asyncData",
-        "body": [
-            "asyncData({${1:isDev}${2:, route}${3:, store}${4:, env}${5:, params}${6:, query}${7:, req}${8:, res}${9:, redirect}${10:, error}}) {",
-            "\t$11",
-            "},"
-        ],
-        "description": "Type: Function."
-    },
-    "click": {
-        "prefix": "click",
-        "body": ["click"],
-        "description": "just a word"
-    },
-    "submit": {
-        "prefix": "submit",
-        "body": ["submit"],
-        "description": "just a word"
-    },
-    "mouse": {
-        "prefix": "mouse",
-        "body": ["mouse"],
-        "description": "just a word"
-    },
-    "scroll": {
-        "prefix": "scroll",
-        "body": ["scroll"],
-        "description": "just a word"
-    },
-    "keyup": {
-        "prefix": "keyup",
-        "body": ["keyup"],
-        "description": "just a word"
-    },
-    "enter": {
-        "prefix": "enter",
-        "body": ["enter"],
-        "description": "just a word"
-    },
-    "page-down": {
-        "prefix": "page-down",
-        "body": ["page-down"],
-        "description": "just a word"
-    },
-    "stop": {
-        "prefix": "stop",
-        "body": ["stop"],
-        "description": "just a word"
-    },
-    "prevent": {
-        "prefix": "prevent",
-        "body": ["prevent"],
-        "description": "just a word"
-    },
-    "self": {
-        "prefix": "self",
-        "body": ["self"],
-        "description": "just a word"
-    },
-    "capture": {
-        "prefix": "capture",
-        "body": ["capture"],
-        "description": "just a word"
-    },
-    "once": {
-        "prefix": "once",
-        "body": ["once"],
-        "description": "just a word"
-    },
-    "passive": {
-        "prefix": "passive",
-        "body": ["passive"],
-        "description": "just a word"
-    },
-    "onRenderTriggered-composition": {
-        "prefix": "onRenderTriggered",
-        "body": ["onRenderTriggered(() => {$0})"],
-        "description": "Vue onRenderTriggered lifecycle hook"
-    },
-    "onErrorCaptured-composition": {
-        "prefix": "onErrorCaptured",
-        "body": ["onErrorCaptured(() => {$0})"],
-        "description": "Vue oneErrorCaptured lifecycle hook"
-    },
-    "onRenderTracked-composition": {
-        "prefix": "onRenderTracked",
-        "body": ["onRenderTracked(() => {$0})"],
-        "description": "Vue onRenderTracked lifecycle hook"
-    },
-    "onServerPrefetch-compositionSSR": {
-        "prefix": "onServerPrefetch",
-        "body": ["onServerPrefetch(() => {$0})"],
-        "description": "Vue onServerPrefetch lifecycle hook SSR Only"
-    }
+  "import": {
+    "prefix": "import",
+    "body": [
+      "import $1 from '$2'"
+    ],
+    "description": "import ... from ..."
+  },
+  "import-type": {
+    "prefix": "importType",
+    "body": [
+      "import type {$1} from '$2'"
+    ],
+    "description": "import type ... from ..."
+  },
+  "nextTick": {
+    "prefix": "nextTick",
+    "body": [
+      "nextTick()"
+    ],
+    "description": "A utility for waiting for the next DOM update flush."
+  },
+  "defineAsyncComponent": {
+    "prefix": "defineAsyncComponent",
+    "body": [
+      "const $1 = defineAsyncComponent(() =>",
+      "import('$0')",
+      ");"
+    ],
+    "description": "create a async vue component"
+  },
+  "defineComponent": {
+    "prefix": "defineComponent",
+    "body": [
+      "const $1 = defineComponent({",
+      "$0",
+      "})"
+    ],
+    "description": "create a component vue component"
+  },
+  "defineCustomElement": {
+    "prefix": "defineCustomElement",
+    "body": [
+      "const $1 = defineCustomElement({",
+      "$0",
+      "})"
+    ],
+    "description": "create a custom element vue"
+  },
+  "data-options": {
+    "prefix": "data",
+    "body": [
+      "data() {",
+      "\treturn {",
+      "\t\t$1",
+      "\t}",
+      "},$0"
+    ],
+    "description": "The data object for the Vue instance."
+  },
+  "props-composition": {
+    "prefix": "defineProps",
+    "body": [
+      "const props = defineProps({",
+      "$0",
+      "});"
+    ],
+    "description": "A list/hash of attributes that are exposed to accept data from the parent component. "
+  },
+  "emits-composition": {
+    "prefix": "emitsVue",
+    "body": [
+      "const emits = defineEmits([ $0 ]);"
+    ],
+    "description": "A list of events that componetnt can emits to the parent component. "
+  },
+  "computed-options": {
+    "prefix": "computed",
+    "body": [
+      "computed: {",
+      "\t$1",
+      "},$0"
+    ],
+    "description": "Computed properties to be mixed into the Vue instance. "
+  },
+  "computed-composition": {
+    "prefix": "computedVue",
+    "body": [
+      "const $1 = computed(() => {",
+      "$0",
+      "});"
+    ],
+    "description": "Computed properties to be mixed into the Vue instance. "
+  },
+  "reactive-composition": {
+    "prefix": "reactiveVue",
+    "body": [
+      "const $1 = reactive($0)"
+    ],
+    "description": "Reative properties to be mixed into the Vue instance. "
+  },
+  "shallow-reactive-composition": {
+    "prefix": "sreactVue",
+    "body": [
+      "const $1 = shallowReactive({$0})"
+    ],
+    "description": "Shallow reative properties to be mixed into the Vue instance. "
+  },
+  "ref-composition": {
+    "prefix": "refVue",
+    "body": [
+      "const $1 = ref($2)",
+      "$0"
+    ],
+    "description": "Ref properties to be mixed into the Vue instance. "
+  },
+  "template-ref-ts-composition": {
+    "prefix": "trfVue",
+    "body": [
+      "const $0 = ref<HTMLInputElement | null>(null)"
+    ],
+    "description": "Template ref to be mixed into the Vue instance. "
+  },
+  "component-ref-ts-composition": {
+    "prefix": "crfVue",
+    "body": [
+      "const $1 = ref<InstanceType<typeof $0> | null>(null)"
+    ],
+    "description": "Template ref to be mixed into the Vue instance. "
+  },
+  "methods-options": {
+    "prefix": "methods",
+    "body": [
+      "methods: {",
+      "\t$1",
+      "},$0"
+    ],
+    "description": "Methods to be mixed into the Vue instance."
+  },
+  "method-composition": {
+    "prefix": "functionVue3",
+    "body": [
+      "const $1 = ($2) => {",
+      "$0",
+      "};"
+    ],
+    "description": "Method composition properties to be mixed into the Vue instance. "
+  },
+  "watch-options": {
+    "prefix": "watch",
+    "body": [
+      "watch: {",
+      "\t$1",
+      "},$0"
+    ],
+    "description": "An object where keys are expressions to watch and values are the corresponding callbacks. The value can also be a string of a method name, or an Object that contains additional options. Note that you should not use an arrow function to define a watcher."
+  },
+  "watch-composition": {
+    "prefix": "cwatch",
+    "body": [
+      "watch($1, ($2, $3) => {",
+      "$0",
+      "});"
+    ],
+    "description": "Watch over a reactive source and call a function in reaction to state changes "
+  },
+  "watchWithOptions": {
+    "prefix": "watchWithOptions",
+    "body": [
+      "${1:key}: {",
+      "\tdeep: ${2:true},",
+      "\timmediate: ${3:true},",
+      "\thandler: function (${4:val}, ${5:oldVal}) {",
+      "\t\t$6",
+      "\t}",
+      "},$0"
+    ],
+    "description": "Vue Watcher with options."
+  },
+  "watchEffect-composition": {
+    "prefix": "watchEffect",
+    "body": [
+      "watchEffect($1, ($2, $3) => {",
+      "$0",
+      "});"
+    ],
+    "description": "watchEffect from vue composition "
+  },
+  "onBeforeMount-composition": {
+    "prefix": "onBeforeMount",
+    "body": [
+      "onBeforeMount(() => {$0})"
+    ],
+    "description": "Vue before mount composition lifecycle hook"
+  },
+  "onMounted-composition": {
+    "prefix": "onmounted",
+    "body": [
+      "onMounted(() => {$0})"
+    ],
+    "description": "Vue mounted lifecycle hook"
+  },
+  "onBeforeUnmount-composition": {
+    "prefix": "onBeforeUnmount",
+    "body": [
+      "onBeforeUnmount(() => {$0})"
+    ],
+    "description": "Vue before unmount composition lifecycle hook"
+  },
+  "onUnmounted-composition": {
+    "prefix": "onunmounted",
+    "body": [
+      "onUnmounted(() => {$0})"
+    ],
+    "description": "Vue unMounted lifecycle hook"
+  },
+  "beforeUpdate": {
+    "prefix": "beforeUpdate",
+    "body": [
+      "beforeUpdate() {",
+      "\t$1",
+      "},"
+    ],
+    "description": "Type: Function."
+  },
+  "updated": {
+    "prefix": "updated",
+    "body": [
+      "updated() {",
+      "\t$1",
+      "},"
+    ],
+    "description": "Type: Function."
+  },
+  "onBeforeUpdate-composition": {
+    "prefix": "onBeforeUpdate",
+    "body": [
+      "onBeforeUpdate(() => {$0})"
+    ],
+    "description": "Vue before update composition lifecycle hook"
+  },
+  "onUpdated-composition": {
+    "prefix": "onupdated",
+    "body": [
+      "onUpdated(() => {$0})"
+    ],
+    "description": "Vue updated lifecycle hook"
+  },
+  "activated": {
+    "prefix": "activated",
+    "body": [
+      "activated() {",
+      "\t$1",
+      "},"
+    ],
+    "description": "Type: Function."
+  },
+  "deactivated": {
+    "prefix": "deactivated",
+    "body": [
+      "deactivated() {",
+      "\t$1",
+      "},"
+    ],
+    "description": "Type: Function."
+  },
+  "onActivated-composition": {
+    "prefix": "onActivated",
+    "body": [
+      "onActivated(() => {$0})"
+    ],
+    "description": "Vue activated composition lifecycle hook"
+  },
+  "onDeactivated-composition": {
+    "prefix": "onDeactivated",
+    "body": [
+      "onDeactivated(() => {$0})"
+    ],
+    "description": "Vue deactivated composition lifecycle hook"
+  },
+  "beforeDestroy": {
+    "prefix": "beforeDestroy",
+    "body": [
+      "beforeDestroy() {",
+      "\t$1",
+      "},"
+    ],
+    "description": "Type: Function."
+  },
+  "destroyed": {
+    "prefix": "destroyed",
+    "body": [
+      "destroyed() {",
+      "\t$1",
+      "},"
+    ],
+    "description": "Type: Function."
+  },
+  "errorCaptured": {
+    "prefix": "errorCaptured",
+    "body": [
+      "errorCaptured: (err, vm, info) => {",
+      "\t$1",
+      "},"
+    ],
+    "description": "Type: (err: Error, vm: Component, info: string) => ?boolean"
+  },
+  "createRenderer": {
+    "prefix": "createRenderer",
+    "body": [
+      "createRenderer({",
+      "\t$1",
+      "})"
+    ],
+    "description": "createRenderer({ })"
+  },
+  "importVueRouter": {
+    "prefix": "importVueRouter",
+    "body": [
+      "import VueRouter from 'vue-router'"
+    ],
+    "description": "import VueRouter from 'vue-router'"
+  },
+  "importuseRouter-composition": {
+    "prefix": "importuseRouter",
+    "body": [
+      "import useRouter from 'vue-router'"
+    ],
+    "description": "import useRouter from 'vue-router'"
+  },
+  "newVueRouter": {
+    "prefix": "newVueRouter",
+    "body": [
+      "const ${1:router} = new VueRouter({",
+      "\t$2",
+      "})$0"
+    ],
+    "description": "const router = newVueRouter({ })"
+  },
+  "useRouter-composition": {
+    "prefix": "useRouter",
+    "body": [
+      "const ${1:router} = useRouter()"
+    ],
+    "description": "const router = useRouter()"
+  },
+  "useRoute-composition": {
+    "prefix": "useRoute",
+    "body": [
+      "const ${1:route} = useRoute()"
+    ],
+    "description": "const route = useRoute()"
+  },
+  "routerBeforeEach": {
+    "prefix": "routerBeforeEach",
+    "body": [
+      "${1:router}.beforeEach((to, from, next) => {",
+      "\t${2:// to and from are both route objects. must call `next`.}",
+      "})$0"
+    ],
+    "description": "router.beforeEach"
+  },
+  "routerBeforeResolve": {
+    "prefix": "routerBeforeResolve",
+    "body": [
+      "${1:router}.beforeResolve((to, from, next) => {",
+      "\t${2:// to and from are both route objects. must call `next`.}",
+      "})$0"
+    ],
+    "description": "router.beforeResolve"
+  },
+  "routerAfterEach": {
+    "prefix": "routerAfterEach",
+    "body": [
+      "${1:router}.afterEach((to, from) => {",
+      "\t${2:// to and from are both route objects.}",
+      "})$0"
+    ],
+    "description": "router.afterEach"
+  },
+  "routerPush": {
+    "prefix": "routerPush",
+    "body": [
+      "${1:router}.push($2)$0"
+    ],
+    "description": "router.push()"
+  },
+  "routerReplace": {
+    "prefix": "routerReplace",
+    "body": [
+      "${1:router}.replace($2)$0"
+    ],
+    "description": "router.replace()"
+  },
+  "routerGo": {
+    "prefix": "routerGo",
+    "body": [
+      "${1:router}.go($2)$0"
+    ],
+    "description": "router.go()"
+  },
+  "routerBack": {
+    "prefix": "routerBack",
+    "body": [
+      "${1:router}.back($2)$0"
+    ],
+    "description": "router.back()"
+  },
+  "routerForward": {
+    "prefix": "routerForward",
+    "body": [
+      "${1:router}.forward($2)$0"
+    ],
+    "description": "router.forward()"
+  },
+  "routerGetMatchedComponents": {
+    "prefix": "routerGetMatchedComponents",
+    "body": [
+      "${1:router}.getMatchedComponents($2)$0"
+    ],
+    "description": "router.getMatchedComponents()"
+  },
+  "routerResolve": {
+    "prefix": "routerResolve",
+    "body": [
+      "${1:router}.resolve($2)$0"
+    ],
+    "description": "router.resolve()"
+  },
+  "routerAddRoutes": {
+    "prefix": "routerAddRoutes",
+    "body": [
+      "${1:router}.addRoutes($2)$0"
+    ],
+    "description": "router.addRoutes()"
+  },
+  "routerOnReady": {
+    "prefix": "routerOnReady",
+    "body": [
+      "${1:router}.onReady($2)$0"
+    ],
+    "description": "router.onReady()"
+  },
+  "routerOnError": {
+    "prefix": "routerOnError",
+    "body": [
+      "${1:router}.onError($2)$0"
+    ],
+    "description": "router.onError()"
+  },
+  "routes": {
+    "prefix": "routes",
+    "body": [
+      "routes: [$1]$0"
+    ],
+    "description": "routes: []"
+  },
+  "beforeEnter": {
+    "prefix": "beforeEnter",
+    "body": [
+      "beforeEnter: (to, from, next) => {",
+      "\t${1:// ...}",
+      "}"
+    ],
+    "description": "beforeEnter: (to, from, next) => { }"
+  },
+  "beforeRouteEnter": {
+    "prefix": "beforeRouteEnter",
+    "body": [
+      "beforeRouteEnter (to, from, next) {",
+      "\t${1:// ...}",
+      "}"
+    ],
+    "description": "beforeRouteEnter (to, from, next) { }"
+  },
+  "beforeRouteLeave": {
+    "prefix": "beforeRouteLeave",
+    "body": [
+      "beforeRouteLeave (to, from, next) {",
+      "\t${1:// ...}",
+      "}"
+    ],
+    "description": "beforeRouteLeave (to, from, next) { }"
+  },
+  "scrollBehavior": {
+    "prefix": "scrollBehavior",
+    "body": [
+      "scrollBehavior (to, from, savedPosition) {",
+      "\t${1:// ...}",
+      "}"
+    ],
+    "description": "scrollBehavior (to, from, savedPosition) { }"
+  },
+  "path": {
+    "prefix": "path",
+    "body": [
+      "path"
+    ],
+    "description": "just a word"
+  },
+  "alias": {
+    "prefix": "alias",
+    "body": [
+      "alias"
+    ],
+    "description": "just a word"
+  },
+  "mode": {
+    "prefix": "mode",
+    "body": [
+      "mode"
+    ],
+    "description": "just a word"
+  },
+  "children": {
+    "prefix": "children",
+    "body": [
+      "children"
+    ],
+    "description": "just a word"
+  },
+  "meta": {
+    "prefix": "meta",
+    "body": [
+      "meta"
+    ],
+    "description": "just a word"
+  },
+  "asyncData": {
+    "prefix": "asyncData",
+    "body": [
+      "asyncData({${1:isDev}${2:, route}${3:, store}${4:, env}${5:, params}${6:, query}${7:, req}${8:, res}${9:, redirect}${10:, error}}) {",
+      "\t$11",
+      "},"
+    ],
+    "description": "Type: Function."
+  },
+  "click": {
+    "prefix": "click",
+    "body": [
+      "click"
+    ],
+    "description": "just a word"
+  },
+  "submit": {
+    "prefix": "submit",
+    "body": [
+      "submit"
+    ],
+    "description": "just a word"
+  },
+  "mouse": {
+    "prefix": "mouse",
+    "body": [
+      "mouse"
+    ],
+    "description": "just a word"
+  },
+  "scroll": {
+    "prefix": "scroll",
+    "body": [
+      "scroll"
+    ],
+    "description": "just a word"
+  },
+  "keyup": {
+    "prefix": "keyup",
+    "body": [
+      "keyup"
+    ],
+    "description": "just a word"
+  },
+  "enter": {
+    "prefix": "enter",
+    "body": [
+      "enter"
+    ],
+    "description": "just a word"
+  },
+  "page-down": {
+    "prefix": "page-down",
+    "body": [
+      "page-down"
+    ],
+    "description": "just a word"
+  },
+  "stop": {
+    "prefix": "stop",
+    "body": [
+      "stop"
+    ],
+    "description": "just a word"
+  },
+  "prevent": {
+    "prefix": "prevent",
+    "body": [
+      "prevent"
+    ],
+    "description": "just a word"
+  },
+  "self": {
+    "prefix": "self",
+    "body": [
+      "self"
+    ],
+    "description": "just a word"
+  },
+  "capture": {
+    "prefix": "capture",
+    "body": [
+      "capture"
+    ],
+    "description": "just a word"
+  },
+  "once": {
+    "prefix": "once",
+    "body": [
+      "once"
+    ],
+    "description": "just a word"
+  },
+  "passive": {
+    "prefix": "passive",
+    "body": [
+      "passive"
+    ],
+    "description": "just a word"
+  },
+  "onRenderTriggered-composition": {
+    "prefix": "onRenderTriggered",
+    "body": [
+      "onRenderTriggered(() => {$0})"
+    ],
+    "description": "Vue onRenderTriggered lifecycle hook"
+  },
+  "onErrorCaptured-composition": {
+    "prefix": "onErrorCaptured",
+    "body": [
+      "onErrorCaptured(() => {$0})"
+    ],
+    "description": "Vue oneErrorCaptured lifecycle hook"
+  },
+  "onRenderTracked-composition": {
+    "prefix": "onRenderTracked",
+    "body": [
+      "onRenderTracked(() => {$0})"
+    ],
+    "description": "Vue onRenderTracked lifecycle hook"
+  },
+  "onServerPrefetch-compositionSSR": {
+    "prefix": "onServerPrefetch",
+    "body": [
+      "onServerPrefetch(() => {$0})"
+    ],
+    "description": "Vue onServerPrefetch lifecycle hook SSR Only"
+  }
 }
diff --git a/snippets/frameworks/vue/nuxt_html.json b/snippets/frameworks/vue/nuxt_html.json
index ec4622ea..f4ffdd72 100644
--- a/snippets/frameworks/vue/nuxt_html.json
+++ b/snippets/frameworks/vue/nuxt_html.json
@@ -1,37 +1,54 @@
 {
-    "NuxtWelcome": {
-        "prefix": "NuxtWelcome",
-        "body": ["<NuxtWelcome />"],
-        "description": "The <NuxtWelcome> component greets users in new projects made from the starter template. It includes links to the Nuxt documentation, source code, and social media accounts."
-    },
-    "NuxtPage": {
-        "prefix": "NuxtPage",
-        "body": ["<NuxtPage />"],
-        "description": "<NuxtPage> is a built-in component that comes with Nuxt. NuxtPage is required to display top-level or nested pages located in the pages/ directory."
-    },
-    "NuxtLink": {
-        "prefix": "NuxtLink",
-        "body": ["<NuxtLink to=\"$1\">$0</NuxtLink>"],
-        "description": "Nuxt provides <NuxtLink> component to handle any kind of links within your application."
-    },
-    "NuxtLayout": {
-        "prefix": "NuxtLayout",
-        "body": ["<NuxtLayout>", "</NuxtLayout>"],
-        "description": "<NuxtLayout /> can be used to override default layout on app.vue, error.vue or even page components found in the /pages directory."
-    },
-    "NuxtErrorBoundary": {
-        "prefix": "NuxtErrorBoundary",
-        "body": ["<NuxtErrorBoundary>", "</NuxtErrorBoundary>"],
-        "description": "The <NuxtErrorBoundary> component handles client-side errors happening in its default slot, using Vue's onErrorCaptured hook."
-    },
-    "NuxtLoadingIndicator": {
-        "prefix": "NuxtLoadingIndicator",
-        "body": ["<NuxtLoadingIndicator />"],
-        "description": "The <NuxtLoadingIndicator> component displays a progress bar on page navigation."
-    },
-    "ClientOnly": {
-        "prefix": "ClientOnly",
-        "body": ["<ClientOnly>", "</ClientOnly>"],
-        "description": "The <ClientOnly> component renders its slot only in client-side. To import a component only on the client, register the component in a client-side only plugin."
-    }
+  "NuxtWelcome": {
+    "prefix": "NuxtWelcome",
+    "body": [
+      "<NuxtWelcome />"
+    ],
+    "description": "The <NuxtWelcome> component greets users in new projects made from the starter template. It includes links to the Nuxt documentation, source code, and social media accounts."
+  },
+  "NuxtPage": {
+    "prefix": "NuxtPage",
+    "body": [
+      "<NuxtPage />"
+    ],
+    "description": "<NuxtPage> is a built-in component that comes with Nuxt. NuxtPage is required to display top-level or nested pages located in the pages/ directory."
+  },
+  "NuxtLink": {
+    "prefix": "NuxtLink",
+    "body": [
+      "<NuxtLink to=\"$1\">$0</NuxtLink>"
+    ],
+    "description": "Nuxt provides <NuxtLink> component to handle any kind of links within your application."
+  },
+  "NuxtLayout": {
+    "prefix": "NuxtLayout",
+    "body": [
+      "<NuxtLayout>",
+      "</NuxtLayout>"
+    ],
+    "description": "<NuxtLayout /> can be used to override default layout on app.vue, error.vue or even page components found in the /pages directory."
+  },
+  "NuxtErrorBoundary": {
+    "prefix": "NuxtErrorBoundary",
+    "body": [
+      "<NuxtErrorBoundary>",
+      "</NuxtErrorBoundary>"
+    ],
+    "description": "The <NuxtErrorBoundary> component handles client-side errors happening in its default slot, using Vue's onErrorCaptured hook."
+  },
+  "NuxtLoadingIndicator": {
+    "prefix": "NuxtLoadingIndicator",
+    "body": [
+      "<NuxtLoadingIndicator />"
+    ],
+    "description": "The <NuxtLoadingIndicator> component displays a progress bar on page navigation."
+  },
+  "ClientOnly": {
+    "prefix": "ClientOnly",
+    "body": [
+      "<ClientOnly>",
+      "</ClientOnly>"
+    ],
+    "description": "The <ClientOnly> component renders its slot only in client-side. To import a component only on the client, register the component in a client-side only plugin."
+  }
 }
diff --git a/snippets/frameworks/vue/vue.json b/snippets/frameworks/vue/vue.json
index efc6efb7..04be79f3 100644
--- a/snippets/frameworks/vue/vue.json
+++ b/snippets/frameworks/vue/vue.json
@@ -30,6 +30,11 @@
         "body": ["<style lang=\"$1\">", "\t$0", "</style>"],
         "description": "style element with lang attribute"
     },
+    "styleLangScoped": {
+        "prefix": "styleLangScoped",
+        "body": ["<style lang=\"$1\" scoped>", "\t$0", "</style>"],
+        "description": "style scoped element with lang attribute"
+    },
     "styleScoped": {
         "prefix": "styleScoped",
         "body": ["<style scoped>", "\t$0", "</style>"],
@@ -284,29 +289,5 @@
             "</style>"
         ],
         "description": "Base for Vue File Setup Composition API - Typescript"
-    },
-    "Vue Single File Component with Class based Typescript format": {
-        "prefix": "vbase-ts-class",
-        "body": [
-            "<template>",
-            "\t<div>",
-            "",
-            "\t</div>",
-            "</template>",
-            "",
-            "<script lang=\"ts\">",
-            "\timport { Component, Vue } from 'vue-property-decorator';",
-            "",
-            "\t@Component",
-            "\texport default class $TM_FILENAME_BASE extends Vue {",
-            "\t\t",
-            "\t}",
-            "</script>",
-            "",
-            "<style scoped>",
-            "",
-            "</style>"
-        ],
-        "description": "Base for Vue File with Class based Typescript format"
     }
 }