Indielayer Vue Snippets
This extension for Visual Studio Code add snippets for Vue 2 and Vue 3.
Preview
Installation
- Open Extensions sidebar panel in Visual Studio Code.
View → Extensions
- Search for
Indielayer Vue Snippets
- Click Install
Snippets
Vue
| Snippet |
Purpose |
template |
Single File Component base |
script |
Single File Component Composition API |
script:ts |
Single File Component Composition API (Typescript) |
setup |
Single File Component with Setup attribute |
setup:ts |
Single File Component with Setup attribute (Typescript) |
style |
Scoped style |
postcss |
Scoped style with PostCSS |
sass |
Scoped style with SASS |
scss |
Scoped style with SCSS |
stylus |
Scoped style with Stylus |
less |
Scoped style with Less |
Template
| Snippet |
Purpose |
template |
Empty template tag |
component |
Dynamic component |
slot |
Empty slot tag |
vfor |
v-for directive |
vmodel |
v-model directive |
vmemo |
v-memo directive |
vteleport |
Teleport component |
vtransition |
Transition component with JS Hooks |
vkeepalive |
KeepAlive component |
Javascript / Typescript
| Snippet |
Purpose |
vplugin |
Base for vue 3 plugin |
vcomputed |
computed(() => ) |
vwatch |
watch(, (newValue, oldValue) => {}) |
veffect |
watchEffect(() => {}) |
vmounted |
onMounted(() => {}) |
vunmounted |
onUnmounted(() => {}) |
vupdated |
onUpdated(() => {}) |
Feedback
If you have suggestions, please open an issue or better yet, a pull request.
Be nice.
Credits
This extension was inspired by the snippets of Vetur and Sarah Drasner.
Author
Authored by João Teixeira
| |
