How to properly set a h1 in another component?

Question

I'm on the path of learning Vue and i have a question that you might find trivial but i struggle to find an answer. First of all, i'm using Vue with Vue Router, in order to build a test blog.

Let's say the h1 of my page is inside the header component, itself included inside the layout.

But then, how can i set the content of this h1 tag for each page, since it belongs to the header, which is only included in the layout? One solution i found was to set meta.h1 on each route declaration, something like that:

{
    path: 'articles',
    meta: {
        h1: 'All the articles'
    }
}

Then, inside the header, i can use a method to get the value of this.$route.meta.h1. Something like that:

methods: {
    h1() {
        return this.$route.meta.h1
    }
}

It works, but it seems kind of wrong, since i don't think that's the job of the route file to handle this. To make it simple, what is the best way, the preferred way, to handle this situation? ty :)

[EDIT]

Here is a simple example page from the bootstrap documentation that could well illustrate my question: https://getbootstrap.com/docs/4.0/examples/blog/

Title of a longer featured blog post

is the h1 and would probably be dynamic, changing from page to page. But it's part of the header component, not part of the articles, of the forum, of the comments or any other component... so if i can reformulate my question, that would be "how can i set this h1 title elegantly" ? Don't think of something complicated, this is a very basic question from a beginner looking toward some answers :p

Answer 1

You can pass props via routes like this, but I'm not sure how you would supply that variable.

I'm not sure of the structure of your app, and if the header component is the header for the entire app, or if it's just a header for each article.. If it's a header just for the article, there is no need to emit events.. (see example below).

---

[CodePen mirror]

---

const appHeader = {
  template: "#app-header",
  computed: {
    dynamicHeader() {
      let r = this.$route.name;
      // caps first letter
      let f = r.charAt(0).toUpperCase() + r.slice(1);
      switch(f){
        case "Home": return f + " Page!";
        case "Contacts": return "Contact Us!";
        case "About": return f + " Us!!"
      }
    }
  }
};

const contactsPage = {
  template: "#contacts-page"
};

const aboutPage = {
  template: "#about-page"
};

const homePage = {
  template: "#home-page"
};

const routes = [
  {
    path: "/",
    name: "home",
    components: {
      header: appHeader,
      content: homePage
    }
  },
  {
    path: "/contact",
    name: "contacts",
    components: {
      header: appHeader,
      content: contactsPage
    }
  },
  {
    path: "/about",
    name: "about",
    components: {
      header: appHeader,
      content: aboutPage
    }
  }
];

const router = new VueRouter({ routes });

new Vue({
  router
}).$mount("#app");

nav.mainNav > * {
  padding: 0 0.75rem;
  text-decoration: none;
}
 nav.mainNav > *:nth-last-child(n+2) {
  border-right: 1px solid #aaa;
}
 #headerContainer {
  background-color: yellow;
  margin-bottom: -20px;
}
 #page {
  border: 1px solid black;
  margin: 20px 20px 20px 20px;
}
 #page > * {
  margin: 10px 10px 10px 10px;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.4/vue-router.min.js"></script>
<div id="app">
  <div>
    <router-view name="header"></router-view>
    <router-view id="page" name="content"></router-view>
  </div>
</div>

<!-- -------------------- -->
<!-- APP HEADER COMPONENT -->
<!-- -------------------- -->
<script type="text/x-template" id="app-header">
  <div>
    <div id="headerContainer">
      <h1>{{ dynamicHeader }}</h1>
    </div>
    <nav class="mainNav">
      <router-link 
        :to="{ name: 'home' }"
      >Home</router-link>
      <router-link 
        :to="{ name: 'about' }"
      >About</router-link>
      <router-link 
        :to="{ name: 'contacts' }"
      >Contacts</router-link>
    </nav>
  </div>
</script>
<!-- -------------------- -->

<!-- ----------------------- -->
<!-- CONTACTS PAGE COMPONENT -->
<!-- ----------------------- -->
<script type="text/x-template" id="contacts-page">
  <div style="background-color:blue;">
    <h2>this is the contacts page</h2>
  </div>
</script>
<!-- ----------------------- -->

<!-- -------------------- -->
<!-- ABOUT PAGE COMPONENT -->
<!-- -------------------- -->
<script type="text/x-template" id="about-page">
  <div style="background-color:green;">
    <h2>this is the about page</h2>
  </div>
</script>
<!-- -------------------- -->

<!-- ------------------- -->
<!-- HOME PAGE COMPONENT -->
<!-- ------------------- -->
<script type="text/x-template" id="home-page">
  <div style="background-color:red;">
    <h2>this is the home page</h2>
  </div>
</script>

Answer 2

I found a solution that seems to better fit what i requested, which is using an event bus as described in this video:

https://www.youtube.com/watch?v=jzh4zQcfB0o

To sum up what the guy says, the idea is to use another instance of Vue as an event bus in order to emit and listen to events between components not related to each other. This way, i can set the h1 title of my page from any components.