Have you ever wondered what Vue plugins are and how they can enhance your project or improve your skills as a Vue developer? If so, you're in the right place!

In this article, I’ll break it down so you will have clear view of how plugins can impact your project.

When does vue execute plugins?

Before discussing performance and best practices, let's first understand how Vue 3 executes plugins:

  1. Vue initializes the app with createApp(App).
  2. Plugins are installed via app.use(plugin). 🚀 (This happens before rendering!)
  3. App.vue is mounted, executing its setup() function.
  4. Child components start rendering.

This means that if you use a provide() in App.vue to share functionalities or information for example about auth, it only becomes available after App.vue is mounted, whereas a plugin runs before rendering begins.

Why does this matter?

If your app depends on globally available data (such as authentication state), a plugin ensures that data is available before rendering begins.

Why plugins are beneficial?

  1. Separation of Concerns = Better Optimization
    Keeping global logic (like auth, API clients, or an event bus) inside a plugin removes it from the UI rendering cycle, reducing unnecessary reactivity.

  2. Ensures Global State is Ready Before Rendering
    For example, a theme management plugin ensures UI settings are loaded before the app starts rendering.

  3. Performance Optimization
    Plugins reduce unnecessary reactivity overhead, unlike provide/inject inside App.vue, which may trigger unwanted re-renders.

  4. Easier Scalability for Large Apps
    As your app grows, keeping global logic inside plugins makes the code modular and easier to maintain. For example, a feature management plugin can dynamically enable or disable features.

Creating a custom Plugin 

// plugins/auth.ts
import { reactive, computed } from 'vue';

export default {
  install(app) {

    // Define reactive authentication state
    const authState = reactive({
      user: null,
      token: localStorage.getItem("token") || null,
    });

    // Mock login function
    const login = async (credentials) => {
      authState.token = "mocked-jwt-token";
      localStorage.setItem("token", authState.token); // Could use sessionStorage or cookies
      authState.user = { id: 1, name: "John Doe" };
    };

    // Provide computed properties for better performance
    const auth = {
      user: computed(() => authState.user),
      token: computed(() => authState.token),
      login,
    };

    // Provide authentication globally
    app.provide("auth", auth);
    app.config.globalProperties.$auth = auth; // Optional
  }
};

When to create custom plugins?

  • You need global dependencies such as authentication, API clients, event bus, or theme management.
  • You need access to certain data before rendering begins.
  • You are using Server-Side Rendering (SSR).
  • You want better scalability and reusability.

Final thoughts

Vue plugins are a powerful way to enhance your application's architecture by keeping global logic modular, improving performance, and ensuring critical dependencies are available before rendering. Whether you're managing authentication, API clients, or theme settings, using plugins can make your codebase more scalable and maintainable.