Vue3 Snippets Highlight Formatters For Visual Studio Code

Vue3 Snippets, Contains code highlighting, code snippets and formatting commonly used in vue2 and vue3.

You can turn on the statusbar Auto Format Vue switch at the bottom of vscode, which allows you to automatically format the vue file when you write it.

Or right-click to display the drop-down menu panel, click the Format Document menu item to format.

Snippets

Vue 3 Snippets

Including most of the API of Vue3. You can type reactive, choose reactive, and press ENTER, then const data = reactive({...}) appear on the screen.

Prefix	JavaScript Snippet Content
import	import {...} from "@vue/composition-api"
import	import {...} from 'vue'
newVue	newVue({...})
defineComponent	defineComponent({...})
export	export default { ... }
setup	setup(${...}) {...}
reactive	const data = reactive({...})
watch	watch(..., ...)
watchFn	watch(() => {...})
computed	computed(() => { get: () => {...}, set: () => {...}})
toRefs	toRefs(...)
ref	ref(...)
props	props(...)
onBeforeMount	onBeforeMount(...)
onMounted	onMounted(...)
onBeforeUpdate	onBeforeUpdate(...)
onUpdated	onUpdated(...)
onBeforeUnmount	onBeforeUnmount(...)
onUnmounted	onUnmounted(...)
onErrorCaptured	onErrorCaptured(...)

Vue 2 Snippets

All code snippets of Vue 2 Snippets are also included here.

Prefix	JavaScript Snippet Content
import	import ... from ...
newVue	new Vue({...})
VueConfigSilent	Vue.config.silent = true
VueConfigOptionMergeStrategies	Vue.config.optionMergeStrategies
VueConfigDevtools	Vue.config.devtools = true
VueConfigErrorHandler	Vue.config.errorHandler = function (err, vm, info) {...}
VueConfigWarnHandler	Vue.config.warnHandler = function (msg, vm, trace) {...}
VueConfigIgnoredElements	Vue.config.ignoredElements = [''] \
VueConfigKeyCodes	Vue.config.keyCodes
VueConfigPerformance	Vue.config.performance = true
VueConfigProductionTip	Vue.config.productionTip = false
vueExtend	Vue.extend( options )
VueNextTick	Vue.nextTick( callback, [context] )
VueNextTickThen	Vue.nextTick( callback, [context] ).then(function(){ })
VueSet	Vue.set( target, key, value )
VueDelete	Vue.delete( target, key )
VueDirective	Vue.directive( id, [definition] )
VueFilter	Vue.filter( id, [definition] )
VueComponent	Vue.component( id, [definition] )
VueUse	Vue.use( plugin )
VueMixin	Vue.mixin({ mixin })
VueCompile	Vue.compile( template )
VueVersion	Vue.version
data	data() { return {} }
watchWithOptions	key: { deep: true, immediate: true, handler: function () { } }
vmData	${this, vm}.$data
vmProps	${this, vm}.$props
vmEl	${this, vm}.$el
vmOptions	${this, vm}.$options
vmParent	${this, vm}.$parent
vmRoot	${this, vm}.$root
vmChildren	${this, vm}.$children
vmSlots	${this, vm}.$slots
vmScopedSlots	${this, vm}.$scopedSlots.default({})
vmRefs	${this, vm}.$refs
vmIsServer	${this, vm}.$isServer
vmAttrs	${this, vm}.$attrs
vmListeners	${this, vm}.listeners
vmWatch	${this, vm}.$watch( expOrFn, callback, [options] )
vmSet	${this, vm}.$set( object, key, value )
vmDelete	${this, vm}.$delete( object, key )
vmOn	${this, vm}.$on( event, callback )
vmOnce	${this, vm}.$once( event, callback )
vmOff	${this, vm}.$off( [event, callback] )
vmEmit	${this, vm}.$emit( event, […args] )
vmMount	${this, vm}.$mount( [elementOrSelector] )
vmForceUpdate	${this, vm}.$forceUpdate()
vmNextTick	${this, vm}.$nextTick( callback )
vmDestroy	${this, vm}.$destroy()
renderer	const renderer = require('vue-server-renderer').createRenderer()
createRenderer	createRenderer({ })
preventDefault	preventDefault();
stopPropagation	stopPropagation();

