How can I change page title when I use full page components-Livewire

Question

1.7k views Asked by Shekh Saifuddin At 24 November 2024 at 12:00

<head>
   <title>dynamic title here - {{ config('app.name') }}</title>
</head>

if you try this, please let me know.

There are 1 answers

**4Jean** · Answer 1 · 2022-01-05 10:22:20

I preferred using JavaScript with Blade Components document.title = 'My Title'

Implemented with Alpine JS

Blade Component (.../components/page-title.blade.php)

@props(['title'])

<div x-data x-init="document.title = @js($title.' - '.config('app.name'))"></div>

so you can call the page-title component anywhere in your blade flies like this

<x-page-title :title="'Homepage'" />

There could be easier methods of doing it the JavaScript way, but this is what I could think of. Hope it helps

The PHP way could be to pass the $title as a prop to the layout, For Example

<x-guest-layout>
    <x-slot name="title">
       Custom Title
    </x-slot>

    ...Page Content
</x-guest-layout>

guest-layout.blade.php now looks like

<html>
<head>
    <title>{{ $title ?? 'Todo Manager' }}</title>
</head>
<body>
    <h1>Todos</h1>
    <hr/>
    {{ $slot }}
</body>