# Application Config

config is an object containing Vue application global configurations. You can modify its properties listed below before mounting your application:

const app = Vue.createApp({})

app.config = {...}
1
2
3

# errorHandler

  • Type: Function

  • Default: undefined

  • Usage:

app.config.errorHandler = (err, vm, info) => {
  // handle error
  // `info` is a Vue-specific error info, e.g. which lifecycle hook
  // the error was found in
}
1
2
3
4
5

Assign a handler for uncaught errors during component render function and watchers. The handler gets called with the error and the application instance.

Error tracking services Sentry and Bugsnag provide official integrations using this option.

# warnHandler

  • Type: Function

  • Default: undefined

  • Usage:

app.config.warnHandler = function(msg, vm, trace) {
  // `trace` is the component hierarchy trace
}
1
2
3

Assign a custom handler for runtime Vue warnings. Note this only works during development and is ignored in production.

# globalProperties

  • Type: [key: string]: any

  • Default: undefined

  • Usage:

app.config.globalProperties.foo = 'bar'

app.component('child-component', {
  mounted() {
    console.log(this.foo) // 'bar'
  }
})
1
2
3
4
5
6
7

Adds a global property that can be accessed in any component instance inside the application. The component’s property will take priority when there are conflicting keys.

This can replace Vue 2.x Vue.prototype extending:

// Before
Vue.prototype.$http = () => {}

// After
const app = Vue.createApp({})
app.config.globalProperties.$http = () => {}
1
2
3
4
5
6

# isCustomElement

  • Type: (tag: string) => boolean

  • Default: undefined

  • Usage:

// any element starting with 'ion-' will be recognized as a custom one
app.config.isCustomElement = tag => tag.startsWith('ion-')
1
2

Specifies a method to recognize custom elements defined outside of Vue (e.g., using the Web Components APIs). If component matches this condition, it won't need local or global registration and Vue won't throw a warning about an Unknown custom element.

Note that all native HTML and SVG tags don't need to be matched in this function - Vue parser performs this check automatically

# optionMergeStrategies

  • Type: { [key: string]: Function }

  • Default: {}

  • Usage:

const app = Vue.createApp({
  mounted() {
    console.log(this.$options.hello)
  }
})

app.config.optionMergeStrategies.hello = (parent, child, vm) => {
  return `Hello, ${child}`
}

app.mixin({
  hello: 'Vue'
})

// 'Hello, Vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Define merging strategies for custom options.

The merge strategy receives the value of that option defined on the parent and child instances as the first and second arguments, respectively. The context application instance is passed as the third argument.

# performance

  • Type: boolean

  • Default: false

  • Usage:

Set this to true to enable component init, compile, render and patch performance tracing in the browser devtool performance/timeline panel. Only works in development mode and in browsers that support the performance.mark API.

Deployed on Netlify.
Last updated: 9/22/2020, 1:58:28 PM