App Configuration & Plugins

createApp returns an app instance you configure with plugins (router, pinia), global error handlers, and provided values.

4 min read Level 2/5 #vue#app#plugins

What you'll learn

Read main.ts
Register a plugin with .use()
Provide app-wide config with app.config

main.ts is the entry point that creates your Vue app, plugs in routing/state/i18n, and mounts the result into the DOM.

A Typical main.ts

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import './style.css'

const app = createApp(App)
app.use(router)
app.use(createPinia())
app.mount('#app')

.use(plugin) registers a plugin — order can matter if one plugin depends on another.

App-Level Configuration

The app.config object holds global settings like error handlers and warning hooks.

app.config.errorHandler = (err, instance, info) => {
  console.error('Vue error:', err, info)
  sendToCrashReporter(err)
}

app.config.warnHandler = (msg, instance, trace) => {
  if (msg.includes('deprecated')) return
  console.warn(msg)
}

Globally Provided Values

app.provide(key, value) makes a value available to every component via inject() — handy for API base URLs, feature flags, or singleton services.

app.provide('apiUrl', 'https://api.example.com')

In any component:

import { inject } from 'vue'
const url = inject<string>('apiUrl', 'http://localhost')

Global Components & Directives

import BaseButton from './components/BaseButton.vue'
app.component('BaseButton', BaseButton)  // usable anywhere

app.directive('focus', { mounted: el => el.focus() })

Vue DevTools →