How to set and change ( title of page ) in inertiajs and vue3

All we need is an easy explanation of the problem, so here it is.

I’m using vue3 and inertiaJs with Laravel8

I want to change the (TITLE of page) if I change the page

I checked in Inertia documentation this code but it doesn’t work with me and the title of the page doesn’t change
I installed vue-meta

  metaInfo() {
     return() {
         title: “Home Page”,
     }
  }

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

return() is a property, not a function. 🙂 So you should do it like this: return

// parent
metaInfo: {
  meta: [{
    vmid: 'description',
    name: 'description',
    content: 'my standard description',
  }]
}

// child
metaInfo() {
  return {
    meta: [{
      vmid: 'description',
      name: 'description',
      content: this.description,
    }]
  }
},

Learn more at this Vue doc

Method 2

As per v0.4.0 of Inertia, they now bundle their own inertia-head component you can use to add meta tags and update the title. There is no longer a need for vue-meta.

Simply add the following directly to your page components:

<inertia-head>
  <title>Your page title</title>
  <meta name="description" content="Your page description">
</inertia-head>

You can find more information in the change logs of v0.4.0.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0