# Application Config

Chaque application Vue expose un objet config qui contient les paramètres de configuration de cette application:

const app = Vue.createApp({})

console.log(app.config)

1
2
3

Vous pouvez modifier ses propriétés, répertoriées ci-dessous, avant de monter votre application.

# errorHandler

Type: Function
Default: undefined
Usage:

app.config.errorHandler = (err, vm, info) => {
  // Traitement des erreurs
  // `info` contient les informations sur les erreurs spécifiques à Vue, 
  // par ex dans quel lifecycle hook l'erreur a été trouvée
}

1
2
3
4
5

Attribuez un handler pour les erreurs non captées durant le rendu des composants par les fonctions et les "watchers". Le handler est appelé avec l'erreur et l'instance de l'application.

Service de traque des erreurs Sentry (opens new window) et Bugsnag (opens new window) fournissent des intégrations officielles en utilisant cette option.

# warnHandler

Type: Function
Default: undefined
Usage:

app.config.warnHandler = function(msg, vm, trace) {
  // `trace` est la trace de la hierarchie du composant
}

1
2
3

Attribuer un gestionnaire personnalisé pour les avertissements durant l'exécution de Vue. Notez que cela ne fonctionne que pendant le développement et est ignoré en 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

Ajoute une propriété globale accessible dans n'importe quelle instance de composant à l'intérieur de l'application. La propriété du composant sera prioritaire en cas de conflit de clés.

Ceci peut remplacer Vue.prototype de Vue 2.x étendant:

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

// Après
const app = Vue.createApp({})
app.config.globalProperties.$http = () => {}

1
2
3
4
5
6

# isCustomElement

Type: (tag: string) => boolean
Default: undefined
Usage:

// tout élément commençant par 'ion-' sera reconnu comme un custom élément
app.config.isCustomElement = tag => tag.startsWith('ion-')

1
2

Spécifie une méthode pour reconnaître les custom éléments définis en dehors de Vue (par exemple, à l'aide des API des composants Web). Si le composant remplit cette condition, il n'aura pas besoin d'un enregistrement local ou global et Vue ne lancera pas d'avertissement du type Unknown custom element.

Notez que toutes les balises HTML et SVG natives n'ont pas besoin d'être définies dans cette fonction - Le parser de Vue effectue cette vérification automatiquement.

Important

Cette option de configuration n'est respectée que lors de l'utilisation du compilateur d'exécution. Si vous utilisez la version exécutable uniquement, isCustomElement doit être passé à@vue/compiler-dom dans la configuration de build - par exemple, via l'option compilerOptions dans vue-loader (opens new window).

# 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

Définir des stratégies de fusion pour les options personnalisées.

La stratégie de fusion reçoit la valeur de cette option définie sur les instances parent et enfant comme premier et deuxième arguments, respectivement. Le contexte de l'instance de l'application est transmise comme troisième argument.

Voir aussi: Stratégies de fusion d'options personnalisées

# performance

Type: boolean
Default: false
Usage:

Definir à true pour activer le traçage des performances d'initialisation, de compilation, de rendu et de patch des composants dans le panneau performance/timeline du devtool du navigateur. Fonctionne uniquement en mode développement et dans les navigateurs prenant en charge l'API performance.mark (opens new window).

Application API →