This package is an Atom port of the excellent Vue VSCode Snippets by @sdras.
My main motivation for creating this package is that I often need to switch between Atom and VSCode and I really, really love the snippets Sarah Drasner crafted for VSCode.
The goals of this package are
To remain compatible with the
vue-vscode-snippets- all prefixes from the original repository should be available and should produce the same output.Implement Atom-specific tweaks and improvements which can help productivity.
The package does not aim to become an "ubermegablob" of snippets but rather focus on parts which are useful in every day code work.
The scope of the snippets is the core ecosystem around Vue, including
vue,vuex,vue-routerandnuxt. This is just a baseline, others may added as needed.
apm install vue-atom-snippets
The snippets provided by the plugin will be available in all .vue files as well as .js (e.g. nuxt.config.js).
| Snippet | Purpose |
|---|---|
vbase | Single file component base |
| 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 |
| 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 |
vimport-c | Import one component into another within the export statement |
vimport-export | Import one component into another and use it within the export statement |
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 |
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 |
vstore-import | 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 |
nmod | add module entry |
nplugs | add plugins for global level functionality |
nplug | add a plugin to the plugins section |
| Snippet | Purpose |
|---|---|
nasyncdata | Nuxt asyncData |
nfetch | Nuxt Fetch |
nhead | Nuxt Head |
| Snippet | Purpose |
|---|---|
gitignore | .gitignore file presets |