indielayer/vscode-vue-snippets

Indielayer VSCode Vue Snippets

MIT

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