Basic Provide/Inject in Vue.js 3 Components

Show how to pass data from a parent component to a deeply nested child component using the provide and inject options in a Vue.js 3 application.
// Parent component
Vue.component('parent-component', {
  provide() {
    // The data we want to provide to the nested child components
    return {
      providedMessage: 'Hello from Parent!'
  template: `<div>
This is the parent component that uses the 'provide' option to pass 'providedMessage' data for its descendants.
// Child component
Vue.component('child-component', {
  template: `<div>
This is the immediate child component in the hierarchy. It doesn't need to do anything special to pass the provide data on.
// Nested child component (deeply nested)
Vue.component('nested-child-component', {
  inject: ['providedMessage'], // Use 'inject' to receive the provided data
  template: `<div>{{ providedMessage }}</div>`
This is the deeply nested child component. It 'injects' the 'providedMessage' so it can be used within its template.