[Vuejs]-Vue 3: How to pass data from component to App.vue when there is a router-view in between?

by

3👍

✅

Maybe Composition API and ES6 modules?

@/compositions/composition.js
import { ref } from 'vue'

const message = ref('test');

export const useComposition = function() {

  // other functions, for example to mutate message ref
  
  return {
    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'

export default defineComponent({
  setup() {
    const { message } = useComposition();

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

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

👤Cheetha

Leave a comment