Skip to content

Commit 178c2bf

Browse files
sdrassdras
committed
add in emit, plugin, some formatting, get rid of increment and decrement
1 parent 45dbb9c commit 178c2bf

File tree

3 files changed

+99
-95
lines changed

3 files changed

+99
-95
lines changed

‎README.md‎

Lines changed: 63 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -68,60 +68,59 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set
6868

6969
### Script
7070

71-
| Snippet | Purpose |
72-
| ---------------- | ------------------------------------------------------------------------ |
73-
| `vdata` | Component data as a function |
74-
| `vmethod` | Vue method |
75-
| `vcomputed` | Vue computed property |
76-
| `vwatcher` | Vue watcher with new and old value args |
77-
| `vbeforecreate` | beforeCreate lifecycle method |
78-
| `vcreated` | created lifecycle method |
79-
| `vbeforemount` | beforeMount lifecycle method |
80-
| `vmounted` | vmounted lifecycle method |
81-
| `vbeforeupdate` | beforeUpdate lifecycle method |
82-
| `vupdated` | updated lifecycle method |
83-
| `vbeforedestroy` | beforeDestroy lifecycle method |
84-
| `vdestroyed` | destroyed lifecycle method |
85-
| `vprops` | Props with type and default |
86-
| `vimport` | Import one component into another |
87-
| `vimport-dynamic`| Import one component that should be lazy loaded by webpack |
88-
| `vcomponents` | Import one component into another within the export statement |
89-
| `vimport-export` | Import one component into another and use it within the export statement |
90-
| `vmapstate` | import mapState from Vuex into vue component component |
91-
| `vmapgetters` | import mapGetters from Vuex into vue component component |
92-
| `vmapmutations` | import mapMutations from Vuex into vue component component |
93-
| `vmapactions` | import mapActions from Vuex into vue component component |
94-
| `vfilter` | Vue filter |
95-
| `vmixin` | Create a Vue Mixin |
96-
| `vmixin-use` | Bring a mixin into a component to use |
97-
| `vc-direct` | Vue create a custom directive |
98-
| `vimport-lib` | Import a library |
99-
| `vimport-gsap` | Import GreenSock with Timeline and Eases |
100-
| `vanimhook-js` | Using the Transition component JS hooks in methods |
101-
| `vcommit` | Commit to Vuex store in methods for mutation |
102-
| `vdispatch` | Dispatch to Vuex store in methods for action |
103-
| `vtest` | A simple unit testing component |
104-
| `vinc` | incrementer |
105-
| `vdec` | decrementer |
106-
| `vconfig` | vue.config.js file, example imports a sass file into every component |
71+
| Snippet | Purpose |
72+
| ----------------- | ------------------------------------------------------------------------ |
73+
| `vdata` | Component data as a function |
74+
| `vmethod` | Vue method |
75+
| `vcomputed` | Vue computed property |
76+
| `vwatcher` | Vue watcher with new and old value args |
77+
| `vbeforecreate` | beforeCreate lifecycle method |
78+
| `vcreated` | created lifecycle method |
79+
| `vbeforemount` | beforeMount lifecycle method |
80+
| `vmounted` | vmounted lifecycle method |
81+
| `vbeforeupdate` | beforeUpdate lifecycle method |
82+
| `vupdated` | updated lifecycle method |
83+
| `vbeforedestroy` | beforeDestroy lifecycle method |
84+
| `vdestroyed` | destroyed lifecycle method |
85+
| `vprops` | Props with type and default |
86+
| `vemit-child` | Emit event from child component |
87+
| `vemit-parent` | Emit event tp parent component |
88+
| `vimport` | Import one component into another |
89+
| `vimport-dynamic` | Import one component that should be lazy loaded by webpack |
90+
| `vcomponents` | Import one component into another within the export statement |
91+
| `vimport-export` | Import one component into another and use it within the export statement |
92+
| `vmapstate` | import mapState from Vuex into vue component component |
93+
| `vmapgetters` | import mapGetters from Vuex into vue component component |
94+
| `vmapmutations` | import mapMutations from Vuex into vue component component |
95+
| `vmapactions` | import mapActions from Vuex into vue component component |
96+
| `vfilter` | Vue filter |
97+
| `vmixin` | Create a Vue Mixin |
98+
| `vmixin-use` | Bring a mixin into a component to use |
99+
| `vc-direct` | Vue create a custom directive |
100+
| `vimport-lib` | Import a library |
101+
| `vimport-gsap` | Import GreenSock |
102+
| `vanimhook-js` | Using the Transition component JS hooks in methods |
103+
| `vcommit` | Commit to Vuex store in methods for mutation |
104+
| `vdispatch` | Dispatch to Vuex store in methods for action |
105+
| `vtest` | A simple unit testing component |
107106

