Skip to content

Commit b74c537

Browse files
sidharthv96sidharthv96
committed
Merge remote-tracking branch 'upstream/master'
* upstream/master: (32 commits) 🗒 Update contributing guidelines 🚩 increment version fixup! feat(vue3) add composition api fixup! feat(vue3) add composition api feat(vue3) add composition api add vimport-dynamic for better perf (see VueDose Tip 15 by Paul Melero) 🚩 increment versions formatting fix vtest prefix fix vdec prefix fix vdispatch prefix fix vcommit prefix fix vimport-gsap prefix fix vimport-lib prefix fix vmapmutations prefix fix vmapgetter prefix fix vmapgetter prefix fix vmapstate prefix fix vimport-export prefix fix vmixin prefix ...
2 parents 1bcddeb + c0fc2c4 commit b74c537

File tree

9 files changed

+450
-175
lines changed

9 files changed

+450
-175
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,3 +74,4 @@ jspm_packages
7474
# VS Code
7575
vsc-extension-quickstart.md
7676
*.vsix
77+
.vscode

‎CHANGELOG.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,17 @@ All notable changes to the "vue-vscode-snippets" extension will be documented in
44

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

7+
## 2.0.9
8+
9+
- Vue 3 Composition API support
10+
11+
## 1.9.0
12+
13+
- New vbase support: LESS, SASS, Stylus, no CSS
14+
- Fix pug support
15+
- Fix brackets on vue router
16+
- New snippets: Nuxt page snippets
17+
718
## 1.8.0
819

920
- New snippet: Vue router

‎README.md

Lines changed: 41 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,12 +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-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-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 |
4147

4248
### Template
4349

@@ -78,6 +84,7 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set
7884
| `vdestroyed` | destroyed lifecycle method |
7985
| `vprops` | Props with type and default |
8086
| `vimport` | Import one component into another |
87+
| `vimport-dynamic`| Import one component that should be lazy loaded by webpack |
8188
| `vcomponents` | Import one component into another within the export statement |
8289
| `vimport-export` | Import one component into another and use it within the export statement |
8390
| `vmapstate` | import mapState from Vuex into vue component component |
@@ -98,6 +105,24 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set
98105
| `vdec` | decrementer |
99106
| `vconfig` | vue.config.js file, example imports a sass file into every component |
100107

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+
101126
### Vuex
102127

103128
| Snippet | Purpose |
@@ -131,6 +156,14 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set
131156
| `nfont` | link to include fonts in a nuxt project, in nuxt-config |
132157
| `ncss` | link to css assets such as normalize |
133158

159+
### Nuxt Page
160+
161+
| Snippet | Purpose |
162+
| ------------ | -------------- |
163+
| `nasyncdata` | Nuxt asyncData |
164+
| `nfetch` | Nuxt Fetch |
165+
| `nhead` | Nuxt Head |
166+
134167
### Extra (plaintext)
135168

