Skip to content
This repository was archived by the owner on May 30, 2025. It is now read-only.

Commit f21734f

Browse files
sdrassdras
authored
Merge branch 'master' into master
2 parents cd1ef97 + c99db3e commit f21734f

File tree

7 files changed

+163
-112
lines changed

7 files changed

+163
-112
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,19 +32,20 @@ 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 |
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 |
4344
| `vbase-ts-class` | Single file component base with Typescript Class Format |
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 |
45+
| `vbase-3-ts` | Single File component Composition API with Typescript |
46+
| `vbase-ns` | Single file component with no styles |
47+
| `vbase-sass` | Single file component base with SASS |
48+
| `vbase-less` | Single file component base with LESS |
4849

4950
### Template
5051

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

7072
### Script
7173

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

109110
### Vue Composition API
110111

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

127128
### Vuex
128129

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

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

155163
| Snippet | Purpose |
@@ -159,11 +167,12 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set
159167

160168
### Nuxt Page
161169

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

168177
### Extra (plaintext)
169178

‎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)