Deep Dive into Vue.js Core Initialization: Global API, Asset Registration, and Utility Functions

This article presents a common entry code for a Vue application, showing the import statements, disabling production tip, logging the Vue object, invoking the debugger, and creating a new Vue instance that renders the root component.

Before the new Vue call, many properties and methods are attached to the Vue constructor; the article explores these additions step by step.

The first layer of the Vue constructor is defined in core/index.js:

import Vue from './instance/index'
import { initGlobalAPI } from './global-api/index'

initGlobalAPI(Vue)

Vue.version = '__VERSION__'
export default Vue

Here the version property is added, and the initGlobalAPI function is called. The function is defined in core/global-api/index.js:

import config from '../config'
import { initUse } from './use'
import { initMixin } from './mixin'
import { initExtend } from './extend'
import { initAssetRegisters } from './assets'
import { set, del } from '../observer/index'
import { ASSET_TYPES } from 'shared/constants'
import builtInComponents from '../components/index'
import { observe } from 'core/observer/index'
import { warn, extend, nextTick, mergeOptions, defineReactive } from '../util/index'

export function initGlobalAPI (Vue) {
  const configDef = {}
  configDef.get = () => config
  if (process.env.NODE_ENV !== 'production') {
    configDef.set = () => {
      warn('Do not replace the Vue.config object, set individual fields instead.')
    }
  }
  Object.defineProperty(Vue, 'config', configDef)

  Vue.util = { warn, extend, mergeOptions, defineReactive }
  Vue.set = set
  Vue.delete = del
  Vue.nextTick = nextTick
  Vue.observable = obj => { observe(obj); return obj }

  Vue.options = Object.create(null)
  ASSET_TYPES.forEach(type => { Vue.options[type + 's'] = Object.create(null) })
  Vue.options._base = Vue

  extend(Vue.options.components, builtInComponents)
  initUse(Vue)
  initMixin(Vue)
  initExtend(Vue)
  initAssetRegisters(Vue)
}

The ASSET_TYPES constant is defined as:

export const ASSET_TYPES = [
  'component',
  'directive',
  'filter'
]

The initUse implementation shows how Vue registers plugins while preventing duplicate installations:

export function initUse (Vue) {
  Vue.use = function (plugin) {
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    if (installedPlugins.indexOf(plugin) > -1) { return this }
    const args = toArray(arguments, 1)
    args.unshift(this)
    if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
    installedPlugins.push(plugin)
    return this
  }
}

The helper toArray converts array‑like objects to real arrays:

export function toArray (list, start) {
  start = start || 0
  let i = list.length - start
  const ret = new Array(i)
  while (i--) { ret[i] = list[i + start] }
  return ret
}

The initMixin adds the Vue.mixin API, which merges a mixin object into the global options:

export function initMixin (Vue) {
  Vue.mixin = function (mixin) {
    this.options = mergeOptions(this.options, mixin)
    return this
  }
}

The initExtend function implements Vue.extend, enabling prototype inheritance for component constructors:

export function initExtend (Vue) {
  Vue.cid = 0
  let cid = 1
  Vue.extend = function (extendOptions) {
    extendOptions = extendOptions || {}
    const Super = this
    const SuperId = Super.cid
    const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})
    if (cachedCtors[SuperId]) { return cachedCtors[SuperId] }
    const name = extendOptions.name || Super.options.name
    if (process.env.NODE_ENV !== 'production' && name) { validateComponentName(name) }
    const Sub = function VueComponent (options) { this._init(options) }
    Sub.prototype = Object.create(Super.prototype)
    Sub.prototype.constructor = Sub
    Sub.cid = cid++
    Sub.options = mergeOptions(Super.options, extendOptions)
    Sub.super = Super
    ASSET_TYPES.forEach(type => { Sub[type] = Super[type] })
    if (name) { Sub.options.components[name] = Sub }
    Sub.superOptions = Super.options
    Sub.extendOptions = extendOptions
    Sub.sealedOptions = extend({}, Sub.options)
    cachedCtors[SuperId] = Sub
    return Sub
  }
}

The initAssetRegisters function creates registration methods for components, directives, and filters based on ASSET_TYPES:

export function initAssetRegisters (Vue) {
  ASSET_TYPES.forEach(type => {
    Vue[type] = function (id, definition) {
      if (!definition) {
        return this.options[type + 's'][id]
      } else {
        if (process.env.NODE_ENV !== 'production' && type === 'component') { validateComponentName(id) }
        if (type === 'component' && isPlainObject(definition)) {
          definition.name = definition.name || id
          definition = this.options._base.extend(definition)
        }
        if (type === 'directive' && typeof definition === 'function') {
          definition = { bind: definition, update: definition }
        }
        this.options[type + 's'][id] = definition
        return definition
      }
    }
  })
}

The next layer, web/runtime/index.js, adds platform‑specific utilities, directives, and components, sets up the patch function, and defines the public $mount method:

import Vue from 'core/index'
import config from 'core/config'
import { extend, noop } from 'shared/util'
import { mountComponent } from 'core/instance/lifecycle'
import { devtools, inBrowser } from 'core/util/index'
import { query, mustUseProp, isReservedTag, isReservedAttr, getTagNamespace, isUnknownElement } from 'web/util/index'
import { patch } from './patch'
import platformDirectives from './directives/index'
import platformComponents from './components/index'

Vue.config.mustUseProp = mustUseProp
Vue.config.isReservedTag = isReservedTag
Vue.config.isReservedAttr = isReservedAttr
Vue.config.getTagNamespace = getTagNamespace
Vue.config.isUnknownElement = isUnknownElement

extend(Vue.options.directives, platformDirectives)
extend(Vue.options.components, platformComponents)

Vue.prototype.__patch__ = inBrowser ? patch : noop

Vue.prototype.$mount = function (el, hydrating) {
  el = el && inBrowser ? query(el) : undefined
  return mountComponent(this, el, hydrating)
}

if (inBrowser) {
  setTimeout(() => {
    if (config.devtools) {
      if (devtools) { devtools.emit('init', Vue) }
    } else if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test') {
      console[console.info ? 'info' : 'log']('Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools')
    }
    if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test' && config.productionTip !== false && typeof console !== 'undefined') {
      console[console.info ? 'info' : 'log'](`You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html`)
    }
  }, 0)
}

export default Vue

The platform directives include model and show, while the platform components include Transition and TransitionGroup, defined in runtime/directives/index.js and runtime/components/index.js respectively.

In summary, before a new Vue call the constructor undergoes at least two layers of wrapping that set up global APIs, asset registration, and platform‑specific utilities; further extensions to Vue.prototype will be covered in later articles.

Thank you for reading; the Vue source series will continue to be shared on this public account, and interested readers are welcome to discuss.