Vue.js (original) (raw)

Application API ​

createApp() ​

Creates an application instance.

function createApp(rootComponent: Component, rootProps?: object): App  
import { createApp } from 'vue'  
const app = createApp({  
  /* root component options */  
})

With imported component:
js 

import { createApp } from 'vue'  
import App from './App.vue'  
const app = createApp(App)

createSSRApp() ​

Creates an application instance in SSR Hydration mode. Usage is exactly the same as createApp().

app.mount() ​

Mounts the application instance in a container element.

interface App {  
  mount(rootContainer: Element | string): ComponentPublicInstance  
}  
import { createApp } from 'vue'  
const app = createApp(/* ... */)  
app.mount('#app')

Can also mount to an actual DOM element:
js 

app.mount(document.body.firstChild)

app.unmount() ​

Unmounts a mounted application instance, triggering the unmount lifecycle hooks for all components in the application's component tree.

interface App {  
  unmount(): void  
}

app.onUnmount() ​

Registers a callback to be called when the app is unmounted.

interface App {  
  onUnmount(callback: () => any): void  
}

app.component() ​

Registers a global component if passing both a name string and a component definition, or retrieves an already registered one if only the name is passed.

interface App {  
  component(name: string): Component | undefined  
  component(name: string, component: Component): this  
}  
import { createApp } from 'vue'  
const app = createApp({})  
// register an options object  
app.component('MyComponent', {  
  /* ... */  
})  
// retrieve a registered component  
const MyComponent = app.component('MyComponent')

app.directive() ​

Registers a global custom directive if passing both a name string and a directive definition, or retrieves an already registered one if only the name is passed.

interface App {  
  directive(name: string): Directive | undefined  
  directive(name: string, directive: Directive): this  
}  
import { createApp } from 'vue'  
const app = createApp({  
  /* ... */  
})  
// register (object directive)  
app.directive('myDirective', {  
  /* custom directive hooks */  
})  
// register (function directive shorthand)  
app.directive('myDirective', () => {  
  /* ... */  
})  
// retrieve a registered directive  
const myDirective = app.directive('myDirective')

app.use() ​

Installs a plugin.

interface App {  
  use(plugin: Plugin, ...options: any[]): this  
}  
import { createApp } from 'vue'  
import MyPlugin from './plugins/MyPlugin'  
const app = createApp({  
  /* ... */  
})  
app.use(MyPlugin)

app.mixin() ​

Applies a global mixin (scoped to the application). A global mixin applies its included options to every component instance in the application.

Not Recommended

Mixins are supported in Vue 3 mainly for backwards compatibility, due to their widespread use in ecosystem libraries. Use of mixins, especially global mixins, should be avoided in application code.

For logic reuse, prefer Composables instead.

interface App {  
  mixin(mixin: ComponentOptions): this  
}

app.provide() ​

Provide a value that can be injected in all descendant components within the application.

interface App {  
  provide<T>(key: InjectionKey<T> | symbol | string, value: T): this  
}  
import { createApp } from 'vue'  
const app = createApp(/* ... */)  
app.provide('message', 'hello')

Inside a component in the application:
js 

import { inject } from 'vue'  
export default {  
  setup() {  
    console.log(inject('message')) // 'hello'  
  }  
}

js 

export default {  
  inject: ['message'],  
  created() {  
    console.log(this.message) // 'hello'  
  }  
}

app.runWithContext() ​

Execute a callback with the current app as injection context.

interface App {  
  runWithContext<T>(fn: () => T): T  
}  
import { inject } from 'vue'  
app.provide('id', 1)  
const injected = app.runWithContext(() => {  
  return inject('id')  
})  
console.log(injected) // 1

app.version ​

Provides the version of Vue that the application was created with. This is useful inside plugins, where you might need conditional logic based on different Vue versions.

interface App {  
  version: string  
}  
export default {  
  install(app) {  
    const version = Number(app.version.split('.')[0])  
    if (version < 3) {  
      console.warn('This plugin requires Vue 3')  
    }  
  }  
}

app.config ​

Every application instance exposes a config object that contains the configuration settings for that application. You can modify its properties (documented below) before mounting your application.

js

import { createApp } from 'vue'

const app = createApp(/* ... */)

console.log(app.config)

app.config.errorHandler ​

Assign a global handler for uncaught errors propagating from within the application.

interface AppConfig {  
  errorHandler?: (  
    err: unknown,  
    instance: ComponentPublicInstance | null,  
    // `info` is a Vue-specific error info,  
    // e.g. which lifecycle hook the error was thrown in  
    info: string  
  ) => void  
}  
app.config.errorHandler = (err, instance, info) => {  
  // handle error, e.g. report to a service  
}

app.config.warnHandler ​

Assign a custom handler for runtime warnings from Vue.

interface AppConfig {  
  warnHandler?: (  
    msg: string,  
    instance: ComponentPublicInstance | null,  
    trace: string  
  ) => void  
}  
app.config.warnHandler = (msg, instance, trace) => {  
  // `trace` is the component hierarchy trace  
}

app.config.performance ​

Set this to true to enable component init, compile, render and patch performance tracing in the browser devtool performance/timeline panel. Only works in development mode and in browsers that support the performance.mark API.

app.config.compilerOptions ​

Configure runtime compiler options. Values set on this object will be passed to the in-browser template compiler and affect every component in the configured app. Note you can also override these options on a per-component basis using the compilerOptions option.

app.config.compilerOptions.isCustomElement ​

Specifies a check method to recognize native custom elements.

// treat all tags starting with 'ion-' as custom elements  
app.config.compilerOptions.isCustomElement = (tag) => {  
  return tag.startsWith('ion-')  
}

app.config.compilerOptions.whitespace ​

Adjusts template whitespace handling behavior.

app.config.compilerOptions.whitespace = 'preserve'

app.config.compilerOptions.delimiters ​

Adjusts the delimiters used for text interpolation within the template.

// Delimiters changed to ES6 template string style  
app.config.compilerOptions.delimiters = ['${', '}']

Adjusts treatment of HTML comments in templates.

app.config.compilerOptions.comments = true

app.config.globalProperties ​

An object that can be used to register global properties that can be accessed on any component instance inside the application.

interface AppConfig {  
  globalProperties: Record<string, any>  
}  
app.config.globalProperties.msg = 'hello'

This makes msg available inside any component template in the application, and also on this of any component instance:
js 

export default {  
  mounted() {  
    console.log(this.msg) // 'hello'  
  }  
}

app.config.optionMergeStrategies ​

An object for defining merging strategies for custom component options.

interface AppConfig {  
  optionMergeStrategies: Record<string, OptionMergeFunction>  
}  
type OptionMergeFunction = (to: unknown, from: unknown) => any  
const app = createApp({  
  // option from self  
  msg: 'Vue',  
  // option from a mixin  
  mixins: [  
    {  
      msg: 'Hello '  
    }  
  ],  
  mounted() {  
    // merged options exposed on this.$options  
    console.log(this.$options.msg)  
  }  
})  
// define a custom merge strategy for `msg`  
app.config.optionMergeStrategies.msg = (parent, child) => {  
  return (parent || '') + (child || '')  
}  
app.mount('#app')  
// logs 'Hello Vue'

app.config.idPrefix ​

Configure a prefix for all IDs generated via useId() inside this application.

app.config.idPrefix = 'myApp'

js 

// in a component:  
const id1 = useId() // 'myApp:0'  
const id2 = useId() // 'myApp:1'

app.config.throwUnhandledErrorInProduction ​

Force unhandled errors to be thrown in production mode.