feat: release 2.3.0

package.json

@@ -4,7 +4,7 @@
 	"displayName": "Vue 2 Snippets",
 	"description": "Code snippets for Vue 2 (Only Vue 2.x, Vue Router 3.x, @vue/composition-api)",
 	"icon": "art/icon.png",
-	"version": "2.2.7",
+	"version": "2.3.0",
 	"type": "module",
 	"galleryBanner": {
 		"color": "#ffffff",

src/html/built-in-directives.json

@@ -50,17 +50,17 @@
 		]
 	},
 	"v-slot, named": {
-		"prefix": "v-slot-named",
+		"prefix": ["v-slot-named", "vsn"],
 		"body": [
-			"<template #${1:name}>",
+			"<template #${1:default}>",
 			"  $0",
 			"</template>"
 		]
 	},
 	"v-slot, named, props": {
-		"prefix": "v-slot-named-props",
+		"prefix": ["v-slot-named-props", "vsnp"],
 		"body": [
-			"<template #${1:name}=\"${2:slotProps}\">",
+			"<template #${1:default}=\"${2:slotProps}\">",
 			"  $0",
 			"</template>"
 		]
@@ -112,16 +112,18 @@
 	},
 	"v-bind=\"$attrs\"": {
 		"prefix": [
-			"v-bind-$attrs"
+			"v-bind-$attrs",
+			"vba"
 		],
 		"body": [
 			"${1:v-bind=\"\\$attrs\"}$0"
 		],
 		"description": "In combination with `inheritAttrs: false`, apply attributes to some other element instead of the root element.\n"
 	},
