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

Каждое приложение 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

# optionMergeStrategies

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

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

app.config.optionMergeStrategies.hello = (parent, child) => {
  return `Привет, ${child}`
}

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

// 'Привет, 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).

# compilerOptions 3.1.0+

Тип: Object

Настройки для конфигурации компилятора. Значения, объявленные в этом объекте, будут передаваться компилятору шаблонов в браузере и повлияют на каждый компонент в приложении. Обратите внимание, также можно переопределять эти параметры для конкретного компонента с помощью опции compilerOptions.

Важно

Данные настройки для конфигурации будут работать только при использовании полной сборки (т.е. сборка vue.js, которая может компилировать шаблоны в браузере). Если есть шаг сборки и используется runtime-only сборка, то настройки компилятора нужно передавать в @vue/compiler-dom через конфигурацию сборщика.

Для vue-loader: передавать опцией загрузчика compilerOptions (opens new window). Посмотрите также как настраиваются опции загрузчиков во vue-cli (opens new window).
Для vite: передавать через настройки @vitejs/plugin-vue (opens new window).

# compilerOptions.isCustomElement

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

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

1
2

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

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

# compilerOptions.whitespace

Тип: 'condense' | 'preserve'
По умолчанию: 'condense'
Использование:

app.config.compilerOptions.whitespace = 'preserve'

По умолчанию Vue удаляет/сокращает пробельные символы между элементами шаблона для получения более эффективного скомпилированного шаблона:

Стартовые / конечные пробельные символы внутри элемента сжимаются в один пробел
Пробелы между элементами, содержащими новые строки, удаляются
Последовательные пробелы в текстовых узлах сжимаются в один пробел

Установка значения в 'preserve' отключит пункты (2) и (3).

# compilerOptions.delimiters

Тип: Array<string>
По умолчанию: ['{{', '}}']
Использование:

// Разделители изменены на стиль строковых шаблонов в ES6
app.config.compilerOptions.delimiters = ['${', '}']

1
2

Устанавливает разделители, используемые для интерполяции в шаблоне.

Обычно применяют, чтобы избежать конфликтов с фреймворками на стороне сервера, которые также могут использовать синтаксис с фигурными скобками.

# compilerOptions.comments

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

app.config.compilerOptions.comments = true

По умолчанию Vue удаляет HTML-комментарии внутри шаблонов в production. Установив эту опцию в true заставит Vue сохранять комментарии даже в production. Комментарии всегда сохраняются во время разработки.

Эта опция обычно используется, когда Vue используется с другими библиотеками, которые полагаются на HTML-комментарии.

# isCustomElement удалено

Удалено в версии 3.1.0. Вместо неё используйте compilerOptions.isCustomElement.

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