@phoenix-plugin-registry/vue-snippets

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

Vue

Snippet	Purpose
vbase	Single file component base

Template

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

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

Vuex

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

Nuxt Config

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

Credits

---

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