# 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

# devtools

Type: boolean
Default: true (false in production builds)
Usage:

app.config.devtools = true

Configure whether to allow vue-devtools inspection. This option's default value is true in development builds and false in production builds. You can set it to true to enable inspection for production builds.

# 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 Vue 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 Vue instance is passed as the third argument.

See also: Custom Option Merging Strategies

# 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.

Application API→