How to set and change ( title of page ) in inertiajs and vue3
Question
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”,
}
}
3 answers
solution1
1 2021-06-03 07:12:42
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
solution2
0 ACCPTED 2021-06-29 18:54:04
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 .
solution3
0
In "inertia-vue3", how do we know that "description" has changed?
import { Head } from '@inertiajs/inertia-vue3'
<Head>
<title>About - My app</title>
<meta head-key="description" name="description" content="This is a page specific description" />
</Head>
In the view-source , nothing can be understood !
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title inertia>test</title>
<body>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.