Vue 2 Snippet (Visual Studio Code)

Beginning

Simple code snippets that don’t need to be memorized, It can significantly improve coding efficiency.

Some commonly used triggers that have been processed as "subconscious", such as I want to declare the option lifecycle hook function before destroy: , press olbd and press Enter to output beforeDestroy() {},;

For another example, I want to create a props, which is of type string, with a default property, and press psd to output:

property: {
  type: String,
  default: '',
},

It is recommended to take a look at the source code to learn about common snippet prefixes.

The source code directory has been well layered, It is convenient to view the content of the corresponding topic.

It may take a little time to adapt in the early stage, and you will gradually get used to this shortcut.

Install

🌈🌈🌈 Also need to install:

Vue Basic Snippets, Contains code for the v-* family of directives, import components, directives, and services common to Vue 2 and 3.
Vue 3 Snippets, For Vue 3.
Pinia Snippets, For Pinia.
VueX Snippets, For VueX.
JavaScript Code Snippet, Reference MDN documentation.
JavaScript Comment Snippet, Reference JSDOC, ESDOC documentation.

Code snippets for Vue (v2.x) + Vue Router (v3.x).

100% covered vuejs.org official document api
98% covered router.vuejs.org official document api

Design

Vue 2 and 3 Template Directives are the same (vscode-vue-basic-snippets).

Vue 2 and 3 have relatively large changes, 2 recommends the Optional paradigm, and 3 recommends the Composition Functions paradigm. The commonly used "Global API, Directives, Transition, Async Components, Instance Events, Lifecycle" in Vue have undergone major changes. And VueX also launched 4 versions.

In addition, with the introduction of new features of "reactive refs" and "Teleport", the upgrade of many community resources will be major changes.

Therefore, it is not good to design Vue 2 and 3 Code Snippets together.

It is best to separate the Code Snippets of Vue 2 and 3 respectively. According to the actual situation in the project, select Disable (Workspace) in the extension. If you feel this is more cumbersome, you can install the extension supported by version 2 in "VS Code" , Install the extensions supported by version 3 in "VS Code-Insiders".

Supported languages (file extensions)

JavaScript (.js)
TypeScript (.ts)
HTML (.html)
Vue (.vue)

The `UNSAFE` prefix/suffix

UNSAFE_api，prefix, Indicates that it is deprecated in the current version.

api_UNSAFE，suffix, Indicates that it has been deprecated in future versions.

Resources 🤞

Snippets

Vue
- Single File Component
JavaScript/TypeScript/Vue
- Global Config, Vue 3 DEPRECATED!
- Global Data, Vue 3 DEPRECATED!
- Components
- Directives
- Extend
- Filters, Vue 3 REMOVED!
- Mixin, Vue 3.x BREAKING CHANGE.
- Plugins
- Template
- Instance Methods Data
- Instance Methods Events
- Instance Methods Lifecycle
- Instance Properties
- Options Composition
- Options Data
- Options Dom
- Options Lifecycle Hooks
- Options Misc
- Options Props, Vue 3.x Props default value factory functions no longer have access to this.
Vue Router

Vue 🦢

vue, Vue Single File Component with SCSS
vueSass, Vue Single File Component with SASS
vueLess, Vue Single File Component with LESS
vuePostCSS, Vue Single File Component with PostCSS
vueCSS, Vue Single File Component with CSS
vueStylus, Vue Single File Component with Stylus
vueTypeScript, Vue Single File Component with TypeScript
vueTypeScriptClass, Vue Single File Component with Class based TypeScript format
vueNoStyle, Vue Single File Component with No Style
vueTemplate, Vue Template element
vueScript, Vue Script element
vueStyle/styleLang, Vue Style element

JavaScript/TypeScript/Vue 🌿

Import/Instance

importFilter_UNSAFE / ivf_UNSAFE, import Feature from '@/filters/Feature'; Vue 3 REMOVED!
importVueRouter, import VueRouter from 'vue-router';
importVuex, import Vuex from 'vuex';
importVuexHelpers, import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
newVue, Vue Instance

Directives