136169
| Snippet | Purpose |
@@ -140,3 +173,5 @@ You can enable tab completion (recommended) by opening `Code > Preferences > Set
140173
## Contributing
141174

142175
This is an open source project open to anyone. Contributions are welcome [github](https://github.com/sdras/vue-vscode-snippets)
176+
177+
If you are contributing a snippet, please be sure to add the documentation for it in the tables in the README, the pull request cannot be accepted without this addition. Thanks.

‎package.json

Lines changed: 11 additions & 5 deletions
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": "1.8.0",
6+
"version": "2.0.0",
77
"publisher": "sdras",
88
"engines": {
99
"vscode": "^1.14.0"
@@ -18,7 +18,9 @@
1818
},
1919
"keywords": [
2020
"Vue",
21+
"Vue 3",
2122
"Vue 2",
23+
"Composition API",
2224
"Vue Snippets"
2325
],
2426
"extensionDependencies": [
@@ -33,6 +35,10 @@
3335
"language": "vue",
3436
"path": "./snippets/vue.json"
3537
},
38+
{
39+
"language": "jade",
40+
"path": "./snippets/vue-pug.json"
41+
},
3642
{
3743
"language": "html",
3844
"path": "./snippets/vue-template.json"
@@ -57,6 +63,10 @@
5763
"language": "javascript",
5864
"path": "./snippets/nuxt-config.json"
5965
},
66+
{
67+
"language": "javascript",
68+
"path": "./snippets/nuxt-script.json"
69+
},
6070
{
6171
"language": "typescript",
6272
"path": "./snippets/vue-script.json"
@@ -72,10 +82,6 @@
7282
{
7383
"language": "typescript",
7484
"path": "./snippets/nuxt-config.json"
75-
},
76-
{
77-
"language": "plaintext",
78-
"path": "./snippets/plaintext.json"
7985
}
8086
]
8187
}

‎snippets/nuxt-script.json

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"Nuxt Async": {
3+
"prefix": "nasyncdata",
4+
"body": [
5+
"async asyncData ({ ${1:params} }) {",
6+
"\tconst { data } = await fetch(`${2:endpoint}`).then(res => res.json())",
7+
"\treturn { ${3:key}:${4:value} }",
8+
"},"
9+
],
10+
"description": "Nuxt asyncData"
11+
},
12+
"Nuxt Fetch": {
13+
"prefix": "nfetch",
14+
"body": [
15+
"async fetch ({ store, ${1:params} }) {",
16+
"\tlet { data } = await fetch('${2:endpoint}').then(res => res.json())",
17+
"\tstore.commit('${3:MUTATION_TYPE}', data)",
18+
"},"
19+
],
20+
"description": "Nuxt Fetch"
21+
},
22+
"Nuxt Head": {
23+
"prefix": "nhead",
24+
"body": [
25+
"head () {",
26+
"\treturn {",
27+
"\t\ttitle: ${1:'Page Title'},",
28+
"\t\tmeta: [",
29+
"\t\t\t// hid is used as unique identifier. Do not use `vmid` for it as it will not work",
30+
"\t\t\t{ hid: 'description', name: 'description', content: ${2:'My custom description'} }",
31+
"\t\t]",
32+
"\t}",
33+
"},"
34+
],
35+
"description": "Nuxt Head"
36+
}
37+
}

‎snippets/vue-script-router.json

Lines changed: 7 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"\tmode: 'history',",
1313
"\troutes: [",
1414
"\t\t{ path: '/path', component: component }",
15-
"\t}",
15+
"\t]",
1616
"});"
1717
],
1818
"description": "Base for Vue Router"
@@ -35,7 +35,7 @@
3535
"body": [
3636
"router.beforeEach((to, from, next) => {",
3737
"\t${1:next();}",
38-
"};"
38+
"});"
3939
],
4040
"description": "Vue Router global guards beforeEach"
4141
},
@@ -44,26 +44,18 @@
4444
"body": [
4545
"router.beforeResolve((to, from, next) => {",
4646
"\t${1:next();}",
47-
"};"
47+
"});"
4848
],
4949
"description": "Vue Router global guards beforeResolve"
5050
},
5151
"Vue Router afterEach": {
5252
"prefix": "vaftereach",
53-
"body": [
54-
"router.afterEach((to, from) => {",
55-
"\t",
56-
"};"
57-
],
53+
"body": ["router.afterEach((to, from) => {", "\t", "});"],
5854
"description": "Vue Router global guards afterEach"
5955
},
6056
"Vue Router beforeEnter": {
6157
"prefix": "vbeforeenter",
62-
"body": [
63-
"beforeEnter(to, from, next) {",
64-
"\t${1:next();}",
65-
"},"
66-
],
58+
"body": ["beforeEnter(to, from, next) {", "\t${1:next();}", "},"],
6759
"description": "Vue Router per-route guard beforeEnter"
6860
},
6961
"Vue Router beforeRouteEnter": {
@@ -77,20 +69,12 @@
7769
},
7870
"Vue Router beforeRouteUpdate": {
7971
"prefix": "vbeforerouteupdate",
80-
"body": [
81-
"beforeRouteUpdate(to, from, next) {",
82-
"\t${1:next();}",
83-
"},"
84-
],
72+
"body": ["beforeRouteUpdate(to, from, next) {", "\t${1:next();}", "},"],
8573
"description": "Vue Router component guards beforeRouteUpdate"
8674
},
8775
"Vue Router beforeRouteLeave": {
8876
"prefix": "vbeforerouteleave",
89-
"body": [
90-
"beforeRouteLeave(to, from, next) {",
91-
"\t${1:next();}",
92-
"},"
93-
],
77+
"body": ["beforeRouteLeave(to, from, next) {", "\t${1:next();}", "},"],
9478
"description": "Vue Router component guards beforeRouteLeave"
9579
},
9680
"Vue Router Route": {

0 commit comments

Comments
 (0)