https://github.com/kkostov/vue-atom-snippets
Vue snippets to 🚀 my daily Vue workflow. Originally a port of the excellent https://github.com/sdras/vue-vscode-snippets
https://github.com/kkostov/vue-atom-snippets
atom atom-extension atom-snippets atom-vue nuxt nuxt-snippets snippets vue-snippets vue2 vuejs vuejs2 vuex vuex-snippets
Last synced: 4 months ago
JSON representation
Vue snippets to 🚀 my daily Vue workflow. Originally a port of the excellent https://github.com/sdras/vue-vscode-snippets
- Host: GitHub
- URL: https://github.com/kkostov/vue-atom-snippets
- Owner: kkostov
- License: mit
- Created: 2017-12-31T11:34:14.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2020-01-17T06:43:27.000Z (almost 6 years ago)
- Last Synced: 2025-07-09T09:50:45.963Z (5 months ago)
- Topics: atom, atom-extension, atom-snippets, atom-vue, nuxt, nuxt-snippets, snippets, vue-snippets, vue2, vuejs, vuejs2, vuex, vuex-snippets
- Homepage:
- Size: 16.6 KB
- Stars: 8
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Atom Snippets
## Description
This package is an Atom port of the excellent [`Vue VSCode Snippets`](https://github.com/sdras/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` and `nuxt`. This is just a baseline, others may added as needed.
## Plugin installation
`apm install vue-atom-snippets`
## Availability
The snippets provided by the plugin will be available in all **.vue** files as well as **.js** (e.g. `nuxt.config.js`).
## Snippets
### Vue
| Snippet | Purpose |
| ------- | -------------------------- |
| `vbase` | Single file component base |
### Template
| 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 |
### 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 |
| `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 |
### Vuex
| 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 |
### Nuxt Config
| 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 |
### Nuxt Page
| Snippet | Purpose |
| ------- | ------------------------------------------------------- |
| `nasyncdata` | Nuxt asyncData |
| `nfetch` | Nuxt Fetch |
| `nhead` | Nuxt Head |
### Extra (plaintext)
| Snippet | Purpose |
| ----------- | ----------------------- |
| `gitignore` | .gitignore file presets |