Vue.js 3.0 Tutorial

Vue.js 3.0 Component Advanced

Vue.js 3.0 Transitions & Animations

Vue.js 3.0 Reusable & Combinable

Vue.js 3.0 Advanced

Vue.js 3.0 Tools

Vue.js 3.0 Scale

Vue.js 3.0 Accessibility

Vue.js 3.0 Migrating from Vue2

Vue.js 3.0 Contribute Documentation

Vue.js 3.0 API References

Vue.js 3.0 Style Guide

Vue 3.0 Style Guide

Vue 3.0 composite API provide/inject

Vue 3.0 provides a mechanism to allow parent and child components to communicate directly through the provide and inject functions, part of the Composition API. This method is extremely useful when you want to pass data through many layers of components, also known as 'prop drilling'.

Here's how you can use provide and inject:

Parent Component (Provider)

In the parent component, you use the provide function to make data available to child components. Here is an example:

import { ref, provide } from 'vue'

export default {
  setup() {
    const theme = ref('light')

    provide('theme', theme)

    return {
      theme,
    }
  },
}

In this example, we're creating a ref for theme and providing it to child components. The key 'theme' is the identifier for the data we want to provide.

Child Component (Consumer)

In the child component, you use the inject function to access the data. Here's how:

import { inject } from 'vue'

export default {
  setup() {
    const theme = inject('theme')

    return {
      theme,
    }
  },
}

In this example, the inject function is used to inject the theme ref that was provided by the parent component. Now theme can be used just like a normal ref in the child component.

Note: provide and inject mainly provide a way to define an "inheritable" dependency. They should not be used for state management (use Vuex for that). Also, unlike props and events, provide and inject are not part of the component instance itself. Instead, provide and inject are called during the setup() life-cycle stage.

These are powerful tools for passing data and functions down multiple levels of the component tree, but they should be used judiciously, as they can make your code harder to understand if used excessively.

Passing Data Down the Component Tree with provide/inject in Vue 3.0:

Use provide in a parent component to share data.
Use inject in child components to access the provided data.

// ParentComponent.vue
import { ref, provide } from 'vue';

export default {
  setup() {
    const data = ref('Shared data');
    provide('sharedData', data);

    return {
      data,
    };
  },
};

// ChildComponent.vue
import { inject } from 'vue';

export default {
  setup() {
    const sharedData = inject('sharedData');

    return {
      sharedData,
    };
  },
};

Dynamic provide and inject Bindings in Vue 3.0:

Dynamically bind data with reactive objects.

// ParentComponent.vue
import { reactive, provide } from 'vue';

export default {
  setup() {
    const state = reactive({
      theme: 'light',
      language: 'en',
    });

    provide('appState', state);

    return {
      state,
    };
  },
};

// ChildComponent.vue
import { inject } from 'vue';

export default {
  setup() {
    const appState = inject('appState');

    return {
      appState,
    };
  },
};

Vue 3.0 provide and inject for Cross-Component Communication:

Facilitate communication between distant components.

// ParentComponent.vue
import { ref, provide } from 'vue';

export default {
  setup() {
    const message = ref('');

    provide('message', message);

    return {
      message,
    };
  },
};

// DistantChildComponent.vue
import { inject } from 'vue';

export default {
  setup() {
    const message = inject('message');

    return {
      message,
    };
  },
};

Vue 3.0 provide and inject with Reactivity:

Ensure reactivity in shared data.

// ParentComponent.vue
import { ref, provide } from 'vue';

export default {
  setup() {
    const count = ref(0);

    provide('count', count);

    return {
      count,
    };
  },
};

// ChildComponent.vue
import { inject, watch } from 'vue';

export default {
  setup() {
    const count = inject('count');

    watch(count, (newValue) => {
      console.log('Count changed:', newValue);
    });

    return {
      count,
    };
  },
};

Customizing provide and inject Behavior in Vue 3.0:

Customize behavior using default values.

// ParentComponent.vue
import { ref, provide } from 'vue';

export default {
  setup() {
    const config = ref({
      theme: 'light',
      language: 'en',
    });

    provide('config', config);

    return {
      config,
    };
  },
};

// ChildComponent.vue
import { inject } from 'vue';

export default {
  setup() {
    const config = inject('config', ref({}));

    return {
      config,
    };
  },
};

Vue 3.0 provide and inject with TypeScript:

Define types for provided data.

// ParentComponent.vue
import { ref, provide, Ref } from 'vue';

export default {
  setup() {
    const message: Ref<string> = ref('');

    provide('message', message);

    return {
      message,
    };
  },
};

// ChildComponent.vue
import { inject, Ref } from 'vue';

export default {
  setup() {
    const message: Ref<string> = inject('message');

    return {
      message,
    };
  },
};

Vue 3.0 provide and inject and Component Composition:

Compose components by sharing state.

// ParentComponent.vue
import { reactive, provide } from 'vue';

export default {
  setup() {
    const state = reactive({
      theme: 'light',
    });

    provide('themeState', state);

    return {
      state,
    };
  },
};

// ChildComponent.vue
import { inject } from 'vue';

export default {
  setup() {
    const themeState = inject('themeState');

    return {
      themeState,
    };
  },
};

Vue 3.0 provide and inject with Reactive Objects:

Ensure reactivity with reactive objects.

// ParentComponent.vue
import { reactive, provide } from 'vue';

export default {
  setup() {
    const user = reactive({
      name: 'John Doe',
      age: 25,
    });

    provide('user', user);

    return {
      user,
    };
  },
};

// ChildComponent.vue
import { inject } from 'vue';

export default {
  setup() {
    const user = inject('user');

    return {
      user,
    };
  },
};