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-router
andnuxt
. 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 |
vdispatch |
Dispatch 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 |