Vue.directive()_UNSAFE / vgd_UNSAFE, vue global directive (all hooks)
Vue.directive()_UNSAFE / vgd_UNSAFE, vue global directive (bind, update)
Vue.directive()_UNSAFE, retrieve global directive
vueDirective / vsd, vue single file directive (all hooks)
option.directives / vld, vue local directives
directive.bind / vd.bind, vue directive bind hook
directive.inserted / vd.inserted, vue directive inserted hook
directive.update / vd.update, vue directive update hook
directive.componentUpdated / vd.componentUpdated, vue directive componentUpdated hook
directive.unbind / vd.unbind, vue directive unbind hook

Options

Lifecycle

ol, Vue Option Lifecycle Hooks
lifecycleBeforeCreate / option.beforeCreate() / olbc, option lifecycle hooks: beforeCreate()
lifecycleCreated / option.created() / olc, option lifecycle hooks: created()
lifecycleBeforeMount / option.beforeMount() / olbm, option lifecycle hooks: beforeMount()
lifecycleMounted / option.mounted() / olm, option lifecycle hooks: mounted()
lifecycleBeforeUpdate / option.beforeUpdate() / olbu, option lifecycle hooks: beforeUpdate()
lifecycleUpdated / option.updated() / olu, option lifecycle hooks: updated()
lifecycleActivated / option.activated() / ola, option lifecycle hooks: activated()
lifecycleDeactivated / option.deactivated() / olda, option lifecycle hooks: deactivated()
lifecycleBeforeDestroy / option.beforeDestroy() / olbd, option lifecycle hooks: beforeDestroy()
lifecycleDestroyed / option.destroyed() / old, option lifecycle hooks: destroyed()
lifecycleErrorCaptured / option.errorCaptured() / olec, option lifecycle hooks: errorCaptured()
lifecycleServerCacheKey / option.serverCacheKey() / olsck, option lifecycle hooks: serverCacheKey()
lifecycleServerPrefetch / option.serverPrefetch() / olsp, option lifecycle hooks: serverPrefetch()

Async Lifecycle Hooks:

lifecycleAsyncCreated / async.option.created() / asolc, Async Options Lifecycle - async created()
lifecycleAsyncMounted / async.option.mounted() / asolm, Async Options Lifecycle - async mounted()
lifecycleAsyncUpdated / async.option.updated() / asolu, Async Options Lifecycle - async updated()
lifecycleAsyncActivated / async.option.activated() / asola, Async Options Lifecycle - async activated()
lifecycleAsyncDeactivated / async.option.deactivated() / asolda, Async Options Lifecycle - async deactivated()

  // asolc ->                            async options lifecycle created
  async created() {

  },

Option

option.name- option name
option.functional
option.delimiters
option.comments
option.components, option components
option.directives
option.filters_UNSAFE- Vue 3 REMOVED!
option.mixins, uses mixin
option.extends
option.inheritAttrs
option.model
option.props, option props
option.propsData, option propsData
option.data(), option data()
option.methods, option methods
option.provide, option provide
option.inject, option inject
option.template, option template
option.render, option render
option.renderError

Computed

option.computed, option computed
option.computedProperty, computed property

  // ocd ->                            // options computed
  computed: {
    property() {
      return this.property;
    },

    // cp ->                            // computed property
    property() {
      return this.property;
    },

  },

Watch

option.watch, option watch
option.watchProperty, option watch property
option.watchPropertyDeep, option watch property (deep)
option.watchPropertyImmediate, option watch property (immediate)
option.watchPropertyDeepImmediate, option watch property (deep, immediate)

  // ow ->                            // options watch
  watch: {
    propertyName(newValue, oldValue) {

    },

    // wpdi ->                            // watch property (deep, immediate)
    propertyName: {
      deep: true,
      immediate: true,
      handler(newValue, oldValue) {

      },
    },
  },

Composition/DOM/Misc

el
template
render(h, context)
renderError(h, err)

Props

// psd ->
property: {
  type: String,
  default: '',
},

