Skip to main content

​
createApp()

Creates an application instance.
​
rootComponent
Component
required
The root component to mount. Can be a component options object or a component definition.
​
rootProps
Data | null
default:"null"
Props to pass to the root component.
​
return
App<Element>
Returns an application instance.
function createApp(rootComponent: Component, rootProps?: Data | null): App<Element>
Example: 
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')
Example with root props: 
const app = createApp(App, {
  title: 'My App',
  version: '1.0.0'
})

​
createSSRApp()

Creates an application instance in SSR hydration mode.
​
rootComponent
Component
required
The root component to mount.
​
rootProps
Data | null
default:"null"
Props to pass to the root component.
​
return
App<Element>
Returns an application instance configured for SSR hydration.
function createSSRApp(rootComponent: Component, rootProps?: Data | null): App<Element>
Example: 
import { createSSRApp } from 'vue'
import App from './App.vue'

const app = createSSRApp(App)
app.mount('#app') // hydrates server-rendered HTML

​
App Instance Methods

​
app.mount()

Mounts the application instance in a container element.
​
rootContainer
Element | ShadowRoot | string
required
Can be an actual DOM element or a CSS selector string.
​
return
ComponentPublicInstance
Returns the root component instance.
mount(rootContainer: Element | ShadowRoot | string): ComponentPublicInstance
Example: 
app.mount('#app')
// or
app.mount(document.querySelector('#app'))

​
app.unmount()

Unmounts the application instance. 
unmount(): void
Example: 
app.unmount()

​
app.use()

Installs a Vue plugin.
​
plugin
Plugin
required
The plugin to install. Can be an object with an install method or a function.
​
options
any
Optional options to pass to the plugin.
​
return
App
Returns the app instance for chaining.
use<Options extends unknown[]>(plugin: Plugin<Options>, ...options: Options): this
use<Options>(plugin: Plugin<Options>, options: Options): this
Example: 
import { createApp } from 'vue'
import MyPlugin from './plugins/MyPlugin'

const app = createApp(App)
app.use(MyPlugin, { /* plugin options */ })

​
app.component()

Registers or retrieves a global component.
​
name
string
required
The component name.
​
component
Component
The component definition. If omitted, retrieves the registered component.
​
return
Component | undefined | this
Returns the component if retrieving, or the app instance if registering.
component(name: string): Component | undefined
component(name: string, component: Component): this
Example: 
// Register
app.component('MyComponent', {
  /* component definition */
})

// Retrieve
const MyComponent = app.component('MyComponent')

​
app.directive()

Registers or retrieves a global custom directive.
​
name
string
required
The directive name (without v- prefix).
​
directive
Directive
The directive definition. If omitted, retrieves the registered directive.
​
return
Directive | undefined | this
Returns the directive if retrieving, or the app instance if registering.
directive(name: string): Directive | undefined
directive(name: string, directive: Directive): this
Example: 
// Register
app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

// Retrieve
const focusDirective = app.directive('focus')

​
app.mixin()

Applies a global mixin.
​
mixin
ComponentOptions
required
The mixin object to apply.
​
return
App
Returns the app instance for chaining.
mixin(mixin: ComponentOptions): this
Example: 
app.mixin({
  created() {
    console.log('Global mixin created hook')
  }
})
Global mixins should be used sparingly as they affect every component. Consider using composables or plugins instead.

​
app.provide()

Provides a value that can be injected in all descendant components.
​
key
InjectionKey<T> | string | number
required
The injection key.
​
value
T
required
The value to provide.
​
return
App
Returns the app instance for chaining.
provide<T, K = InjectionKey<T> | string | number>(
  key: K,
  value: K extends InjectionKey<infer V> ? V : T
): this
Example: 
import { createApp } from 'vue'

const app = createApp(App)
app.provide('message', 'Hello from app!')
Using in a component: 
import { inject } from 'vue'

export default {
  setup() {
    const message = inject('message')
    console.log(message) // 'Hello from app!'
  }
}

​
app.runWithContext()

Executes a function with the app as the active instance.
​
fn
() => T
required
The function to execute.
​
return
T
Returns the result of the function.
runWithContext<T>(fn: () => T): T
Example: 
app.provide('key', 'value')

app.runWithContext(() => {
  const value = inject('key')
  console.log(value) // 'value'
})

​
app.onUnmount()

Registers a callback to be called when the app is unmounted.
​
cb
() => void
required
The cleanup callback function.
onUnmount(cb: () => void): void
Example: 
app.onUnmount(() => {
  console.log('App is being unmounted')
  // Perform cleanup
})

​
App Instance Properties

​
app.version

The version of Vue the app is using. 
app.version: string
Example: 
console.log(app.version) // '3.5.0'

​
app.config

The application configuration object. 
app.config: AppConfig
Example: 
app.config.errorHandler = (err, instance, info) => {
  console.error('Error:', err)
}

app.config.globalProperties.$http = axios
AppConfig Properties:
  • errorHandler: Global error handler
  • warnHandler: Global warning handler (dev only)
  • globalProperties: Add properties available to all component instances
  • optionMergeStrategies: Custom merge strategies for component options
  • performance: Enable performance tracking (dev only)
  • compilerOptions: Configure runtime compiler
  • idPrefix: Prefix for all useId() calls within this app

Build docs developers (and LLMs) love

Get started for freeTalk to us