Skip to content

Commit c99db3e

Browse files
sdrassdras
authored
Merge pull request sdras#78 from sdras/additions
Additions
2 parents 45dbb9c + 8a7462a commit c99db3e

File tree

7 files changed

+161
-110
lines changed

7 files changed

+161
-110
lines changed

‎CHANGELOG.md‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,19 @@
1-
# Change Log
1+
# Changelog
22

33
All notable changes to the "vue-vscode-snippets" extension will be documented in this file.
44

55
Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
66

7-
## 2.0.9
7+
## 2.1.0
8+
9+
- Further Vue 3 Composition API support
10+
- Adds in Emit
11+
- Adds in named slot
12+
- Better TypeScript support
13+
- Removes increment/decrement
14+
- Updates gsap
15+
16+
## 2.0.0
817

918
- Vue 3 Composition API support
1019

‎README.md‎

Lines changed: 77 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -32,18 +32,19 @@ 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-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 |
35+
| Snippet | Purpose |
36+
| ------------------ | ------------------------------------------------------------ |
37+
| `vbase` | Single file component base with SCSS |
38+
| `vbase-3` | Single File component Composition API with SCSS |
39+
| `vbase-3-reactive` | Single File component Composition API with Reactive and SCSS |
40+
| `vbase-css` | Single file component base with CSS |
41+
| `vbase-pcss` | Single file component base with PostCSS |
42+
| `vbase-styl` | Single file component base with Stylus |
43+
| `vbase-ts` | Single file component base with Typescript |
44+
| `vbase-3-ts` | Single File component Composition API with Typescript |
45+
| `vbase-ns` | Single file component with no styles |
46+
| `vbase-sass` | Single file component base with SASS |
47+
| `vbase-less` | Single file component base with LESS |
4748

4849
### Template
4950

@@ -53,6 +54,7 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set
5354
| `vmodel` | Semantic v-model directive |
5455
| `vmodel-num` | Semantic v-model number directive |
5556
| `von` | v-on click handler with arguments |
57+
| `vslot-named` | Named slot |
5658
| `vel-props` | Component element with props |
5759
| `vsrc` | Image src binding |
5860
| `vstyle` | Inline style binding |
@@ -68,60 +70,59 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set
6870

6971
### Script
7072

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

108109
### Vue Composition API
109110

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

126127
### Vuex
127128

@@ -149,6 +150,13 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set
149150
| `vbeforerouteupdate` | Vue Router component guards beforeRouteUpdate |
150151
| `vbeforerouteleave` | Vue Router component guards beforeRouteLeave |
151152

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

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

159167
### Nuxt Page
160168

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

167176
### Extra (plaintext)
168177

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"displayName": "Vue VSCode Snippets",
44
"description": "Snippets that will supercharge your Vue workflow",
55
"icon": "images/vue-logo.png",
6-
"version": "2.0.0",
6+
"version": "2.1.0",
77
"publisher": "sdras",
88
"engines": {
99
"vscode": "^1.14.0"

‎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": ["${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
}

‎snippets/vue-template.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,11 @@
3030
"body": ["<${1:component} :${1:propName}=\"${0}\"></${1:component}>"],
3131
"description": "component element with props"
3232
},
33+
"Vue Named Slot": {
34+
"prefix": "vslot-named",
35+
"body": ["<template v-slot:${0:name}>${1:defaultcontent}</template>"],
36+
"description": "named slot"
37+
},
3338
"Vue Image Source Binding": {
3439
"prefix": "vsrc",
3540
"body": [

0 commit comments

Comments
 (0)