propOptions, options prop
propString, prop string
propNumber, prop number
propBoolean, prop boolean
propArray, prop array
propObject, prop object
propDate, prop date
propFunction, prop function
propSymbol, prop symbol
propPromise, prop promise
propStringDefault, prop string (default)
propNumberDefault, prop number (default)
propBooleanDefault, prop boolean (default)
propArrayDefault, prop array (default)
propObjectDefault, prop object (default)
propDateDefault, prop date (default)
propSymbolDefault, prop symbol (default)
propFunctionDefault, prop function (default)
propPromiseDefault, prop promise (default)
propStringRequired, prop string (required)
propNumberRequired, prop number (required)
propBooleanRequired, prop boolean (required)
propArrayRequired, prop array (required)
propObjectRequired, prop object (required)
propDateRequired, prop date (required)
propFunctionRequired, prop function (required)
propSymbolRequired, prop symbol (required)
propPromiseRequired, prop promise (required)
propStringDefaultRequired, prop string (default, required)
propNumberDefaultRequired, prop number (default, required)
propBooleanDefaultRequired, prop boolean (default, required)
propArrayDefaultRequired, prop array (default, required)
propObjectDefaultRequired, prop object (default, required)
propDateDefaultRequired, prop date (default, required)
propFunctionDefaultRequired, prop function (default, required)
propSymbolDefaultRequired, prop symbol (default, required)
propPromiseDefaultRequired, prop promise (default, required)

Instance

Instance Properties

this.$data
this.$props
this.$el
this.$options
this.$parent
this.$root
this.$children_UNSAFE, Vue 3 REMOVED!
this.$slots
this.$scopedSlots_UNSAFE, Vue 3 REMOVED!
this.$refs
this.$isServer
this.$attrs
this.$listeners_UNSAFE, Vue 3 REMOVED!

Instance Methods Lifecycle

// atn ->
await this.$nextTick();

this.$nextTick(), nextTick
await this.$nextTick(), await nextTick
this.$forceUpdate()
this.$destroy()
this.$mount()

Instance Methods Data

this.$watch()
this.$watch(data, cb, {deep, immediate})
this.$set()/set
this.$delete()

Instance Methods Events

this.$on()_UNSAFE, Vue 3 REMOVED!
this.$emit()/emit
this.$once()_UNSAFE, Vue 3 REMOVED!
this.$off()_UNSAFE/off, Vue 3 REMOVED!

Template/Plugins/Mixin/Extend

Vue.compile(template)_UNSAFE, Vue 3.x BREAKING CHANGE.
Vue.use(plugin)_UNSAFE, Vue 3.x BREAKING CHANGE.
pluginComponent, Create Plugin
pluginComponents, Create Plugin
vueMixin, Define a mixin object
Vue.mixin(mixin)_UNSAFE, Global Mixin, Vue 3.x BREAKING CHANGE.
Vue.extend(options)_UNSAFE
Vue.prototype_UNSAFE, Vue Plugin add an instance method, Vue 3.x BREAKING CHANGE.

Components

vueGlobalComponent/vgc, Vue Global Component, Vue 3 DEPRECATED!
vueFunctionalComponents/vfc, Vue Functional Component, Vue 3.x BREAKING CHANGE!
vueAsyncComponents/vac, const Feature = () => import('@/views/FeaturePage.vue');, Vue Async Components, Vue 3.x BREAKING CHANGE!
Vue.component()_UNSAFE, Retrieve Global Component, Vue 3 DEPRECATED!

Global

DEPRECATED!

View "Migration from Vue 2" Global API, Global API Treeshaking.

Global Config

Vue.config.silent_UNSAFE
Vue.config.optionMergeStrategies_UNSAFE
Vue.config.devtools_UNSAFE
Vue.config.errorHandler_UNSAFE
Vue.config.warnHandler_UNSAFE
Vue.config.ignoredElements_UNSAFE
Vue.config.keyCodes_UNSAFE
Vue.config.performance_UNSAFE
Vue.config.productionTip_UNSAFE

Global Data

Vue.nextTick([callback, context])_UNSAFE
Vue.nextTick().then()_UNSAFE
Vue.set(target, propertyName/index, value)_UNSAFE
Vue.delete(target, propertyName/index)_UNSAFE
Vue.observable(object)_UNSAFE

Vue Router

