Different layout title on children routes

  • Heelo,

    First post here as I am learning vue + Quasar. So far I loved them both.

    SO I have a route with a layout a several children route. I’d like to have a different title in the layout depending on the children. How can I pass the title up to the layout?


  • Hi Nico, and welcome!

    This is mostly a vue issue, but quasar does come with some helpers for this.

    Here are a couple ways you could do this:

    1. Route Meta
      When declaring your routes in router.js, add a meta field
      path: 'childroute',
      component: load('childcomponent'),
      meta: {
        title: 'Child component' 

    Then in your layout:

    1. Emit an event to update title

    2. Vuex
      Use a centralized store to hold the title. Then access in layout like so:


  • Hi Benoit,

    Thanks for your answer. Sorry if it was rather a vue issue. As I am learning both at the same time, I have hard time to tell sometimes. I guess I’ll go along your first solution.


  • This post is deleted!

  • use vuex like beonitranque’s last post. use a state for page title and set that using an action every time you change a route then use that state property in your q-toolbar-title {{ pageTitle }}. look into his example.

  • @jaiken06 your children route should look’s like this :point_down

            path: '/dividas', component: () => import('pages/dividas/Index.vue'),
            meta: {
              title: 'Dívidas'

Log in to reply