![vue-snippet-hero](https://camo.githubusercontent.com/5f2349f3660bacd22248973084afc74b9706eb754ab0b44f2b9b8a3d28ce9250/68747470733a2f2f73332d75732d776573742d322e616d617a6f6e6177732e636f6d2f732e6364706e2e696f2f32383936332f7675652d736e69707065742d6865726f2e676966)
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
![SnippetDemo](https://camo.githubusercontent.com/47c5e4c22492d557dafd8bd4ad03ea9ef4a20679c8fb53f2548f5f722e0c965e/68747470733a2f2f73332d75732d776573742d322e616d617a6f6e6177732e636f6d2f732e6364706e2e696f2f32383936332f536e697070657444656d6f2e676966)
Either
- click the extensions button (lowest square icon in the editor), and type in Vue VSCode Snippets, select the one by sdras
or
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
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 |
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 |
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 |
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 |
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 |
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 |
Snippet |
Purpose |
nfont |
link to include fonts in a nuxt project, in nuxt-config |
ncss |
link to css assets such as normalize |
Snippet |
Purpose |
nasyncdata |
Nuxt asyncData |
nfetch |
Nuxt Fetch |
nhead |
Nuxt Head |
Extra (plaintext)
Snippet |
Purpose |
gitignore |
.gitignore file presets |
This is an open source project open to anyone. Contributions are welcome github