Skip to content

Commit bbc4a26

Browse files
zhaolinlauzhaolinlau
committed
add vue built-in components
1 parent 71cd47f commit bbc4a26

File tree

4 files changed

+115
-57
lines changed

4 files changed

+115
-57
lines changed

‎CHANGELOG.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,16 @@ All notable changes to the "nuxt-vscode-snippets" extension will be documented i
44

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

7+
## 2.5.0
8+
9+
### Added
10+
11+
- `vtrans` Snippet for the Vue `<Transition>` component
12+
- `vtransgroup` Snippet for the Vue `<TransitionGroup>` component
13+
- `vkeepalive` Snippet for the Vue `<KeepAlive>` component
14+
- `vtp` Snippet for the Vue `<Teleport>` component
15+
- `vsuspense` Snippet for the Vue `<Suspense>` component
16+
717
## 2.4.1
818

919
### Fixes

‎README.md

Lines changed: 59 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -34,68 +34,18 @@ Type part of a snippet, press `enter`, and the snippet unfolds.
3434

3535
## Snippets
3636

37-
### Support File `.vue`
37+
### Nuxt
3838

39-
- Nuxt
39+
#### Components
4040

4141
| Prefix | Purpose |
4242
| ------------- | --------------------------- |
43-
| `npage` | `<NuxtPage />` |
44-
| `nlayout` | `<NuxtLayout></NuxtLayout>` |
43+
| `npage` | `<NuxtPage>` |
44+
| `nlayout` | `<NuxtLayout>` |
4545
| `nlink` | Nuxt router link |
4646
| `nlink-param` | Nuxt router link with param |
4747

48-
- Vue
49-
50-
| Prefix | Purpose |
51-
| --------------- | -------------------------------------------------------------------- |
52-
| `vbase` | Base for Vue 3 File with `<script setup>` No style |
53-
| `vbase-scss` | Base for Vue 3 File with `<script setup>` Style `SCSS` |
54-
| `vbase-sass` | Base for Vue 3 File with `<script setup>` Style `SASS` |
55-
| `vbase-less` | Base for Vue 3 File with `<script setup>` Style `LESS` |
56-
| `vbase-pcss` | Base for Vue 3 File with `<script setup>` Style `PostCSS` |
57-
| `vbase-css` | Base for Vue 3 File with `<script setup>` Style `CSS` |
58-
| `vbase-ts` | Base for Vue 3 File with `<script setup lang='ts'>`, No Style |
59-
| `vbase-ts-scss` | Base for Vue 3 File with `<script setup lang='ts'>`, Style `SCSS` |
60-
| `vbase-ts-sass` | Base for Vue 3 File with `<script setup lang='ts'>`, Style `SASS` |
61-
| `vbase-ts-less` | Base for Vue 3 File with `<script setup lang='ts'>`, Style `LESS` |
62-
| `vbase-ts-pcss` | Base for Vue 3 File with `<script setup lang='ts'>`, Style `PostCSS` |
63-
| `vbase-ts-css` | Base for Vue 3 File with `<script setup lang='ts'>`, Style `CSS` |
64-
65-
| Prefix | Purpose |
66-
| ------------- | ----------------------------- |
67-
| `vscript` | `<script setup>` |
68-
| `vscript-ts` | `<script setup lang='ts'>` |
69-
| `vtemplate` | `<template></template>` |
70-
| `vfor` | `v-for` statement |
71-
| `vslot-named` | `<template #name></template>` |
72-
73-
### Support File `.js, .ts`
74-
75-
- Vue Router
76-
77-
| Prefix | Purpose |
78-
| -------------------- | ----------------------------------------------- |
79-
| `vrouter` | Vue Router base |
80-
| `vscrollbehavior` | Vue Router `scrollBehavior` |
81-
| `vbeforeeach` | Vue Router global guards `beforeEach` |
82-
| `vbeforeresolve` | Vue Router global guards `beforeResolve` |
83-
| `vaftereach` | Vue Router global guards `afterEach` |
84-
| `vbeforeenter` | Vue Router per-route guard `beforeEnter` |
85-
| `vbeforerouteenter` | Vue Router component guards `beforeRouteEnter` |
86-
| `vbeforerouteupdate` | Vue Router component guards `beforeRouteUpdate` |
87-
| `vbeforerouteleave` | Vue Router component guards `beforeRouteLeave` |
88-
89-
- Pinia
90-
91-
| Prefix | Purpose |
92-
| --------- | ------------------------------------------------------------ |
93-
| `pbase` | Base code needed for a Pinia store file |
94-
| `pbase-c` | Base code needed for a Pinia store file with Composition API |
95-
96-
### Support File `.vue, .js, .ts`
97-
98-
- Nuxt
48+
#### Composables & Utilities
9949

10050
| Prefix | Purpose |
10151
| ----------------------- | -------------------------------------------------- |
@@ -130,7 +80,41 @@ Type part of a snippet, press `enter`, and the snippet unfolds.
13080
| `nroute` | `useRoute` composable |
13181
| `nrouter` | `useRouter` composable |
13282

