Skip to content

Commit 63a6480

Browse files
sdrassdras
authored
Merge pull request sdras#73 from darrenjennings/feat/composition-api
feat(vue3) add composition api
2 parents 05d7faa + 3ed1b1a commit 63a6480

File tree

3 files changed

+166
-10
lines changed

3 files changed

+166
-10
lines changed

‎README.md‎

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -32,16 +32,18 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set
3232

3333
### Vue
3434

35-
| Snippet | Purpose |
36-
| ------------ | ------------------------------------------ |
37-
| `vbase` | Single file component base with SCSS |
38-
| `vbase-css` | Single file component base with CSS |
39-
| `vbase-pcss` | Single file component base with PostCSS |
40-
| `vbase-styl` | Single file component base with Stylus |
41-
| `vbase-ts` | Single file component base with Typescript |
42-
| `vbase-ns` | Single file component with no styles |
43-
| `vbase-sass` | Single file component base with SASS |
44-
| `vbase-less` | Single file component base with LESS |
35+
| Snippet | Purpose |
36+
| ------------ | ----------------------------------------------------- |
37+
| `vbase` | Single file component base with SCSS |
38+
| `vbase-3` | Single File component Composition API with SCSS |
39+
| `vbase-css` | Single file component base with CSS |
40+
| `vbase-pcss` | Single file component base with PostCSS |
41+
| `vbase-styl` | Single file component base with Stylus |
42+
| `vbase-ts` | Single file component base with Typescript |
43+
| `vbase-3-ts` | Single File component Composition API with Typescript |
44+
| `vbase-ns` | Single file component with no styles |
45+
| `vbase-sass` | Single file component base with SASS |
46+
| `vbase-less` | Single file component base with LESS |
4547

4648
### Template
4749

@@ -103,6 +105,24 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set
103105
| `vdec` | decrementer |
104106
| `vconfig` | vue.config.js file, example imports a sass file into every component |
105107

108+
### Vue Composition API
109+
110+
| Snippet | Purpose |
111+
| ----------------- | -------------------------------------------------- |
112+
| v3reactive | Vue Composition api - reactive |
113+
| v3computed | Vue Composition api - computed |
114+
| v3watch | Vue Composition api - watcher single source |
115+
| v3watch-array | Vue Composition api - watch as array |
116+
| v3watcheffect | Vue Composition api - watchEffect |
117+
| v3ref | Vue Ref |
118+
| v3onmounted | Lifecycle hook - onMounted |
119+
| v3onbeforemount | Lifecycle hook - onBeforeMount |
120+
| v3onbeforeupdate | Lifecycle hook - onBeforeUpdate |
121+
| v3onupdated | Lifecycle hook - onUpdated |
122+
| v3onerrorcaptured | Lifecycle hook - onErrorCaptured |
123+
| v3onunmounted | Lifecycle hook - (destroyed) onUnmounted |
124+
| v3onbeforeunmount | Lifecycle hook - (beforeDestroy) onBeforeUnmount |
125+
106126
### Vuex
107127

108128
| Snippet | Purpose |

