A collection of VUE snippets for Brackets editor.
- Under main menu select Help > Show Extensions Folder
- Git clone this repository inside the folder user.
- Under main menu select File > Extension Manager...
- Search for "Vue snippets"
- Click "Install"
- Enable Vue Snippets
Under main menu select Edit > Enable Vue Snippets or
open the Preferences File and add "vue-snippets.enabled": true. - Enter a snippet and hit the
Space
key.
Snippet | Purpose |
---|---|
vbase | Single file component base |
Snippet | Purpose |
---|---|
vfor | v-for directive |
vmodel | Semantic v-model directive |
vmodelNum | Semantic v-model number directive |
von | v-on click handler with arguments |
velProps | Component element with props |
vsrc | Image src binding |
vstyle | Inline style binding |
vstyleObj | Inline style binding with objects |
vclass | Class binding |
vclassObj | Class binding with objects |
vclassObjMult | Multiple conditional class bindings |
vanim | Transition component with JS hooks |
vnuxtl | Nuxt 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 |
vprops | Props with type and default |
vimport | Import one component into another |
vcomponents | Import one component into another within the export statement |
vimportExport | Import one component into another and use it within the export statement |
vfilter | Vue filter |
vmixin | Create a Vue Mixin |
vmixinUse | Bring a mixin into a component to use |
vcDirect | Vue create a custom directive |
vimportLib | Import a library |
vimportGsap | Import GreenSock with Timeline and Eases |
vanimhookJS | Using the Transition component JS hooks in methods |
vcommit | Commit to Vuex store in methods for mutation |
vdis | Dis to Vuex store in methods for action |
vtest | A simple unit testing component |
vinc | incrementer |
vdec | decrementer |
Snippet | Purpose |
---|---|
vstore | Base for Vuex store.js |
vgetter | Vuex Getter |
vmutation | Vuex Mutation |
vaction | Vuex Action |
vstoreImport | Import vuex store into main.js |
Snippet | Purpose |
---|---|
nfont | link to include fonts in a nuxt project, in nuxt-config |
ncss | link to css assets such as normalize |
- vue-vscode-snippets - Sarah Drasner - https://.com/sdras/vue-vscode-snippets
- brackets-jade-snippets - George Raptis - https://.com/georapbox/brackets-jade-snippets
Thank you all!!!