133-
- Vue
83+
### Vue
84+
85+
#### Templates
86+
87+
| Prefix | Purpose |
88+
| --------------- | -------------------------------------------------------------------- |
89+
| `vbase` | Base for Vue 3 File with `<script setup>` No style |
90+
| `vbase-scss` | Base for Vue 3 File with `<script setup>` Style `SCSS` |
91+
| `vbase-sass` | Base for Vue 3 File with `<script setup>` Style `SASS` |
92+
| `vbase-less` | Base for Vue 3 File with `<script setup>` Style `LESS` |
93+
| `vbase-pcss` | Base for Vue 3 File with `<script setup>` Style `PostCSS` |
94+
| `vbase-css` | Base for Vue 3 File with `<script setup>` Style `CSS` |
95+
| `vbase-ts` | Base for Vue 3 File with `<script setup lang='ts'>`, No Style |
96+
| `vbase-ts-scss` | Base for Vue 3 File with `<script setup lang='ts'>`, Style `SCSS` |
97+
| `vbase-ts-sass` | Base for Vue 3 File with `<script setup lang='ts'>`, Style `SASS` |
98+
| `vbase-ts-less` | Base for Vue 3 File with `<script setup lang='ts'>`, Style `LESS` |
99+
| `vbase-ts-pcss` | Base for Vue 3 File with `<script setup lang='ts'>`, Style `PostCSS` |
100+
| `vbase-ts-css` | Base for Vue 3 File with `<script setup lang='ts'>`, Style `CSS` |
101+
| `vscript` | `<script setup>` |
102+
| `vscript-ts` | `<script setup lang='ts'>` |
103+
| `vtemplate` | `<template></template>` |
104+
| `vfor` | `v-for` statement |
105+
| `vslot-named` | `<template #name></template>` |
106+
107+
#### Components
108+
109+
| Prefix | Purpose |
110+
| ------------- | ------------------- |
111+
| `vtrans` | `<Transition>` |
112+
| `vtransgroup` | `<TransitionGroup>` |
113+
| `vkeepalive` | `<KeepAlive>` |
114+
| `vtp` | `<Teleport>` |
115+
| `vsuspense` | `<Suspense>` |
116+
117+
#### Scripts
134118

135119
| Prefix | Purpose |
136120
| ------------------ | --------------------------- |
@@ -154,6 +138,25 @@ Type part of a snippet, press `enter`, and the snippet unfolds.
154138
| `vdefineoptions` | Define Options |
155139
| `vdefinemodel` | Define Model |
156140

141+
#### Router
142+
143+
| `vrouter` | Vue Router base |
144+
| `vscrollbehavior` | Vue Router `scrollBehavior` |
145+
| `vbeforeeach` | Vue Router global guards `beforeEach` |
146+
| `vbeforeresolve` | Vue Router global guards `beforeResolve` |
147+
| `vaftereach` | Vue Router global guards `afterEach` |
148+
| `vbeforeenter` | Vue Router per-route guard `beforeEnter` |
149+
| `vbeforerouteenter` | Vue Router component guards `beforeRouteEnter` |
150+
| `vbeforerouteupdate` | Vue Router component guards `beforeRouteUpdate` |
151+
| `vbeforerouteleave` | Vue Router component guards `beforeRouteLeave` |
152+
153+
### Pinia
154+
155+
| Prefix | Purpose |
156+
| --------- | ------------------------------------------------------------ |
157+
| `pbase` | Base code needed for a Pinia store file |
158+
| `pbase-c` | Base code needed for a Pinia store file with Composition API |
159+
157160
## Contributing
158161

159162
This is an open source project open to anyone. Contributions are welcome [github](https://github.com/zhaolinlau/nuxt-vscode-snippets)

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"displayName": "Nuxt VS Code Snippets",
44
"description": "Supercharge your Nuxt development with powerful snippets",
55
"icon": "images/nuxt-logo.png",
6-
"version": "2.4.1",
6+
"version": "2.5.0",
77
"publisher": "zhaolinlau",
88
"license": "MIT",
99
"author": {

‎snippets/vue/vue-template.code-snippets

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,49 @@
2424
],
2525
"description": "v-for statement"
2626
},
27+
"Vue <Transition>": {
28+
"prefix": "vtrans",
29+
"body": [
30+
"<Transition>",
31+
"\t$0",
32+
"</Transition>"
33+
],
34+
"description": "<Transition> component"
35+
},
36+
"Vue <TransitionGroup>": {
37+
"prefix": "vtransgroup",
38+
"body": [
39+
"<TransitionGroup>",
40+
"\t$0",
41+
"</TransitionGroup>"
42+
],
43+
"description": "<TransitionGroup> component"
44+
},
45+
"Vue <KeepAlive>": {
46+
"prefix": "vkeepalive",
47+
"body": [
48+
"<KeepAlive>",
49+
"\t$0",
50+
"</KeepAlive>"
51+
],
52+
"description": "<KeepAlive> component"
53+
},
54+
"Vue <Teleport>": {
55+
"prefix": "vtp",
56+
"body": [
57+
"<Teleport to=\"${1}\">",
58+
"\t${2}",
59+
"</Teleport>"
60+
],
61+
"description": "<Teleport> component"
62+
},
63+
"Vue <Suspense>": {
64+
"prefix": "vsuspense",
65+
"body": [
66+
"<Teleport to=\"${1}\">",
67+
"\t${2}",
68+
"</Teleport>"
69+
],
70+
"description": "<Teleport> component"
71+
}
2772
}

0 commit comments

Comments
 (0)