DEV Community: Daniel Kasperczyk

When to use composables vs provide/inject in Vue 3

Daniel Kasperczyk — Mon, 07 Apr 2025 06:47:29 +0000

Vue 3 introduced composables and provide/inject, two powerful patterns for managing state and logic. Both have their place, but choosing the right one at the right time can make your code more scalable, readable, and maintainable.

In this article, I'll break down when to use composables and when to use provide/inject.

Composables: the power of reusable logic

A composable is a function that encapsulates reusable logic using Vue's Composition API. It helps keep components clean by extracting logic into separate functions that can be used across multiple components.

When to use composables

✅ You need to reuse logic in multiple components.
✅ You're handling side effects (API calls, event listeners, etc.).
✅ You want to keep your components small and focused.

Example: A `useFetch` composable

Let’s create a composable to fetch data from an API:

// composables/fetch.ts
export function useFetch(url: string) {
  const data = ref(null);
  const error = ref(null);

  const fetch = async () => {
    try {
      const res = await fetch(url);
      data.value = await res.json();
    } catch (err) {
      error.value = err;
    }
  };
  return { data, error, fetchData };
}

//components/MyComponent.vue
<template>
 ...
</template>
<script setup lang="ts">
import { useFetch } from '@/composables/useFetch';

const { data, error, fetch } = useFetch('https://api.example.com/posts');
</script>

Another good examples can be found in:

VueUse GitHub repo: Link
Vuetify GitHub repo: Link
TanStack VueQuery GitHub repo: Link

Provide/inject: simplifying state sharing

provide/inject is Vue's dependency injection system. It allows you to pass state from a parent component to deeply nested components, avoiding prop drilling (passing props down multiple levels).

When to use provide/inject

✅ You need to share state across deeply nested components.
✅ You want to avoid prop drilling.
✅ You need to provide global configurations (e.g., themes, authentication state).

Example: Pass theme to deeply nested components

// Parent.vue (Providing the theme)
provide('theme', ref('dark'));

// Child.vue (Injecting the theme)
const theme = inject('theme', 'light'); // Default to 'light' if no provider

Another good examples can be found in (search for provide key):

Vuetify GitHub repo: Link
Vue i18n GitHub repo: Link
Pinia GitHub repo: Link

Composables vs. provide/inject: how to choose?

Use composables when

You need to reuse logic across multiple components (e.g., fetching data, event listeners, form validation).
You are handling side effects like API calls, local storage interactions, or WebSocket connections.
You want to keep components lean by extracting complex logic into separate files.
You need to keep the state local to a specific component tree, not globally shared.
You want better testability – composables make it easier to isolate logic for unit testing.

Example:

Fetching data (useFetch)
Detecting screen size (useWindowSize)
Debouncing user input (useDebounce)

Use provide/inject when

You need to share state between deeply nested components without prop drilling.
You have a single source of truth (e.g., a global theme or authentication).
You need to pass dependencies down the component tree, such as configurations or event buses.
You don't need the state to be reactive globally, just within a specific component tree.
You want to improve performance by avoiding excessive prop passing and reactivity.

Example:

Providing a theme or locale (provide('theme', ref('dark')))
Sharing form state between parent and child components
Dependency injection for plugins or services

Summary

Use composables when you need reusable logic across multiple components, such as API calls, event listeners, or computed values. They help keep components clean, modular, and testable.
Use provide/inject when you need to share state between deeply nested components, avoiding prop drilling. It's great for passing global configs or themes within a specific component tree.

How to choose?

Reusable logic → Composables
Deeply shared state → Provide/Inject

Getting Started with Vue 3 Plugins: What You Need to Know

Daniel Kasperczyk — Mon, 31 Mar 2025 05:40:02 +0000

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:

Vue initializes the app with createApp(App).
Plugins are installed via app.use(plugin). 🚀 (This happens before rendering!)
App.vue is mounted, executing its setup() function.
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?

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.
Ensures Global State is Ready Before Rendering
For example, a theme management plugin ensures UI settings are loaded before the app starts rendering.
Performance Optimization
Plugins reduce unnecessary reactivity overhead, unlike provide/inject inside App.vue, which may trigger unwanted re-renders.
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.

Create Responsive and Adaptive UI's in Vue with Dynamic Components

Daniel Kasperczyk — Thu, 05 Dec 2024 13:37:46 +0000

Dynamic components are a powerful feature in Vue.js that help create responsive and adaptive user interfaces tailored to your applications' specific needs and contexts. At our Vue.js agency, we rely on dynamic components to deliver scalable, enterprise-grade, flexible, and maintainable applications.

Why Use Dynamic Components?

Dynamic components eliminate the need for multiple v-if conditions, which can clutter your templates and increase maintenance overhead. With dynamic components, you can:

Reduce repetitive props or actions.
Enhance readability for more modular, maintainable code.
Streamline the development process, especially for applications requiring flexible UI structures.

In this short tip article, you will learn how to use it in your Vue app to make your User Interface more responsive and adaptive.

🤔 How to use Dynamic Components in Vue?

To render a dynamic component in Vue, use the tag with the is attribute. The is attribute accepts a component name or data property, such as is="currentComponent", to determine which component to display dynamically.

Here’s a basic example:

<component :is="currentComponent" />

As in other Vue components, we can pass props, react to events, or even create two-way data binding with v-model, as in the example below:

<component :is="currentComponent" :value="value" @input="onInput"/>
// or
<component :is="currentComponent" v-model="value" />

Vue removes inactive components from the DOM by default when switching between dynamic components, causing their state to reset. To preserve state across component switches, wrap your <component> tag with Vue's <keep-alive> element:

<keep-alive>
  <component :is="currentComponent" />
</keep-alive>

It caches inactive components, ensuring data like form inputs or sessions persists across views, improving the user experience.

✅ Summary

Dynamic components simplify UI logic, boost efficiency, and enhance maintainability, making them essential for modular code and user engagement. Businesses value Vue.js experts proficient in this feature for professional, scalable solutions.

🙋 Want to Dive Deeper?

Explore this topic in greater detail in our blog post, where we’ve covered the Vue 3 Dynamic Components in building flexible, responsive, and maintainable user interfaces. You’ll learn the fundamentals of dynamic components, including practical implementation and tips. A perfect read for developers looking to enhance their Vue applications with modular and adaptive UI solutions.