DEV Community

Cover image for Laravel Dynamic Page Title | Set Page Title
shani singh
shani singh

Posted on

Laravel Dynamic Page Title | Set Page Title

#laravel #php #tutorial

As Laravel use Blade template engine, many time we have to use the page title to be displayed dynamically,

Let's Consider you have a master layout for your app.
which have a structure something like

<html>
<head>
    <title>App Name - @yield('title')</title>
</head>
<body>
    @section('sidebar')
        This is the master sidebar.
    @show

    <div class="container">
        @yield('content')
    </div>
</body>
Enter fullscreen mode Exit fullscreen mode

Here in Master Layout the code for title is.

<title>App Name - @yield('title')</title>
Enter fullscreen mode Exit fullscreen mode

Then You load the Content Page which looks like.

@extends('layouts.master')

@section('title') {{'Page Title Goes Here'}} @endsection

@section('content')
<p>This is my body content.</p>
@endsection
Enter fullscreen mode Exit fullscreen mode

Here in Content file the code for title is.

@section('title') {{'Page Title Goes Here'}} @endsection
Enter fullscreen mode Exit fullscreen mode

You can watch the video below for live coding.

Thank You for Reading

Reach Out To me.
Twitter
Instagram
TechToolIndia

Top comments (5)

Collapse
 
alnahian2003 profile image
Al Nahian • • Edited

What about a component?
Do I have to use @props to pass the title manually to the parent component from a child component?

Collapse
 
shanisingh03 profile image
shani singh •

hi
If you are using Vue Components then you can use props to pass data from parents to child.

Collapse
 
alnahian2003 profile image
Al Nahian •

I'm using Laravel Blade's Component utilizing the php artisan make:component command

Collapse
 
omatheusoliveira profile image
omatheusoliveira • • Edited

hello, I work on a web system and the index pages work correctly, but when I have to put ex:

@section('title')

Cadastrando Nova <span id="operacao_nome">Ordem de Serviço</span>
Enter fullscreen mode Exit fullscreen mode

@endsection

it just breaks ... I've attached images so you can get a sense of what's going on, please help me

dev-to-uploads.s3.amazonaws.com/up...

dev-to-uploads.s3.amazonaws.com/up...

sry for my bad english, I'm using google translate

Collapse
 
shanisingh03 profile image
shani singh •

Hi @omatheusoliveira

You can't put HTML in title as It goes inside

.

Hope It's Clear now.

Read next

muash10 profile image

Using Stable Diffusion in AWS Bedrock to Generate Images

Muhammed Ashraf -

furkangozukara profile image

Example Training Images Dataset, Trained Models, Grids and Full Training Configs, json files and more

Furkan Gözükara -

dm8ry profile image

Demonstrating Persistence vs. Non-Persistence in Kubernetes with MongoDB

Dmitry Romanoff -

truongpx396 profile image

⚡🚀 ReactJS, TypeScript, Vite with Redux and TanStack (React Query) In Practice ⚛️

Truong Phung -