Vue 3: How To Pass Data From Component To App.vue When There Is A Router-view In Between?

I have the following structure: src components Footer.vue views Page.vue App.vue I would like to be able to access the 'message' variable in App.vue, but I can´t figure

Solution 1:

Maybe Composition API and ES6 modules?

@/compositions/composition.jsimport { ref } from'vue'const message = ref('test');

exportconst useComposition = function() {

  // other functions, for example to mutate message refreturn {
    message,
    // ...
  }
}

And now you import your composition in the components that need to access message:

// Footer.vue, App.vue
<script>import { defineComponent } from'vue'import { useComposition } from'@/compositions/composition'exportdefaultdefineComponent({
  setup() {
    const { message } = useComposition();

    return { // make it available in <template>
      message
    }
  },
})
</script>

If you want to quickly get started with Composition API, see this.