These snippets were built to supercharge my workflow in the most seamless manner possible.

Overview

Vue VSCode Snippets

vue-snippet-hero

Description

These snippets were built to supercharge a workflow in the most seamless manner possible.

This repo was built particularly for real world use. It doesn't catalogue the API definitions, rather, it focuses on developer ergonomics from the point of Vue of real world use. Included are the pieces I personally get sick of typing, and boilerplate that is helpful to stub out quickly.

Versions Supported: Vue 2 and Vue 3

SnippetDemo

Installation

Either

  • click the extensions button (lowest square icon in the editor), and type in Vue VSCode Snippets, select the one by sdras

or

ext install Vue VSCode Snippets

You can enable tab completion (recommended) by opening Code > Preferences > Settings (on a Mac) and applying "editor.tabCompletion": "onlySnippets" to your personal settings

Snippets

Vue

Snippet Purpose
vbase Single file component base with SCSS
vbase-3 Single File component Composition API with SCSS
vbase-3-setup Single File component setup Composition API with SCSS
vbase-3-reactive Single File component Composition API with Reactive and SCSS
vbase-css Single file component base with CSS
vbase-pcss Single file component base with PostCSS
vbase-styl Single file component base with Stylus
vbase-ts Single file component base with Typescript
vbase-ts-class Single file component base with Typescript Class Format
vbase-3-ts Single File component Composition API with Typescript
vbase-3-ts-setup Single File component setup Composition API with Typescript
vbase-ns Single file component with no styles
vbase-sass Single file component base with SASS
vbase-less Single file component base with LESS

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
vslot-named Named slot
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
vroutename router-link Named Routing
vroutenameparam router-link Named with Parameters
vroutepath router-link Path Routing Link
vemit-child Emit event from child component
vemit-parent Emit event to parent component

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
vbeforecreate beforeCreate lifecycle method
vcreated created lifecycle method
vbeforemount beforeMount lifecycle method
vmounted vmounted lifecycle method
vbeforeupdate beforeUpdate lifecycle method
vupdated updated lifecycle method
vbeforedestroy beforeDestroy lifecycle method
vdestroyed destroyed lifecycle method
vprops Props with type and default
vimport Import one component into another
vimport-dynamic Import one component that should be lazy loaded by webpack
vcomponents Import one component into another within the export statement
vimport-export Import one component into another and use it within the export statement
vmapstate import mapState from Vuex into vue component component
vmapgetters import mapGetters from Vuex into vue component component
vmapmutations import mapMutations from Vuex into vue component component
vmapactions import mapActions from Vuex into vue component component
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
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

Vue Composition API

Snippet Purpose
v3reactive Vue Composition API - reactive
v3reactive-setup Vue Composition API - reactive with setup boilerplate
v3computed Vue Composition API - computed
v3watch Vue Composition API - watcher single source
v3watch-array Vue Composition API - watch as array
v3watcheffect Vue Composition API - watchEffect
v3ref Vue Ref
v3onmounted Lifecycle hook - onMounted
v3onbeforemount Lifecycle hook - onBeforeMount
v3onbeforeupdate Lifecycle hook - onBeforeUpdate
v3onupdated Lifecycle hook - onUpdated
v3onerrorcaptured Lifecycle hook - onErrorCaptured
v3onunmounted Lifecycle hook - (destroyed) onUnmounted
v3onbeforeunmount Lifecycle hook - (beforeDestroy) onBeforeUnmount
v3useinoptions Use Composition API in Options API

Vuex

Snippet Purpose
vstore Base for Vuex store.js
vgetter Vuex Getter
vmutation Vuex Mutation
vaction Vuex Action
vmodule Vuex Module
vstore-import Import vuex store into main.js
vstore2 Updated Base for Vuex store

Vue Router

Snippet Purpose
vrouter Vue Router base
vscrollbehavior Vue Router scrollBehavior
vbeforeeach Vue Router global guards beforeEach
vbeforeresolve Vue Router global guards beforeResolve
vaftereach Vue Router global guards afterEach
vbeforeenter Vue Router per-route guard beforeEnter
vbeforerouteenter Vue Router component guards beforeRouteEnter
vbeforerouteupdate Vue Router component guards beforeRouteUpdate
vbeforerouteleave Vue Router component guards beforeRouteLeave

Vue Config

Snippet Purpose
vplugin Import a plugin to main.js or plugins file
vconfig vue.config.js file, example imports a sass file into every component

Nuxt Config

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

Nuxt Page

Snippet Purpose
nasyncdata Nuxt asyncData
nasyncdataaxios Nuxt asyncData with Axios module
nfetch Nuxt Fetch
nfetchaxios Nuxt Fetch with Axios module
nhead Nuxt Head
nparam Nuxt Route Params

Extra (plaintext)

Snippet Purpose
gitignore .gitignore file presets

Contributing

This is an open source project open to anyone. Contributions are welcome github

If you are contributing a snippet, please be sure to add the documentation for it in the tables in the README, the pull request cannot be accepted without this addition. Thanks!

Issues
  • vbase dont work on win10

    vbase dont work on win10

    image

    The first time I typed this command after install this snippet works well, but it only works well once.

    opened by ThunderboltSmile 10
  • feat(vue3) add composition api

    feat(vue3) add composition api

    This PR is for some composition api snippets. I made a call to prefix with v3 but open for bikeshedding. The autocomplete in vscode is good enough that typing vwatch would still show you the v3 results.

    • added v3 to all snippet prefix so that it's easier to filter e.g.: image
    • vbase- did not prefix with v3 because vbase is ingrained and so I figured it'd be helpful to give it some priority when opening a new file.

    May-11-2020 16-09-25

    opened by darrenjennings 6
  • Added vBase with no styles

    Added vBase with no styles

    Sarah, thanks for the wonderful package. If we could add this vbase with no styles that would be awesome. loader does some things when styles is present but is empty that we have to avoid in our build routine and this would save us some highlight+delete time :)

    opened by dolbex 5
  • pug snippets do not work

    pug snippets do not work

    I've not been able to use any of the pug snippets. I guess, it could be related to the snippet configuration. Can you check it?

    opened by teleyinex 4
  • Remove reference to plaintext.json

    Remove reference to plaintext.json

    I'm using this extension in Neovim with coc-snippets. After installing, I get this error:

    [coc.nvim] Error on load snippets: ENOENT: no such file or directory, open '/Users/joshukraine/.config/coc/extensions/node_modules/vue-vscode-snippets/snippets/plaintext.json'

    I believe snippets/plaintext.json was renamed in this commit: https://github.com/sdras/vue-vscode-snippets/commit/499f5ef35d1a1c066fcdd5207d4f02e2bcaacba7

    Removing the reference in package.json resolves the error.

    Thank you for these great snippets! 🙂👍🏻

    opened by joshukraine 4
  • Typescript Support

    Typescript Support

    It would be nice if these were available to typescript code as well.

    With vetur, typescript snippets will work in a