Indielayer Vue Snippets

This extension for Visual Studio Code add snippets for Vue 2 and Vue 3.

Preview

Installation

1. Open Extensions sidebar panel in Visual Studio Code. View → Extensions
2. Search for Indielayer Vue Snippets
3. 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