108107
### Vue Composition API
109108

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 |
109+
| Snippet | Purpose |
110+
| ------------------- | ------------------------------------------------ |
111+
| `v3reactive` | Vue Composition api - reactive |
112+
| `v3computed` | Vue Composition api - computed |
113+
| `v3watch` | Vue Composition api - watcher single source |
114+
| `v3watch-array` | Vue Composition api - watch as array |
115+
| `v3watcheffect` | Vue Composition api - watchEffect |
116+
| `v3ref` | Vue Ref |
117+
| `v3onmounted` | Lifecycle hook - onMounted |
118+
| `v3onbeforemount` | Lifecycle hook - onBeforeMount |
119+
| `v3onbeforeupdate` | Lifecycle hook - onBeforeUpdate |
120+
| `v3onupdated` | Lifecycle hook - onUpdated |
121+
| `v3onerrorcaptured` | Lifecycle hook - onErrorCaptured |
122+
| `v3onunmounted` | Lifecycle hook - (destroyed) onUnmounted |
123+
| `v3onbeforeunmount` | Lifecycle hook - (beforeDestroy) onBeforeUnmount |
125124

126125
### Vuex
127126

@@ -149,6 +148,13 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set
149148
| `vbeforerouteupdate` | Vue Router component guards beforeRouteUpdate |
150149
| `vbeforerouteleave` | Vue Router component guards beforeRouteLeave |
151150

151+
### Vue Config
152+
153+
| Snippet | Purpose |
154+
| --------- | -------------------------------------------------------------------- |
155+
| `vplugin` | Import a plugin to main.js or plugins file |
156+
| `vconfig` | vue.config.js file, example imports a sass file into every component |
157+
152158
### Nuxt Config
153159

154160
| Snippet | Purpose |
@@ -158,11 +164,12 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set
158164

159165
### Nuxt Page
160166

161-
| Snippet | Purpose |
162-
| ------------ | -------------- |
163-
| `nasyncdata` | Nuxt asyncData |
164-
| `nfetch` | Nuxt Fetch |
165-
| `nhead` | Nuxt Head |
167+
| Snippet | Purpose |
168+
| ------------ | ----------------- |
169+
| `nasyncdata` | Nuxt asyncData |
170+
| `nfetch` | Nuxt Fetch |
171+
| `nhead` | Nuxt Head |
172+
| `nparam` | Nuxt Route Params |
166173

167174
### Extra (plaintext)
168175

