Vue3 Global API

Vue3 Global API is as follows:

No. API & Description Example
1 createApp()
Create a Vue application instance, usually used for client-side rendering.		 const app = createApp(App)
2 createSSRApp()
Create a Vue application instance for server-side rendering (SSR).		 const app = createSSRApp(App)
3 app.mount()
Mount the Vue application instance to the specified DOM element.		 app.mount('#app')
4 app.unmount()
Unmount the Vue application instance.		 app.unmount()
5 app.onUnmount()
Register a callback function for when the application is unmounted.		 app.onUnmount(() => { console.log('App is being unmounted') })
6 app.component()
Register a global component, making the component usable anywhere.		 app.component('MyComponent', MyComponent)
7 app.directive()
Register a global directive, allowing the creation of custom directives.		 app.directive('focus', { mounted(el) { el.focus() } })
8 app.use()
Install a plugin, which can provide additional functionality for the application.		 app.use(SomePlugin)
9 app.mixin()
Register a global mixin, providing shared data or methods to all components.		 app.mixin({ methods: { globalMethod() { ... } } })
10 app.provide()
Provide dependencies to the entire application, sharing data across components.		 app.provide('key', 'some value')
11 app.runWithContext()
Run a function in the Vue application context, allowing access to context data.		 app.runWithContext(() => { console.log('Running inside app context') })
12 app.version
Get the current version number of Vue.		 console.log(app.version)
13 app.config
Get and set the global configuration of the application instance.		 app.config.globalProperties.$myProperty = 'value'
14 app.config.errorHandler
Set a global error handler function, triggered when an uncaught error occurs in the application.		 app.config.errorHandler = (err, vm, info) => { console.error(err) }
15 app.config.warnHandler
Set a global warning handler function to handle warning messages in the application.		 app.config.warnHandler = (msg, vm, trace) => { console.warn(msg) }
16 app.config.performance
Enable performance monitoring to provide rendering performance data.		 app.config.performance = true
17 app.config.compilerOptions
Configure options for the template compiler, controlling the behavior of template compilation.		 app.config.compilerOptions.delimiters = ['[[', ']]']
18 app.config.globalProperties
Set global properties, accessible by all components in the application.		 app.config.globalProperties.$myGlobalProperty = 'value'
19 app.config.optionMergeStrategies
Define component option merging strategies, controlling how component options are merged.		 app.config.optionMergeStrategies.methods = (parent, child) => { return { ...parent, ...child } }
20 app.config.idPrefix
Set the prefix for Vue instance IDs, defaulting to "vue-".		 `app.config.idPrefix = 'myApp-'
21 app.config.throwUnhandledErrorInProduction
Control whether unhandled errors are thrown in the production environment.		 app.config.throwUnhandledErrorInProduction = false
22 version
Get the current version number of Vue.		 console.log(Vue.version)
23 nextTick()
Execute a deferred callback after the DOM update is complete, used to handle asynchronous DOM updates.		 nextTick(() => { console.log('DOM updated') })
24 defineComponent()
Used to define components, providing type inference and simpler syntax.		 export default defineComponent({ name: 'MyComponent' })
25 defineAsyncComponent()
Define asynchronous components, which are lazy-loaded when needed.		 const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'))

Application Instance API

1. createApp()

  • Description: Create a Vue application instance.

  • Usage: createApp(rootComponent, rootProps)

  • Parameters:

    • rootComponent: Root component.

    • rootProps(Optional): Props passed to the root component.

Example

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

const app = createApp(App);

2. createSSRApp()

  • Description: Create a Vue application instance that supports server-side rendering (SSR).

  • Usage: createSSRApp(rootComponent, rootProps)

  • Parameters:

    • rootComponent: Root component.

    • rootProps(Optional): Props passed to the root component.

Example

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

const app = createSSRApp(App);

3. app.mount()

  • Description: Mount the application to a DOM element.

  • Usage: app.mount(container)

  • Parameters:

    • container: DOM element or selector string.

Example

app.mount('#app');

4. app.unmount()

  • Description: Unmount the application instance.

  • Usage: app.unmount()

Example

app.unmount();

5. app.onUnmount()

  • Description: Register a callback function to be called when the application is unmounted.

  • Usage: app.onUnmount(callback)

  • Parameters:

    • callback: The function called when unmounting.

Example

app.onUnmount(() => {
  console.log('App unmounted');
});

6. app.component()

  • Description: Register or retrieve a global component.

  • Usage:

    • Register:app.component(name, component)

    • Retrieve:app.component(name)

  • Parameters:

    • name: Component name.

    • component: Component definition.

Example

app.component('MyComponent', {
  template: '<div>My Component</div>'
});

7. app.directive()

  • Description: Register or retrieve a global directive.

  • Usage:

    • Register:app.directive(name, directive)

    • Retrieve:app.directive(name)

  • Parameters:

    • name: Directive name.

    • directive: Directive definition.

Example

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

8. app.use()

  • Description: Install a plugin.

  • Usage: app.use(plugin, options)

  • Parameters:

    • plugin: Plugin.

    • options(Optional): Plugin options.

Example

import MyPlugin from './MyPlugin';
app.use(MyPlugin);

9. app.mixin()

  • Description: Global mixin options.

  • Usage: app.mixin(mixin)

  • Parameters:

    • mixin: Mixin object.

Example

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

10. app.provide()

  • Description: Provide global dependencies.

  • Usage: app.provide(key, value)

  • Parameters:

    • key: Dependency name.

    • value: Dependency value.

Example

app.provide('theme', 'dark');

11. app.runWithContext()

  • Description: Run a function in the current application context.

  • Usage: app.runWithContext(fn)

  • Parameters:

    • fn: The function to run.

Example

app.runWithContext(() => {
  console.log('Running with app context');
});

12. app.version

  • Description: Get the Vue version.

  • Usage: app.version

Example

console.log(app.version);

13. app.config

  • Description: Application configuration object.

  • Usage: app.config

Example

app.config.errorHandler = (err) => {
  console.error(err);
};

14. app.config.errorHandler

  • Description: Global error handler function.

  • Usage: app.config.errorHandler = (err, vm, info) => {}

  • Parameters:

    • err: Error object.

    • vm: The component instance where the error occurred.

    • info: Error message.

Example

app.config.errorHandler = (err) => {
  console.error('Global error:', err);
};

15. app.config.warnHandler

  • Description: Global warning handler function.

  • Usage: app.config.warnHandler = (msg, vm, trace) => {}

  • Parameters:

    • msg: Warning message.

    • vm: The component instance where the warning occurred.

    • trace: Warning stack.

Example

app.config.warnHandler = (msg) => {
  console.warn('Global warning:', msg);
};

16. app.config.performance

  • Description: Enable performance tracking.

  • Usage: app.config.performance = true

Example

app.config.performance = true;

17. app.config.compilerOptions

  • Description: Configure options for the template compiler.

  • Usage: app.config.compilerOptions = { /* options */ }

Example

app.config.compilerOptions = { whitespace: 'preserve' };

18. app.config.globalProperties

  • Description: Add global properties.

  • Usage: app.config.globalProperties[key] = value

Example

app.config.globalProperties.$myGlobal = 'Hello';

19. app.config.optionMergeStrategies

  • Description: Custom option merging strategy.

  • Usage: app.config.optionMergeStrategies[key] = strategy

Example

app.config.optionMergeStrategies.customOption = (parent, child) => {
  return child || parent;
};

20. app.config.idPrefix

  • Description: Set the component ID prefix.

  • Usage: app.config.idPrefix = 'my-app-'

Example

app.config.idPrefix = 'my-app-';

21. app.config.throwUnhandledErrorInProduction

  • Description: Throw unhandled errors in the production environment.

  • Usage: app.config.throwUnhandledErrorInProduction = true

Example

app.config.throwUnhandledErrorInProduction = true;

General API

1. version

  • Description: Get the Vue version.

  • Usage: Vue.version

Example

console.log(Vue.version);

2. nextTick()

  • Description: Execute a callback after the next DOM update cycle ends.

  • Usage: nextTick(callback)

  • Parameters:

    • callback: Callback function.

Example

import { nextTick } from 'vue';
nextTick(() => {
  console.log('DOM updated');
});

3. defineComponent()

  • Description: Define a component.

  • Usage: defineComponent(options)

  • Parameters:

    • options: Component options.

Example

import { defineComponent } from 'vue';
const MyComponent = defineComponent({
  template: '<div>My Component</div>'
});

4. defineAsyncComponent()

  • Description: Define an asynchronous component.

  • Usage: defineAsyncComponent(loader)

  • Parameters:

    • loader: Async loading function.

Example

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