Vue 3 Support - All In One installs statistics

English | 中文

Vue3 Snippets Highlight Formatters Generators 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.

You can use Vue Generator Component commands in the folder to create new template components.

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(() => {...}) | | watchArray | watch([...]) => {...} | | watchEffect | watchEffect(() => {...}) | | 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 | | | script | | | 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 | | | slotScope | slot-scope="" | | component | | | keepAlive | | | transition | | | transitionGroup | | | 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 |…

Description from the VS Code Marketplace listing.