add in boilerplate for merging composition and options api

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.3
+
+- Add in boilerplate to use Composition API inside Options API
+
 ## 2.1.2
 
 - Add in Vue 3 Composition API with Reactive boilerplate script

README.md

@@ -111,12 +111,12 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set
 
 | 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                     |
+| `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                        |
@@ -125,6 +125,7 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set
 | `v3onerrorcaptured` | Lifecycle hook - onErrorCaptured                      |
 | `v3onunmounted`     | Lifecycle hook - (destroyed) onUnmounted              |
 | `v3onbeforeunmount` | Lifecycle hook - (beforeDestroy) onBeforeUnmount      |
+| `v3useinoptions`    | Use Composition API in Options API                    |
 
 ### 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.2",
+  "version": "2.1.3",
   "publisher": "sdras",
   "engines": {
     "vscode": "^1.14.0"

snippets/vue-script.json

@@ -411,5 +411,22 @@
       "}"
     ],
     "description": "Vue Composition API Script with Reactive"
+  },
+  "Use Composition API within Options API": {
+    "prefix": "v3useinoptions",
+    "body": [
+      "import { ${0:component} } from '@/composables/${0:component}.js'",
+      "",
+      "export default {",
+      "\tsetup () {",
+      "\t\tconst { ${1:name} } = ${0:component}()",
+      "\t",
+      "\t\treturn {",
+      "\t\t\t${1:name}",
+      "\t\t}",
+      "\t}",
+      "}"
+    ],
+    "description": "Use Composition API within Options API"
   }
 }