Vue integrated Snippets

#vue-integrated-snippets

To Be Best Vue VSCode Snippets

Description

First,Thanks to Sarah Drasner,this plugin is based on her open source github.

Second,the targe is to integrate all useful snippets from anyone.

Installation

Either

click the extensions button (lowest square icon in the editor), and type in Vue Integrated Snippets, select the one by panda

go here vscode Extensions Marketplace

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

Volar Usage

This extension works out of the box with Vetur, but if you would rather use Volar, either remove extensionDependencies or set it to volar instead of vetur. You can find this file in the extensions package.json

Snippets

Vue

Snippet	Purpose
`vue`	Single file component base with SCSS
`vue3`	Single File component Composition API with SCSS
`vue3Setup`	Single File component setup Composition API with SCSS
`vue3Reactive`	Single File component Composition API with Reactive and SCSS
`vueCss`	Single file component base with CSS
`vuePcss`	Single file component base with PostCSS
`vueStyl`	Single file component base with Stylus
`vueTs`	Single file component base with Typescript
`vueTsClass`	Single file component base with Typescript Class Format
`vue3Ts`	Single File component Composition API with Typescript
`vue3TsSetup`	Single File component setup Composition API with Typescript
`vueNs`	Single file component with no styles
`vuesass`	Single file component base with SASS
`vueless`	Single file component base with LESS
`vueAddLess`	Add less style block to Single file component

Vue-Ts

Snippet	Purpose
`vTsComponents`	{ components: { } }
`vTsProp`	@Prop()
`vTsWatch`	@Watch() onWatch(){}
`vTsWatchWithOptions`	@Watch('',{ immediate: true, deep: true }) onWatch(){}
`vTsWatchImmediate`	{ immediate: true }
`vTsWatchDeep`	{ deep: true }
`vTsWatchDeepOrImme`	{ deep	immediate: true }
`vTsWatchClipboard`	@Watch($CLIPBOARD) onWatch${CLIPBOARD}(){}
`vTsGet`	get $1 () {return $2}
`vTsBeforecreate`	beforeCreate (){}
`vTsCreated`	created (){}
`vTsBeforeMount`	beforeMount (){}
`vTsMounted`	mounted (){}
`vTsBeforeUpdate`	beforeUpdate (){}
`vTsUpdated`	updated (){}
`vTsBeforeDestroy`	beforeDestroy (){}
`vTsDestroyed`	destroyed (){}
`vueImport@`	import from '@'
`vTsImportDynamic`	$1: () => import('@/components')

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
`vbindattrs`	v-bind="$attrs"
`vonlisteners`	v-on="$listeners"

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

Vuex Typescript

Snippet	Purpose
`vuexTsLib`	import { Getter } from 'vuex-class'
`vuexTsTmpl`	create base vuex typescript module
`vuexTsGetterByClipboard`	@Getter($CLIPBOARD) $CLIPBOARD: string

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

panda