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 🤞

• JavaScript Code Snippet - Visual Studio Marketplace
• JavaScript Comment Snippet - Visual Studio Marketplace
• React Snippets - Visual Studio Marketplace

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