router / newVueRouter, Create the router instance
newVueRouter, Create the router instance (import)
routerHistoryMode, Create the router instance with HTML5 History Mode
routes, Define routes
route, Define route
routeLazy, Define lazy loading route
routePropsBooleanMode, Define route and pass props to route components (Boolean mode)
routePropsObjectMode, Define route and pass props to route components (Object mode)
routePropsFunctionMode, Define route and pass props to route components (Function mode)
routePropsFunctionModeNamedViews, Define route and pass props for routes with named views (Function mode)
routeNamedViews, Define route for named views
routeAlias, Define alias route
routeRedirect, Define redirect route
routeRedirectNamedRoute, Define redirect named route
routeRedirectDynamic, Define dynamic redirect
routeNamed, Define named route
routerPush, Router navigate to path with literal string
routerPushPath, Router navigate to path
routerPushParams, Router navigate to path with params
routerPushQuery, Router navigate to path with query
routerPushNamedRoute, Router navigate to named routes
routerPushNamedRouteParams, Router navigate to named routes with params
routerPushNamedRouteQuery, Router navigate to named routes with query
routerReplacePath, Router navigate to path without pushing a new history entry
routerReplaceNamedRoute, Router navigate to named routes without pushing a new history entry
routerGo, Programmatically navigate to a new URL: go(n)
routerBack, Programmatically navigate to a new URL: back()
routerForward, Programmatically navigate to a new URL: forward()
routerResolve, Reverse URL resolving
routerBeforeEach / guardGlobalBefore, Global Before Guards
routerBeforeResolve / guardGlobalResolve, Global Resolve Guards
routerAfterEach, Global After Hooks
routeBeforeEnter / guardPerRoute, Per-Route Guard
componentGuards / guardInComponent, In-Component Guards
routerAddRoutes, Dynamically add more routes to the router
routerOnReady, Router instance method: onReady(callback, errorCallback)
routerOnError, Router instance method: onError(callback)
routerGetMatchedComponents, Router instance method: getMatchedComponents(to)
this.$route.path, $route.path
this.$route.params, $route.params
this.$route.query, $route.query
this.$route.hash, $route.hash
this.$route.fullPath, $route.fullPath
this.$route.matched, $route.matched
this.$route.name, $route.name
this.$route.redirectedFrom, $route.redirectedFrom
lazyRoute, Lazy Loading Routes
lazyRouteChunk, Lazy Loading Routes, Grouping Components in the Same Chunk
fetchingAfterNavigation, Fetching After Navigation
fetchingBeforeNavigation, Fetching Before Navigation
routeTransition, Route-Based Dynamic Transition
vScrollbehavior, Vue Router scrollBehavior

File Name

View "Style Guide" Priority B Rules: Strongly Recommended (Improving Readability).

License 📃

MIT License

Donate

xianghongai@gmail.com

Vue 2 Snippets

NicholasHsiang

Vue 2 Snippet (Visual Studio Code)

Beginning

Install

Design

Supported languages (file extensions)

The `UNSAFE` prefix/suffix

Resources 🤞

Snippets

Vue 🦢

JavaScript/TypeScript/Vue 🌿

Import/Instance

Directives

Options

Lifecycle

Option

Computed

Watch

Composition/DOM/Misc

Props

Instance

Instance Properties

Instance Methods Lifecycle

Instance Methods Data

Instance Methods Events

Template/Plugins/Mixin/Extend

Components

Global

Global Config

Global Data

Vue Router

File Name

License 📃

Vue 2 Snippets

NicholasHsiang

Vue 2 Snippet (Visual Studio Code)

Beginning

Install

Design

Supported languages (file extensions)

The UNSAFE prefix/suffix

Resources 🤞

Snippets

Vue 🦢

JavaScript/TypeScript/Vue 🌿

Import/Instance

Directives

Options

Lifecycle

Option

Computed

Watch

Composition/DOM/Misc

Props

Instance

Instance Properties

Instance Methods Lifecycle

Instance Methods Data

Instance Methods Events

Template/Plugins/Mixin/Extend

Components

Global

Global Config

Global Data

Vue Router

File Name

License 📃

The `UNSAFE` prefix/suffix