As a developer tool, sdras/vue-vscode-snippets has picked up 1.3k stars on GitHub (JavaScript). These snippets were built to supercharge my workflow in the most seamless manner possible.
Snapshot summary built from the project's own GitHub metadata — there's no written TopGit review yet. The page will update automatically when a full review is published.
WHY NO REVIEW YET
TopGit writes full reviews for the most-starred, most-requested repositories. This page is a snapshot until then — see the READ ME tab for the original README in full.
These snippets were built to supercharge a workflow in the most seamless manner possible.
This repo was built particularly for real world use. It doesn't catalogue the API definitions, rather, it focuses on developer ergonomics from the point of Vue of real world use. Included are the pieces I personally get sick of typing, and boilerplate that is helpful to stub out quickly.
Versions Supported: Vue 2 and Vue 3
Installation
Either
click the extensions button (lowest square icon in the editor), and type in Vue VSCode Snippets, select the one by sdras
or
go here vscode Extensions Marketplace
ext install Vue VSCode Snippets
You can enable tab completion (recommended) by opening Code > Preferences > Settings (on a Mac) and applying "editor.tabCompletion": "onlySnippets" to your personal settings
Snippets
Vue
These snippets are meant to provide a base scaffold for your single file components (SFC).
Snippet
Purpose
vbase-3-ss
SFC base with script setup
vbase-3-ss-ts
SFC base with script setup and TypeScript
vbase
SFC base with SCSS
vbase-3
SFC Composition API with SCSS
vbase-3-setup
SFC setup Composition API with SCSS
vbase-3-setup
SFC setup Composition API with SCSS
vbase-3-reactive
SFC Composition API with Reactive and SCSS
vbase-css
SFC base with CSS
vbase-pcss
SFC base with PostCSS
vbase-styl
SFC base with Stylus
vbase-ts
SFC base with Typescript
vbase-ts-class
SFC base with Typescript Class Format
vbase-3-ts
SFC Composition API with Typescript
vbase-3-ts-setup
SFC setup Composition API with Typescript
vbase-ns
SFC with no styles
vbase-sass
SFC base with SASS
vbase-less
SFC base with LESS
Template
Snippet
Purpose
vfor
v-for directive
vmodel
Semantic v-model directive
vmodel-num
Semantic v-model number directive
von
v-on click handler with arguments
vslot-named
Named slot
vel-props
Component element with props
vsrc
Image src binding
vstyle
Inline style binding
vstyle-obj
Inline style binding with objects
vclass
Class binding
vclass-obj
Class binding with objects
vclass-obj-mult
Multiple conditional class bindings
vanim
Transition component with JS hooks
vnuxtl
Nuxt Routing Link
vroutename
router-link Named Routing
vroutenameparam
router-link Named with Parameters
vroutepath
router-link Path Routing Link
vemit-child
Emit event from child component
vemit-parent
Emit event to parent component
Script
Snippet
Purpose
vdata
Component data as a function
vmethod
Vue method
vcomputed
Vue computed property
vwatcher
Vue watcher with new and old value args
vbeforecreate
beforeCreate lifecycle method
vcreated
created lifecycle method
vbeforemount
beforeMount lifecycle method
vmounted
vmounted lifecycle method
vbeforeupdate
beforeUpdate lifecycle method
vupdated
updated lifecycle method
vbeforedestroy
beforeDestroy lifecycle method
vdestroyed
destroyed lifecycle method
vprops
Props with type and default
vimport
Import one component into another
vimport-dynamic
Import one component that should be lazy loaded by webpack
vcomponents
Import one component into another within the export statement
vimport-export
Import one component into another and use it within the export statement
vmapstate
import mapState from Vuex into vue component component
vmapgetters
import mapGetters from Vuex into vue component component
vmapmutations
import mapMutations from Vuex into vue component component
vmapactions
import mapActions from Vuex into vue component component
vfilter
Vue filter
vmixin
Create a Vue Mixin
vmixin-use
Bring a mixin into a component to use
vc-direct
Vue create a custom directive
vimport-lib
Import a library
vimport-gsap
Import GreenSock
vanimhook-js
Using the Transition component JS hooks in methods
vcommit
Commit to Vuex store in methods for mutation
vdispatch
Dispatch to Vuex store in methods for action
vtest
A simple unit testing component
Vue Composition API
Snippet
Purpose
v3reactive
Vue Composition API - reactive
v3reactive-setup
Vue Composition API - reactive with setup boilerplate
v3computed
Vue Composition API - computed
v3watch
Vue Composition API - watcher single source
v3watch-array
Vue Composition API - watch as array
v3watcheffect
Vue Composition API - watchEffect
v3ref
Vue Ref
v3onmounted
Lifecycle hook - onMounted
v3onbeforemount
Lifecycle hook - onBeforeMount
v3onbeforeupdate
Lifecycle hook - onBeforeUpdate
v3onupdated
Lifecycle hook - onUpdated
v3onerrorcaptured
Lifecycle hook - onErrorCaptured
v3onunmounted
Lifecycle hook - (destroyed) onUnmounted
v3onbeforeunmount
Lifecycle hook - (beforeDestroy) onBeforeUnmount
v3useinoptions
Use Composition API in Options API
Vuex
Snippet
Purpose
vstore
Base for Vuex store.js
vgetter
Vuex Getter
vmutation
Vuex Mutation
vaction
Vuex Action
vmodule
Vuex Module
vstore-import
Import vuex store into main.js
vstore2
Updated Base for Vuex store
Vue Router
Snippet
Purpose
vrouter
Vue Router base
vscrollbehavior
Vue Router scrollBehavior
vbeforeeach
Vue Router global guards beforeEach
vbeforeresolve
Vue Router global guards beforeResolve
vaftereach
Vue Router global guards afterEach
vbeforeenter
Vue Router per-route guard beforeEnter
vbeforerouteenter
Vue Router component guards beforeRouteEnter
vbeforerouteupdate
Vue Router component guards beforeRouteUpdate
vbeforerouteleave
Vue Router component guards beforeRouteLeave
Vue Config
Snippet
Purpose
vplugin
Import a plugin to main.js or plugins file
vconfig
vue.config.js file, example imports a sass file into every component
Nuxt Config
Snippet
Purpose
nfont
link to include fonts in a nuxt project, in nuxt-config
ncss
link to css assets such as normalize
Nuxt Page
Snippet
Purpose
nasyncdata
Nuxt asyncData
nasyncdataaxios
Nuxt asyncData with Axios module
nfetch
Nuxt Fetch
nfetchaxios
Nuxt Fetch with Axios module
nhead
Nuxt Head
nparam
Nuxt Route Params
Extra (plaintext)
Snippet
Purpose
gitignore
.gitignore file presets
Contributing
This is an open source project open to anyone. Contributions are welcome github
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!
Yes — sdras/vue-vscode-snippets ships under the MIT license, which makes its source code freely readable (and, depending on license terms, forkable and reusable). Source: github.com/sdras/vue-vscode-snippets.
What else is in the Developer Tools space?
sdras/vue-vscode-snippets is tracked by TopGit under the Developer Tools category, alongside 10 GitHub-tagged topics. Trending and Topics pages list peer repositories of comparable stars and language.
What is sdras/vue-vscode-snippets?
sdras/vue-vscode-snippets (sdras/vue-vscode-snippets) is a JavaScript project on GitHub. From the project's own README: These snippets were built to supercharge my workflow in the most seamless manner possible.
What license does sdras/vue-vscode-snippets use?
sdras/vue-vscode-snippets is released under the MIT license. Always verify the LICENSE file directly on GitHub for the authoritative terms — license strings can be edited out of sync with a project's actual stance.
Where can I see sdras/vue-vscode-snippets in action?
The project maintains a homepage at https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets. The README tab on this page also usually contains screenshots and a quickstart.
Where do I read more about sdras/vue-vscode-snippets?
This TopGit page is a snapshot — the READ ME tab shows the project's own README content (links stripped, images preserved). The GitHub repository at github.com/sdras/vue-vscode-snippets is the definitive source.
Why is sdras/vue-vscode-snippets categorized under Developer Tools?
TopGit places sdras/vue-vscode-snippets in the Developer Tools category based on its GitHub topics and description (tagged: "snippets", "vscode", "vscode-extension"). Categories are assigned from real repository metadata, not editorial guesswork.
Read full README in the tab above.
Is vue-vscode-snippets worth your time?
ChatGPT, Claude and Perplexity can all read this page. Ask one of them what it makes of vue-vscode-snippets.
/vue-vscode-snippets
