# Конфигурация приложения

Каждое приложение Vue предоставляет доступ к объекту config, который содержит настройки конфигурации для этого приложения:

const app = createApp({})

console.log(app.config)

1
2
3

Можно изменять его свойства, перечисленные ниже, перед монтированием приложения.

# errorHandler

Тип: Function
По умолчанию: undefined
Использование:

app.config.errorHandler = (err, vm, info) => {
  // Обработка ошибки
  // `info` это Vue-специфичная ошибка
  // например в каком хуке жизненного цикла была найдена ошибка
}

1
2
3
4
5

Добавление обработчика ошибок, отловленных во время отрисовки компонентов и наблюдателей. Аргументами обработчик получает ошибку и экземпляр приложения.

Сервисы отслеживания ошибок Sentry (opens new window) и Bugsnag (opens new window) предоставляют официальную интеграцию с использованием этого свойства.

# warnHandler

Тип: Function
По умолчанию: undefined
Использование:

app.config.warnHandler = function(msg, vm, trace) {
  // `trace` это трассировка иерархии компонентов
}

1
2
3

Определение пользовательского обработчика для предупреждений Vue во время выполнения. Работает только в режиме разработки и игнорируется в production.

# globalProperties

Тип: [key: string]: any
По умолчанию: undefined
Использование:

app.config.globalProperties.foo = 'bar'

app.component('child-component', {
  mounted() {
    console.log(this.foo) // 'bar'
  }
})

1
2
3
4
5
6
7

Добавление глобального свойства, к которому можно обращаться из любого компонента приложения. В случае конфликта имён, свойства компонента будут приоритетнее.

Данный подход заменяет расширение Vue.prototype во Vue 2.x:

// Раньше
Vue.prototype.$http = () => {}

// Сейчас
const app = createApp({})
app.config.globalProperties.$http = () => {}

1
2
3
4
5
6

# isCustomElement

Тип: (tag: string) => boolean
По умолчанию: undefined
Использование:

// любой элемент, начинающийся с 'ion-' будет считаться пользовательским
app.config.isCustomElement = tag => tag.startsWith('ion-')

1
2

Определяет метод распознавания пользовательских элементов, определённых вне Vue (например, использование Web Components API). Если компонент совпадает с условием, то его не нужно регистрировать и Vue не выдаст предупреждения Unknown custom element.

Обратите внимание что нет необходимости указывать HTML и SVG теги — парсер Vue определяет их автоматически.

Важно

Эта опция конфигурации работает только при использовании компилятора шаблонов. Для только-runtime сборки isCustomElement нужно передавать в @vue/compiler-dom в настройках сборки — например, через опцию vue-loader compilerOptions (opens new window).

# optionMergeStrategies

Тип: { [key: string]: Function }
По умолчанию: {}
Использование:

const app = 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

Определение пользовательской функции для слияния опций.

Функция слияния получает первым аргументом значения опций родительского элемента, вторым дочернего элемента и третьим контекст действующего экземпляра приложения.

См. также: Пользовательские функции слияния

# performance

Тип: boolean
По умолчанию: false
Использование:

Установка в значение true включит отслеживание производительности во время инициализации, компиляции, отрисовки и обновления компонентов в инструментах разработчика браузера. Работает только в режиме разработки в браузерах поддерживающих API performance.mark (opens new window).

API приложения →