These snippets were built to supercharge my workflow in the most seamless manner possible.
This repo was built particularly for real world use. It doesn't catalogue the API definitions, and it's not a kitchen sink approach. 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, have to keep looking up, or forget to consider while developing that I make more use of when they're at my fingertips.
Current version: Vue2
Installation
Either
click the extensions button (lowest square icon in the editor), and type in Vue VSCode Snippets, select the one by sdras
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
Snippet
Purpose
vbase
Single file component base with SCSS
vbase-css
Single file component base with CSS
vbase-pcss
Single file component base with PostCSS
vbase-styl
Single file component base with Stylus
vbase-ts
Single file component base with Typescript
vbase-ns
Single file component with no styles
vbase-sass
Single file component base with SASS
vbase-less
Single file component 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
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
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 with Timeline and Eases
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
vinc
incrementer
vdec
decrementer
vconfig
vue.config.js file, example imports a sass file into every component
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
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
nfetch
Nuxt Fetch
nhead
Nuxt Head
Extra (plaintext)
Snippet
Purpose
gitignore
.gitignore file presets
Contributing
This is an open source project open to anyone. Contributions are welcome github
This PR is for some composition api snippets. I made a call to prefix with v3 but open for bikeshedding. The autocomplete in vscode is good enough that typing vwatch would still show you the v3 results.
added v3 to all snippet prefix so that it's easier to filter e.g.:
vbase- did not prefix with v3 because vbase is ingrained and so I figured it'd be helpful to give it some priority when opening a new file.
Sarah, thanks for the wonderful package. If we could add this vbase with no styles that would be awesome. loader does some things when styles is present but is empty that we have to avoid in our build routine and this would save us some highlight+delete time :)
Because more and more projects like antfu/vitesse adopt script first order in Vue and eslint-plugin-vue also have vue/component-tags-order to limit script, template and style tag order.
So I add vbase-3-setup-first and vbase-3-ts-setup-first snippets.
This PR moves the script section of the Composition API snippets to the top, above the template section. I understand that this change is very subjective, so if the current layout is preferred, feel free to close this PR.
Feel free to make suggestions. Another possibility would be have separate snippets where the script section is at the top and keeping the originals. If that would be preferable, I'll happily adjust this PR so we have both styles :)
I just logged on to start working - and now every single vue file in my project is getting marked with an error message from Volar on every single line, even though I've been using Vetur for my project. This extension was being marked as the culprit. Can you please revert whatever changes you made?
