add in reactive script and increment version

Author: sdras

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to the "vue-vscode-snippets" extension will be documented in this file.
 
+## 2.1.2
+
+- Add in Vue 3 Composition API with Reactive boilerplate script
+
 ## 2.1.1
 
 - Update readme to reflect Vue 3 support

README.md

@@ -109,21 +109,22 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set
 
 ### Vue Composition API
 
-| Snippet             | Purpose                                          |
-| ------------------- | ------------------------------------------------ |
-| `v3reactive`        | Vue Composition api - reactive                   |
-| `v3computed`        | Vue Composition api - computed                   |
-| `v3watch`           | Vue Composition api - watcher single source      |
-| `v3watch-array`     | Vue Composition api - watch as array             |
-| `v3watcheffect`     | Vue Composition api - watchEffect                |
-| `v3ref`             | Vue Ref                                          |
-| `v3onmounted`       | Lifecycle hook - onMounted                       |
-| `v3onbeforemount`   | Lifecycle hook - onBeforeMount                   |
-| `v3onbeforeupdate`  | Lifecycle hook - onBeforeUpdate                  |
-| `v3onupdated`       | Lifecycle hook - onUpdated                       |
-| `v3onerrorcaptured` | Lifecycle hook - onErrorCaptured                 |
-| `v3onunmounted`     | Lifecycle hook - (destroyed) onUnmounted         |
-| `v3onbeforeunmount` | Lifecycle hook - (beforeDestroy) onBeforeUnmount |
+| Snippet             | Purpose                                               |
+| ------------------- | ----------------------------------------------------- |
+| `v3reactive`        | Vue Composition api - reactive                        |
+| `v3reactive-setup`  | Vue Composition api - reactive with setup boilerplate |
+| `v3computed`        | Vue Composition api - computed                        |
+| `v3watch`           | Vue Composition api - watcher single source           |
+| `v3watch-array`     | Vue Composition api - watch as array                  |
+| `v3watcheffect`     | Vue Composition api - watchEffect                     |
+| `v3ref`             | Vue Ref                                               |
+| `v3onmounted`       | Lifecycle hook - onMounted                            |
+| `v3onbeforemount`   | Lifecycle hook - onBeforeMount                        |
+| `v3onbeforeupdate`  | Lifecycle hook - onBeforeUpdate                       |
+| `v3onupdated`       | Lifecycle hook - onUpdated                            |
+| `v3onerrorcaptured` | Lifecycle hook - onErrorCaptured                      |
+| `v3onunmounted`     | Lifecycle hook - (destroyed) onUnmounted              |
+| `v3onbeforeunmount` | Lifecycle hook - (beforeDestroy) onBeforeUnmount      |
 
 ### Vuex
 

package.json

@@ -3,7 +3,7 @@
   "displayName": "Vue VSCode Snippets",
   "description": "Snippets that will supercharge your Vue workflow",
   "icon": "images/vue-logo.png",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "publisher": "sdras",
   "engines": {
     "vscode": "^1.14.0"

snippets/vue-script.json

@@ -392,5 +392,24 @@
       "Vue.use(${1:VueCompositionApi})"
     ],
     "description": "Import a plugin to main.js or plugins file"
+  },
+  "Vue Composition API Reactive Script": {
+    "prefix": "v3reactive-setup",
+    "body": [
+      "import { reactive, toRefs } from '@vue/composition-api'",
+      "",
+      "export default {",
+      "\tsetup () {",
+      "\t\tconst state = reactive({",
+      "\t\t\t${0:count}: ${1:0},",
+      "\t\t})",
+      "\t",
+      "\t\treturn {",
+      "\t\t\t...toRefs(state),",
+      "\t\t}",
+      "\t}",
+      "}"
+    ],
+    "description": "Vue Composition API Script with Reactive"
   }
 }