Prefix	HTML Snippet Content
template	<template></template>
script	<script></script>
style	<style></style>
vText	v-text=msg
vHtml	v-html=html
vShow	v-show
vIf	v-if
vElse	v-else
vElseIf	v-else-if
vForWithoutKey	v-for
vFor	v-for="" :key=""
vOn	v-on
vBind	v-bind
vModel	v-model
vPre	v-pre
vCloak	v-cloak
vOnce	v-once
key	:key
ref	ref
slotA	slot=""
slotE	<slot></slot>
slotScope	slot-scope=""
component	<component :is=''></component>
keepAlive	<keep-alive></keep-alive>
transition	<transition></transition>
transitionGroup	<transition-group></transition-group>
enterClass	enter-class=''
leaveClass	leave-class=''
appearClass	appear-class=''
enterToClass	enter-to-class=''
leaveToClass	leave-to-class=''
appearToClass	appear-to-class=''
enterActiveClass	enter-active-class=''
leaveActiveClass	leave-active-class=''
appearActiveClass	appear-active-class=''
beforeEnterEvent	@before-enter=''
beforeLeaveEvent	@before-leave=''
beforeAppearEvent	@before-appear=''
enterEvent	@enter=''
leaveEvent	@leave=''
appearEvent	@appear=''
afterEnterEvent	@after-enter=''
afterLeaveEvent	@after-leave=''
afterAppearEvent	@after-appear=''
enterCancelledEvent	@enter-cancelled=''
leaveCancelledEvent	@leave-cancelled=''
appearCancelledEvent	@appear-cancelled=''

Prefix	Vue Router Snippet Content
routerLink	<router-link></router-link>
routerView	<router-view></router-view>
to	to=""
tag	tag=""
newVueRouter	const router = newVueRouter({ })
routerBeforeEach	router.beforeEach((to, from, next) => { }
routerBeforeResolve	router.beforeResolve((to, from, next) => { }
routerAfterEach	router.afterEach((to, from) => { }
routerPush	router.push()
routerReplace	router.replace()
routerGo	router.back()
routerBack	router.push()
routerForward	router.forward()
routerGetMatchedComponents	router.getMatchedComponents()
routerResolve	router.resolve()
routerAddRoutes	router.addRoutes()
routerOnReady	router.onReady()
routerOnError	router.onError()
routes	routes: []
beforeEnter	beforeEnter: (to, from, next) => { }
beforeRouteEnter	beforeRouteEnter (to, from, next) { }
beforeRouteLeave	beforeRouteLeave (to, from, next) { }
scrollBehavior	scrollBehavior (to, from, savedPosition) { }

Prefix	Vuex Snippet Content
newVuexStore	const store = new Vuex.Store({ })

Prefix	Nuxt.js Snippet Content
nuxt	<nuxt/>
nuxtChild	<nuxt-child/>
nuxtLink	<nuxt-link to=""/>
asyncData	asyncData() {}

Extension Settings

Use Prettier's config.

vue3snippets.arrowParens
vue3snippets.bracketSpacing
vue3snippets.endOfLine
vue3snippets.htmlWhitespaceSensitivity
vue3snippets.insertPragma
vue3snippets.jsxBracketSameLine
vue3snippets.jsxSingleQuote
vue3snippets.printWidth
vue3snippets.proseWrap
vue3snippets.quoteProps
vue3snippets.requirePragma
vue3snippets.semi
vue3snippets.singleQuote
vue3snippets.tabWidth
vue3snippets.trailingComma
vue3snippets.useTabs
vue3snippets.vueIndentScriptAndStyle

Key	Example	Default
vue3snippets.printWidth	10/20/30/40/n	80
vue3snippets.tabWidth	1/2/3/4/n	2
vue3snippets.singleQuote	false/true	false
vue3snippets.trailingComma	none/es5/all	es5
vue3snippets.bracketSpacing	true	true
vue3snippets.jsxBracketSameLine	false/true	false
vue3snippets.semi	false/true	true
vue3snippets.requirePragma	false/true	false
vue3snippets.insertPragma	false/true	false
vue3snippets.useTabs	false/true	false
vue3snippets.proseWrap	preserve/always/never	preserve
vue3snippets.arrowParens	avoid/always	always
vue3snippets.jsxSingleQuote	false/true	false
vue3snippets.htmlWhitespaceSensitivity	css/strict/ignore	css
vue3snippets.vueIndentScriptAndStyle	false/true	false
vue3snippets.endOfLine	auto/lf/crlf/cr	lf
vue3snippets.quoteProps	as-needed/consistent/preserve	as-needed

Thanks

Eno Yao	Aaron Xie	DK Lan	Yong	Li Ting	Xin	Lemon	Jing	Lin	Tian Fly

If you enjoy front end, you should have it! xie, yao, yong, ting, jing, lin, tian, xin, xia, dk and lemon ~ Waiting for you in our heart！

If you think it's useful, you can leave us a message and like it, Your support is our driving force😀

Requirements

• Prettier
• Vue2 Snippets
• Vue Syntax Highlight

License

Vue3 Snippets is released under the MIT.