Vue Snippets

Description

A collection of VUE snippets for Brackets editor.

Installation

#### Git Clone
1. Under main menu select Help > Show Extensions Folder
2. Git clone this repository inside the folder user.

#### Extension Manager
1. Under main menu select File > Extension Manager...
2. Search for "Vue snippets"
3. Click "Install"

How to use

1. Enable Vue Snippets

Under main menu select Edit > Enable Vue Snippets or
open the Preferences File and add "vue-snippets.enabled": true.
2. Enter a snippet and hit the Space key.

Snippets

$3

| Snippet | Purpose |
| ------- | -------------------------- |
| vbase | Single file component base |

$3

| 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 |

$3

| 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 |
| vdispatch | Dispatch to Vuex store in methods for action |
| vtest | A simple unit testing component |
| vinc | incrementer |
| vdec | decrementer |

$3

| Snippet | Purpose |
| --------------- | ------------------------------ |
| vstore | Base for Vuex store.js |
| vgetter | Vuex Getter |
| vmutation | Vuex Mutation |
| vaction | Vuex Action |
| vstoreImport | Import vuex store into main.js |

$3

| Snippet | Purpose |
| ------- | ------------------------------------------------------- |
| nfont | link to include fonts in a nuxt project, in nuxt-config |
| ncss | link to css assets such as normalize |

$3

---

- vue-vscode-snippets - Sarah Drasner - https://github.com/sdras/vue-vscode-snippets
- brackets-jade-snippets - George Raptis - https://github.com/georapbox/brackets-jade-snippets

Thank you all!!!