‎snippets/nuxt-script.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,11 @@
1919
],
2020
"description": "Nuxt Fetch"
2121
},
22+
"Nuxt Route Params": {
23+
"prefix": "nparam",
24+
"body": ["this.$route.params.${1:id}"],
25+
"description": "Nuxt Route Params"
26+
},
2227
"Nuxt Head": {
2328
"prefix": "nhead",
2429
"body": [

‎snippets/vue-script.json‎

Lines changed: 31 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,16 @@
9898
],
9999
"description": "Vue Props with Default"
100100
},
101+
"Vue Emit from Child": {
102+
"prefix": "vemit-child",
103+
"body": ["@change=\"$emit('change', $event.target.value)\""],
104+
"description": "Vue Emit from Child Component"
105+
},
106+
"Vue Emit to Parent": {
107+
"prefix": "vemit-parent",
108+
"body": ["@change=\"${1:foo} = $event\""],
109+
"description": "Vue Emit to Parent Component"
110+
},
101111
"Vue Import File": {
102112
"prefix": "vimport",
103113
"body": ["import ${1:New} from '@/components/${1:New}.vue';"],
@@ -121,13 +131,11 @@
121131
],
122132
"description": "import a component and include it in export default"
123133
},
124-
"Vue Import Component Dynamically": {
125-
"prefix": "vimport-dynamic",
126-
"body": [
127-
"const ${1:New} = () => import('@/components/${1:New}.vue')"
128-
],
129-
"description": "Import component that should be lazy loaded"
130-
},
134+
"Vue Import Component Dynamically": {
135+
"prefix": "vimport-dynamic",
136+
"body": ["const ${1:New} = () => import('@/components/${1:New}.vue')"],
137+
"description": "Import component that should be lazy loaded"
138+
},
131139
"Vue MapState": {
132140
"prefix": "vmapstate",
133141
"body": [
@@ -233,8 +241,8 @@
233241
},
234242
"Vue Import GSAP": {
235243
"prefix": "vimport-gsap",
236-
"body": ["import { TimelineMax, ${1:Ease} } from 'gsap';"],
237-
"description": "component methods options that dispatch an action from vuex store."
244+
"body": ["import gsap from 'gsap';"],
245+
"description": "import gsap library"
238246
},
239247
"Vue Transition Methods with JavaScript Hooks": {
240248
"prefix": "vanimhook-js",
@@ -274,16 +282,6 @@
274282
],
275283
"description": "dispatch to vuex store in methods for action"
276284
},
277-
"Incrementer": {
278-
"prefix": "vinc",
279-
"body": ["return ${1:this.num} += ${2:1};"],
280-
"description": "increment"
281-
},
282-
"Decrementer": {
283-
"prefix": "vdec",
284-
"body": ["return ${1:this.num} -= ${2:1};"],
285-
"description": "decrement"
286-
},
287285
"Unit Test": {
288286
"prefix": "vtest",
289287
"body": [
@@ -318,29 +316,17 @@
318316
},
319317
"Vue Composition API - Reactive": {
320318
"prefix": "v3reactive",
321-
"body": [
322-
"const ${1:name} = reactive({",
323-
"\t${2:count}: ${3:0}",
324-
"})"
325-
],
319+
"body": ["const ${1:name} = reactive({", "\t${2:count}: ${3:0}", "})"],
326320
"description": "Vue Composition api - reactive"
327321
},
328322
"Vue Composition API - Computed": {
329323
"prefix": "v3computed",
330-
"body": [
331-
"const ${1:name} = computed(() => {",
332-
"\treturn ${2}",
333-
"})"
334-
],
324+
"body": ["const ${1:name} = computed(() => {", "\treturn ${2}", "})"],
335325
"description": "Vue Composition api - computed"
336326
},
337327
"Vue Composition API - watch - single source": {
338328
"prefix": "v3watch",
339-
"body": [
340-
"watch(() => ${1:foo}, (newValue, oldValue) => {",
341-
"\t${2}",
342-
"})"
343-
],
329+
"body": ["watch(() => ${1:foo}, (newValue, oldValue) => {", "\t${2}", "})"],
344330
"description": "Vue Composition api - watcher single source"
345331
},
346332
"Vue Composition API - watch - array": {
@@ -354,11 +340,7 @@
354340
},
355341
"Vue Composition API - watchEffect": {
356342
"prefix": "v3watcheffect",
357-
"body": [
358-
"watchEffect(() => {",
359-
"\t${1}",
360-
"})"
361-
],
343+
"body": ["watchEffect(() => {", "\t${1}", "})"],
362344
"description": "Vue Composition api - watchEffect"
363345
},
364346
"Vue Composition API - Vue ref": {
@@ -400,5 +382,15 @@
400382
"prefix": "v3onbeforeunmount",
401383
"body": ["onBeforeUnmount(() => {${1}})"],
402384
"description": "(beforeDestroy) Vue onBeforeUnmount Lifecycle hook"
385+
},
386+
"Plugin import": {
387+
"prefix": "vplugin",
388+
"body": [
389+
"import Vue from 'vue'",
390+
"import ${1:VueCompositionApi} from '${2:@vue/composition-api}'",
391+
"",
392+
"Vue.use(${1:VueCompositionApi})"
393+
],
394+
"description": "Import a plugin to main.js or plugins file"
403395
}
404396
}

0 commit comments

Comments
 (0)