-	"v-bind=\"$listeners\"": {
+	"v-on=\"$listeners\"": {
 		"prefix": [
-			"v-on-$listeners"
+			"v-on-$listeners",
+			"vol"
 		],
 		"body": [
 			"${1:v-on=\"\\$listeners\"}$0"

src/html/built-in-special-elements.json

@@ -14,9 +14,12 @@
 		"description": "Denotes slot content outlets in templates.\n"
 	},
 	"<slot>, named": {
-		"prefix": "slot-name",
+		"prefix": [
+			"slot-named",
+			"sn"
+		],
 		"body": [
-			"<slot name=\"${1:name}\"></slot>"
+			"<slot name=\"${1:default}\"></slot>"
 		],
 		"description": "Named Slots.\n"
 	}

src/javascript/03.options-data/computed.json

@@ -1,5 +1,5 @@
 {
-	"computed property": {
+	"Options API: computed property": {
 		"prefix": [
 			"computed-property",
 			"cp"
@@ -11,11 +11,8 @@
 			"$0"
 		]
 	},
-	"computed property, get, set": {
-		"prefix": [
-			"computed-property-get-set",
-			"cpgs"
-		],
+	"Options API: computed property: { get, set }": {
+		"prefix": "computed-property-get-set",
 		"body": [
 			"${3:property}: {",
 			"  get() {",

src/javascript/03.options-data/index.json

@@ -1,6 +1,9 @@
 {
 	"Options API: props{}": {
-		"prefix": ["option-props", "ops"],
+		"prefix": [
+			"option-props",
+			"ops"
+		],
 		"body": [
 			"props: {",
 			"  $1",
@@ -20,7 +23,10 @@
 		"description": "Type: Object.\nonly respected in instance creation via `new`.\nPass props to an instance during its creation. This is primarily intended to make unit testing easier.\n"
 	},
 	"Options API: data()": {
-		"prefix": ["option-data()", "od"],
+		"prefix": [
+			"option-data()",
+			"od"
+		],
 		"body": [
 			"data() {",
 			"  return {",
@@ -32,7 +38,10 @@
 		"description": "Type: Object | Function\n"
 	},
 	"Options API: computed{}": {
-		"prefix": ["option-computed", "oc"],
+		"prefix": [
+			"option-computed",
+			"oc"
+		],
 		"body": [
 			"computed: {",
 			"  ${1:property}() {",
@@ -44,7 +53,10 @@
 		"description": "Type: { [key: string]: Function | { get: Function, set: Function } }\nComputed properties to be mixed into the Vue instance. All getters and setters have their this context automatically bound to the Vue instance.\nNote that if you use an arrow function with a computed property, `this` won’t be the component’s instance, but you can still access the instance as the function’s first argument.\n"
 	},
 	"Options API: methods{}": {
-		"prefix": ["option-methods", "om"],
+		"prefix": [
+			"option-methods",
+			"om"
+		],
 		"body": [
 			"methods: {",
 			"  ${1:methodName}($2) {",
@@ -67,16 +79,6 @@
 			"$0"
 		]
 	},
-	"Options API: watch{}": {
-		"prefix": ["option-watch", "ow"],
-		"body": [
-			"watch: {",
-			"  $1",
-			"},",
-			"$0"
-		],
-		"description": "Type: { [key: string]: String | Function | Object | Array}\nString: methodName,\nFunction: handler(val, oldVal),\nObject: {handler(val, oldVal): Function, deep: Boolean, immediate: Boolean},\nArray: [String, Object, Function]\nAn 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. The Vue instance will call `$watch()` for each entry in the object at instantiation.\n"
-	},
 	"Options API: emits[]": {
 		"prefix": "option-emits",
 		"body": [

src/javascript/03.options-data/watch.json

@@ -1,5 +1,5 @@
 {
-	"watch property": {
+	"Options API: watch property": {
 		"prefix": [
 			"watch-property",
 			"wp"
@@ -11,7 +11,7 @@
 			"$0"
 		]
 	},
-	"watch property, deep ": {
+	"Options API: watch property, deep ": {
 		"prefix": [
 			"watch-property-deep",
 			"wpd"
@@ -26,7 +26,7 @@
 			"$0"
 		]
 	},
-	"watch property, immediate ": {
+	"Options API: watch property, immediate ": {
 		"prefix": [
 			"watch-property-immediate",
 			"wpi"
@@ -41,10 +41,9 @@
 			"$0"
 		]
 	},
-	"watch property, deep, immediate ": {
+	"Options API: watch property, deep, immediate ": {
 		"prefix": [
 			"watch-property-deep-immediate",
-			"watch-property-immediate-deep",
 			"wpdi"
 		],
 		"body": [

src/javascript/08.options-misc/index.json

@@ -6,13 +6,6 @@
 		],
 		"description": "Type: `string`.\nRestriction: only respected when used as a component option.\nDetails:\nAllow the component to recursively invoke itself in its template. Note that when a component is registered globally with `Vue.component()`, the global ID is automatically set as its name.\nAnother benefit of specifying a `name` option is debugging. Named components result in more helpful warning messages. Also, when inspecting an app in the vue-devtools, unnamed components will show up as `<AnonymousComponent>`, which isn’t very informative. By providing the `name` option, you will get a much more informative component tree.\n"
 	},
-	"Options API: delimiters": {
-		"prefix": "option-delimiters",
-		"body": [
-			"delimiters: ['${1:{{}', '${2:\\}\\}}'],$0"
-		],
-		"description": "Type: `Array<string>`.\nDefault: ['{{', '}}'].\nRestrictions: This option is only available in the full build, with in-browser compilation.\nDetails:\nChange the plain text interpolation delimiters.\n"
-	},
 	"Options API: functional": {
 		"prefix": "option-functional",
 		"body": [
@@ -24,7 +17,7 @@
 		"prefix": "option-model",
 		"body": [
 			"model: {",
-			"  prop: '${1:checked}',",
+			"  prop: '${1:value}',",
 			"  event: '${2:change}',",
 			"},$0"
 		],

src/javascript/20.composition-api/component-instance.json

@@ -1,6 +1,9 @@
 {
 	"Composition API: getCurrentInstance()": {
-		"prefix": "getCurrentInstance",
+		"prefix": [
+			"getCurrentInstance",
+			"gci"
+		],
 		"body": [
 			"const instance = getCurrentInstance();"
 		],

src/javascript/20.composition-api/lifecycle-hooks.json

@@ -107,6 +107,14 @@
 		],
 		"description": "SSR only.\nComposition API: Lifecycle Hooks.\nRegisters an async function to be resolved before the component instance is to be rendered on the server.\n"
 	},
+	"Composition API: async onBeforeMount()": {
+		"prefix": "async-onBeforeMount",
+		"body": [
+			"onBeforeMount(async () => {",
+			"  $1",
+			"});$0"
+		]
+	},
 	"Composition API: async onMounted()": {
 		"prefix": "async-onMounted",
 		"body": [

src/javascript/20.composition-api/reactivity-core.json

@@ -1,19 +1,25 @@
 {
 	"Composition API: ref()": {
-		"prefix": "ref",
+		"prefix": [
+			"ref",
+			"r"
+		],
 		"body": [
-			"const ${1:feature} = ref(${2:value});"
+			"const ${1:feature} = ref(${2:null});"
 		],
 		"description": "Reactivity API - Refs.\nTakes an inner value and returns a reactive and mutable ref object. The ref object has a single property `.value` that points to the inner value.\n"
 	},
 	"Composition API: computed()": {
-		"prefix": "computed",
+		"prefix": [
+			"computed",
+			"c"
+		],
 		"body": [
 			"const ${3:feature} = computed(() => ${1:state.value});"
 		],
 		"description": "Reactivity API - Computed and watch.\nTakes a getter function and returns an immutable reactive ref object for the returned value from the getter.\n"
 	},
-	"Composition API: computed, (get/set)": {
+	"Composition API: computed ({ get, set })": {
 		"prefix": "computed-get-set",
 		"body": [
 			"const ${3:feature} = computed({",