‎snippets/vue-script.json‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -315,5 +315,90 @@
315315
"}"
316316
],
317317
"description": "vue.config.js"
318+
},
319+
"Vue Composition API - Reactive": {
320+
"prefix": "v3reactive",
321+
"body": [
322+
"const ${1:name} = reactive({",
323+
"\t${2:count}: ${3:0}",
324+
"})"
325+
],
326+
"description": "Vue Composition api - reactive"
327+
},
328+
"Vue Composition API - Computed": {
329+
"prefix": "v3computed",
330+
"body": [
331+
"const ${1:name} = computed(() => {",
332+
"\treturn ${2}",
333+
"})"
334+
],
335+
"description": "Vue Composition api - computed"
336+
},
337+
"Vue Composition API - watch - single source": {
338+
"prefix": "v3watch",
339+
"body": [
340+
"watch(() => ${1:foo}, (newValue, oldValue) => {",
341+
"\t${2}",
342+
"})"
343+
],
344+
"description": "Vue Composition api - watcher single source"
345+
},
346+
"Vue Composition API - watch - array": {
347+
"prefix": "v3watch-array",
348+
"body": [
349+
"watch([${1:foo}, ${2:bar}], ([new${1}, new${2}], [prev${1}, prev${2}]) => {",
350+
"\t${3}",
351+
"})"
352+
],
353+
"description": "Vue Composition api - watch as array"
354+
},
355+
"Vue Composition API - watchEffect": {
356+
"prefix": "v3watcheffect",
357+
"body": [
358+
"watchEffect(() => {",
359+
"\t${1}",
360+
"})"
361+
],
362+
"description": "Vue Composition api - watchEffect"
363+
},
364+
"Vue Composition API - Vue ref": {
365+
"prefix": "v3ref",
366+
"body": ["const ${1:name} = ref(${2:initialValue})"],
367+
"description": "Vue Ref"
368+
},
369+
"Vue Lifecycle Hooks - onMounted": {
370+
"prefix": "v3onmounted",
371+
"body": ["onMounted(() => {${1}})"],
372+
"description": "Vue Mounted Lifecycle hook"
373+
},
374+
"Vue Lifecycle Hooks - onBeforeMount": {
375+
"prefix": "v3onbeforemount",
376+
"body": ["onBeforeMount(() => {${1}})"],
377+
"description": "Vue onBeforeMount Lifecycle hook"
378+
},
379+
"Vue Lifecycle Hooks - onBeforeUpdate": {
380+
"prefix": "v3onbeforeupdate",
381+
"body": ["onBeforeUpdate(() => {${1}})"],
382+
"description": "Vue onBeforeUpdate Lifecycle hook"
383+
},
384+
"Vue Lifecycle Hooks - onUpdated": {
385+
"prefix": "v3onupdated",
386+
"body": ["onUpdated(() => {${1}})"],
387+
"description": "Vue onUpdated Lifecycle hook"
388+
},
389+
"Vue Lifecycle Hooks - onErrorCaptured": {
390+
"prefix": "v3onerrorcaptured",
391+
"body": ["onErrorCaptured(() => {${1}})"],
392+
"description": "Vue onErrorCaptured Lifecycle hook"
393+
},
394+
"Vue Lifecycle Hooks - onUnmounted": {
395+
"prefix": "v3onunmounted",
396+
"body": ["onUnmounted(() => {${1}})"],
397+
"description": "(destroyed) Vue onUnmounted Lifecycle hook"
398+
},
399+
"Vue Lifecycle Hooks - onBeforeUnmount": {
400+
"prefix": "v3onbeforeunmount",
401+
"body": ["onBeforeUnmount(() => {${1}})"],
402+
"description": "(beforeDestroy) Vue onBeforeUnmount Lifecycle hook"
318403
}
319404
}

‎snippets/vue.json‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,5 +164,56 @@
164164
"</script>"
165165
],
166166
"description": "Base for Vue File with no styles"
167+
},
168+
"Vue Single File Component Composition API": {
169+
"prefix": "vbase-3",
170+
"body": [
171+
"<template>",
172+
"\t<div>",
173+
"",
174+
"\t</div>",
175+
"</template>",
176+
"",
177+
"<script>",
178+
"export default {",
179+
"\tsetup () {",
180+
"\t\t${0}",
181+
"",
182+
"\t\treturn {}",
183+
"\t}",
184+
"}",
185+
"</script>",
186+
"",
187+
"<style lang=\"scss\" scoped>",
188+
"",
189+
"</style>"
190+
],
191+
"description": "Base for Vue File Composition API with SCSS"
192+
},
193+
"Vue Single File Component Composition API with Typescript": {
194+
"prefix": "vbase-3-ts",
195+
"body": [
196+
"<template>",
197+
"\t<div>",
198+
"",
199+
"\t</div>",
200+
"</template>",
201+
"",
202+
"<script lang=\"ts\">",
203+
"import Vue from 'vue'",
204+
"",
205+
"export default Vue.extend({",
206+
"\tsetup () {",
207+
"\t\t${0}\n",
208+
"\t\treturn {}",
209+
"\t}",
210+
"})",
211+
"</script>",
212+
"",
213+
"<style scoped>",
214+
"",
215+
"</style>"
216+
],
217+
"description": "Base for Vue File Composition API - Typescript"
167218
}
168219
}

0 commit comments

Comments
 (0)