[Vuejs]-Vue component communication between header component and components in the router-view

by

0👍

Portal and Teleport are the same, just a different name (teleport in Vue3, being the official name).

As of the rest of the question, this explains it very well: https://stackoverflow.com/a/49702934/8816585

Mainly, you need to see if you need to use a store like Pinia (recommended one) and Vuex. Most of the time, you could use a parent/child relationship. Here is another article explaining when you would need something like that: https://markus.oberlehner.net/blog/should-i-store-this-data-in-vuex/#alternatives-to-storing-data-in-vuex

In Vue3, you could even not use a store and rely solely on the singleton pattern + composables (again, a lot of articles are available for that one).

TLDR: use your Vue devtools and inspect the state flowing.
If you need more, reach for more powerful tools.

0👍

Thank you Dr Kissu, I will follow your advices and get to know Pinia (it looks awsome), but for my problem I manage to do it this way :

I Made another home component ‘home-2’, then in my header component, when I click on my checkBox it calls a function in which I check the current route.fullPath and then I redirect the user with route.push()

    goHome(){

   if (this.$route.fullPath ==='/home' || this.$route.fullPath ==='/' ){
        this.$router.push('/home-2');
      }
    },

Leave a comment