Application

createApp()

Create a new Vue application instance. Use this to bootstrap your app.

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.mount('#app');

createSSRApp()

Create an app instance for server-side rendering (SSR). Use only in SSR setups.

import { createSSRApp } from 'vue';
const app = createSSRApp(App);

mount()

Mounts the app instance to a DOM element.

app.mount('#app');

unmount()

Unmounts the app instance and cleans up.

app.unmount();

onUnmount()

Register a callback to run when the app is unmounted.

import { onUnmounted } from 'vue';
onUnmounted(() => {
  // Cleanup code here
});

component()

Globally register a component.

import MyButton from './MyButton.vue';
app.component('MyButton', MyButton);

directive()

Globally register a custom directive.

app.directive('focus', {
  mounted(el) { el.focus(); }
});

use()

Install a plugin to the app.

import MyPlugin from './plugins/my-plugin';
app.use(MyPlugin);

mixin()

Globally register a mixin (not recommended for most modern codebases).

app.mixin({
  created() { console.log('Mixin!'); }
});

provide()

Provide a value globally for dependency injection.

app.provide('key', 'value');

runWithContext()

Run a function within the app’s context (advanced, rarely used).

config

Access the app’s global config object for advanced configuration.

app.config.errorHandler = (err) => { /* ... */ };

config.errorHandler

Custom global error handler for uncaught errors.

config.warnHandler

Custom handler for Vue warnings.

config.performance

Enable performance tracking (dev only).

config.compilerOptions

Advanced: customize template compiler options.

config.globalProperties

Add global properties accessible in all components.

app.config.globalProperties.$http = myHttpClient;

config.optionMergeStrategies

Advanced: customize how options are merged.

config.idPrefix

Advanced: set SSR id prefix.

config.throwUnhandledErrorInProduction

Advanced: throw unhandled errors in production.

General

version

The current Vue version string.

import { version } from 'vue';
console.log(version); // e.g. '3.4.0'

nextTick()

Defer a callback until after the next DOM update cycle.

import { nextTick, ref } from 'vue';
const count = ref(0);
function inc() {
  count.value++;
  nextTick(() => {
    // DOM updated
  });
}

defineComponent()

Helps with type inference and better IDE support when defining components in TypeScript.

import { defineComponent } from 'vue';
export default defineComponent({
  name: 'MyComponent',
  props: { msg: String },
  setup(props) {
    return () => <div>{props.msg}</div>;
  }
});

defineAsyncComponent()

Define a component that is loaded asynchronously (code-splitting).

import { defineAsyncComponent } from 'vue';
const AsyncComp = defineAsyncComponent(() => import('./MyComponent.vue'));