Vue3 app.use() Function

Vue3 全局 APIVue3 Global API

app.use()is a very important function that allows us to easily install plugins and extend application functionality.

By understandingapp.use()the working principle and basic usage, developers can better utilize various tools and libraries in the Vue ecosystem to build efficient and maintainable Vue applications.

app.use()The Role of the Function

app.use()The function is, in Vue 3,createApp()a method of the application instance created. Its main role is to install plugins or global features. Throughapp.use(), we can integrate third-party libraries or custom functionality into the Vue application, making it available throughout the application.

app.use()Basic Usage of the Function

app.use()The basic syntax of the function is as follows:

Example

app.use(plugin, options)
  • plugin: The plugin to be installed, which can be an object or a function.
  • options: An optional configuration object, used to pass parameters to the plugin.

Example

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

const app = createApp(App);

app.use(MyPlugin, {
  someOption: true
});

app.mount('#app');

In this example, we first importcreateAppand the custom pluginMyPlugin. Then, through theapp.use()function, we install theMyPluginplugin into the application, and pass a configuration object{ someOption: true }. Finally, throughapp.mount('#app')mounting the application to the DOM.

app.use()How the Function Works

When callingapp.use(), Vue performs the following steps:

  1. Check the plugin type: Ifpluginis an object, and the object has aninstallmethod, then callplugin.install(app, options). Ifpluginis a function, then directly callplugin(app, options)。
  2. Execute the installation logic: In theinstallmethod or function, developers can register global components, directives, mixins, provide dependencies, etc.
  3. Complete the installation: After the installation is complete, the features provided by the plugin can be used throughout the application.

Custom plugin example:

Example

// MyPlugin.js
export default {
  install(app, options) {
    // Register a global component
    app.component('my-component', {
      template: '<div>My Custom Component</div>'
    });

    // Register a global directive
    app.directive('my-directive', {
      mounted(el, binding) {
        el.style.color = binding.value;
      }
    });

    // Provide a global method
    app.config.globalProperties.$myMethod = function () {
      console.log('My Custom Method');
    };
  }
};

In this example, we define a custom pluginMyPlugin, which registers a global componentmy-component, a global directivemy-directive, and a global method$myMethod。

app.use()Practical Application Scenarios of the Function

1. Install third-party libraries: Many third-party libraries (such as Vue Router, Vuex) are installed through theapp.use()function.

Example

import { createApp } from 'vue';
import router from './router';
import store from './store';

const app = createApp(App);

app.use(router);
app.use(store);

app.mount('#app');

2. Custom global features: Developers can use theapp.use()function to customize global features, such as global components, directives, mixins, etc.

Example

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

const app = createApp(App);

app.use(MyPlugin);

app.mount('#app');

3. Extend the Vue instance: Through theapp.use()function, you can add custom properties and methods to the Vue instance for convenient invocation in components.

Example

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

const app = createApp(App);

app.use(MyPlugin);

app.mount('#app');

Vue3 全局 APIVue3 Global API

Other Extensions