Home

Awesome

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

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

These snippets are meant to provide a base scaffold for your single file components (SFC).

SnippetPurpose
vbase-3-ssSFC base with script setup
vbase-3-ss-tsSFC base with script setup and TypeScript
vbaseSFC base with SCSS
vbase-3SFC Composition API with SCSS
vbase-3-setupSFC setup Composition API with SCSS
vbase-3-setupSFC setup Composition API with SCSS
vbase-3-reactiveSFC Composition API with Reactive and SCSS
vbase-cssSFC base with CSS
vbase-pcssSFC base with PostCSS
vbase-stylSFC base with Stylus
vbase-tsSFC base with Typescript
vbase-ts-classSFC base with Typescript Class Format
vbase-3-tsSFC Composition API with Typescript
vbase-3-ts-setupSFC setup Composition API with Typescript
vbase-nsSFC with no styles
vbase-sassSFC base with SASS
vbase-lessSFC base with LESS

Template

SnippetPurpose
vforv-for directive
vmodelSemantic v-model directive
vmodel-numSemantic v-model number directive
vonv-on click handler with arguments
vslot-namedNamed slot
vel-propsComponent element with props
vsrcImage src binding
vstyleInline style binding
vstyle-objInline style binding with objects
vclassClass binding
vclass-objClass binding with objects
vclass-obj-multMultiple conditional class bindings
vanimTransition component with JS hooks
vnuxtlNuxt Routing Link
vroutenamerouter-link Named Routing
vroutenameparamrouter-link Named with Parameters
vroutepathrouter-link Path Routing Link
vemit-childEmit event from child component
vemit-parentEmit event to parent component

Script

SnippetPurpose
vdataComponent data as a function
vmethodVue method
vcomputedVue computed property
vwatcherVue watcher with new and old value args
vbeforecreatebeforeCreate lifecycle method
vcreatedcreated lifecycle method
vbeforemountbeforeMount lifecycle method
vmountedvmounted lifecycle method
vbeforeupdatebeforeUpdate lifecycle method
vupdatedupdated lifecycle method
vbeforedestroybeforeDestroy lifecycle method
vdestroyeddestroyed lifecycle method
vpropsProps with type and default
vimportImport one component into another
vimport-dynamicImport one component that should be lazy loaded by webpack
vcomponentsImport one component into another within the export statement
vimport-exportImport one component into another and use it within the export statement
vmapstateimport mapState from Vuex into vue component component
vmapgettersimport mapGetters from Vuex into vue component component
vmapmutationsimport mapMutations from Vuex into vue component component
vmapactionsimport mapActions from Vuex into vue component component
vfilterVue filter
vmixinCreate a Vue Mixin
vmixin-useBring a mixin into a component to use
vc-directVue create a custom directive
vimport-libImport a library
vimport-gsapImport GreenSock
vanimhook-jsUsing the Transition component JS hooks in methods
vcommitCommit to Vuex store in methods for mutation
vdispatchDispatch to Vuex store in methods for action
vtestA simple unit testing component

Vue Composition API

SnippetPurpose
v3reactiveVue Composition API - reactive
v3reactive-setupVue Composition API - reactive with setup boilerplate
v3computedVue Composition API - computed
v3watchVue Composition API - watcher single source
v3watch-arrayVue Composition API - watch as array
v3watcheffectVue Composition API - watchEffect
v3refVue Ref
v3onmountedLifecycle hook - onMounted
v3onbeforemountLifecycle hook - onBeforeMount
v3onbeforeupdateLifecycle hook - onBeforeUpdate
v3onupdatedLifecycle hook - onUpdated
v3onerrorcapturedLifecycle hook - onErrorCaptured
v3onunmountedLifecycle hook - (destroyed) onUnmounted
v3onbeforeunmountLifecycle hook - (beforeDestroy) onBeforeUnmount
v3useinoptionsUse Composition API in Options API

Vuex

SnippetPurpose
vstoreBase for Vuex store.js
vgetterVuex Getter
vmutationVuex Mutation
vactionVuex Action
vmoduleVuex Module
vstore-importImport vuex store into main.js
vstore2Updated Base for Vuex store

Vue Router

SnippetPurpose
vrouterVue Router base
vscrollbehaviorVue Router scrollBehavior
vbeforeeachVue Router global guards beforeEach
vbeforeresolveVue Router global guards beforeResolve
vaftereachVue Router global guards afterEach
vbeforeenterVue Router per-route guard beforeEnter
vbeforerouteenterVue Router component guards beforeRouteEnter
vbeforerouteupdateVue Router component guards beforeRouteUpdate
vbeforerouteleaveVue Router component guards beforeRouteLeave

Vue Config

SnippetPurpose
vpluginImport a plugin to main.js or plugins file
vconfigvue.config.js file, example imports a sass file into every component

Nuxt Config

SnippetPurpose
nfontlink to include fonts in a nuxt project, in nuxt-config
ncsslink to css assets such as normalize

Nuxt Page

SnippetPurpose
nasyncdataNuxt asyncData
nasyncdataaxiosNuxt asyncData with Axios module
nfetchNuxt Fetch
nfetchaxiosNuxt Fetch with Axios module
nheadNuxt Head
nparamNuxt Route Params

Extra (plaintext)

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