# Configuração da Aplicação

Todo aplicativo Vue expõe um objeto config que contém as configurações para esse aplicativo:

const app = createApp({})

console.log(app.config)

1
2
3

Você pode modificar suas propriedades, listadas abaixo, antes de montar a sua aplicação.

# errorHandler

Tipo: Function
Padrão: undefined
Uso:

app.config.errorHandler = (err, vm, info) => {
  // manipula erro
  // `info` traz informações de erros específicos do Vue,
  // ex.: em qual gatilho do ciclo de vida o erro foi encontrado
}

1
2
3
4
5

Atribua um manipulador para erros não capturados durante a função de renderização do componente e os observadores. O manipulador é chamado com o erro e a instância da aplicação correspondente.

Os serviços de rastreamento de erros Sentry (opens new window) e Bugsnag (opens new window) fornecem integrações oficiais usando essa opção.

# warnHandler

Tipo: Function
Padrão: undefined
Uso:

app.config.warnHandler = function(msg, vm, trace) {
  // `trace` é o rastro da hierarquia do componente
}

1
2
3

Atribua um manipulador customizado para avisos do Vue em tempo de execução. Note que isso funciona apenas durante o desenvolvimento e é ignorado em produção.

# globalProperties

Tipo: [key: string]: any
Padrão: undefined
Uso:

app.config.globalProperties.foo = 'bar'

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

1
2
3
4
5
6
7

Adiciona uma propriedade global que pode ser acessada em qualquer instância de componente dentro da aplicação. A propriedade do componente terá prioridade quando houver chaves conflitantes.

Isto pode substituir o ato de estender o Vue.prototype no Vue 2.x:

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

// After
const app = createApp({})
app.config.globalProperties.$http = () => {}

1
2
3
4
5
6

# optionMergeStrategies

Tipo: { [key: string]: Function }
Padrão: {}
Uso:

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

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

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

// 'Olá, Vue'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Defina estratégias de mesclagem para opções customizadas.

A estratégia de mesclagem recebe o valor daquela opção definida nas instâncias de pai e filho como primeiro e segundo argumentos, respectivamente.

Ver também: Estratégias de Mesclagem de Opções Personalizadas

# performance

Tipo: boolean
Padrão: false
Uso:

Defina isto como true para habilitar a inicialização, compilação, renderização e rastreamento do desempenho de correções do componente no painel de desempenho ou linha do tempo no devtool do navegador. Funciona apenas em modo de desenvolvimento e em navegadores que suportam a API performance.mark (opens new window).

# compilerOptions 3.1+

Tipo: Object

Configure as opções do compilador de tempo de execução. Os valores definidos neste objeto serão passados para o compilador de template no navegador e afetarão todos os componentes no app configurado. Note que você também pode sobrepor essas opções por componente usando a opção compilerOptions.

Importante

Esta opção de configuração só é respeitada ao usar a compilação completa (ou seja, o vue.js independente que pode compilar templates no navegador). Se você utilizar a compilação de tempo de execução (runtime) em um ambiente de construção, então as opções do compilador devem ser passadas para @vue/compiler-dom através das configurações da ferramenta de construção.

Para vue-loader: passe pela opção compilerOptions do loader (opens new window). Veja também como configurá-lo no vue-cli (opens new window).
Para vite: passe pelas opções do @vitejs/plugin-vue (opens new window).

# compilerOptions.isCustomElement

Tipo: (tag: string) => boolean
Padrão: undefined
Uso:

// qualquer elemento começando com 'ion-' será reconhecido como personalizado
app.config.compilerOptions.isCustomElement = tag => tag.startsWith('ion-')

1
2

Especifica um método para reconhecer elementos personalizados definidos fora do Vue (ex.: usando APIs de Web Components). Caso um componente corresponda à essa condição, ele não precisará do registro local ou global e o Vue não lançará avisos sobre um elemento personalizado desconhecido (Unknown custom element).

Note que todas as tags de HTML nativo e SVG não precisam corresponder a esta função. O parser do Vue desempenha esta conferência automaticamente.

# compilerOptions.whitespace

Tipo: 'condense' | 'preserve'
Padrão: 'condense'
Uso:

app.config.compilerOptions.whitespace = 'preserve'

Por padrão, o Vue remove/condensa espaços em branco entre elementos do template para produzir resultados compilados mais eficientes:

Espaços em branco no começo ou no fim de um elemento são condensados em um espaço único
Espaços em branco entre elementos que contenham novas linhas são removidos
Espaços em branco consecutivos em nós de texto são condensados em um único espaço.

Definir o valor como 'preserve' desabilitará ambos (2) e (3).

# compilerOptions.delimiters

Tipo: Array<string>
Padrão: ['{{', '}}']
Uso:

// Delimitadores modificados para o estilo de template de string do ES6
app.config.compilerOptions.delimiters = ['${', '}']

1
2

Define os delimitadores usados para a interpolação de texto dentro do template.

Tipicamente isso é usado para evitar conflitos com frameworks do lado do servidor que também usam sintaxe mustache.

# compilerOptions.comments

Tipo: boolean
Padrão: false
Uso:

app.config.compilerOptions.comments = true

Por padrão, o Vue removerá comentários HTML de dentro de templates em produção. Definir esta opção como true forçará o Vue a preservar os comentários mesmo em produção. Comentários são sempre preservados em desenvolvimento.

Esta opção é tipicamente usada quando o Vue é usado com outras bibliotecas que dependem de comentários HTML.

# isCustomElement deprecated

Descontinuado na versão 3.1.0. Use compilerOptions.isCustomElement.

API da Aplicação →