CODEWITHSUNDEEP
phplaravelvue.jslaravel-bladelaravel-jetstream
Andrew
Andrew

Reputation: 1833

How to Change the Logo in a Laravel Jetstream Application

I am new to Laravel and am trying to change the logo in a Laravel application with Jetstream and Inertia.

I have gone over the documentation as well as resources on Laracasts and understand that I need to update the svg (or can use a png/jpg etc by using the html img tag) in the following files:

The Logo is referenced in AppLayout.vue via a jet-application-mark element:

<div class="flex-shrink-0 flex items-center">
    <inertia-link :href="route('dashboard')">
        <jet-application-mark class="block h-9 w-auto" />
    </inertia-link>
</div>

As well as a jet-application-logo element in the Welcome.vue:

<div>
    <jet-application-logo class="block h-12 w-auto" />
</div>

In each of the files listed above I replaced the svg with an html img to a resource:

<img src="{{ asset('images/enhanced-logo.png') }}" />

After changing the files above and rebuilding, the original Jetstream logo remains - the only place that it is working is in login.blade.php, the following code does pull in the image that I want:

<x-slot name="logo">
    <x-jet-authentication-card-logo />
</x-slot>

Any direction as to what I am doing wrong would be appreciated.

Upvotes: 4

Views: 12747

Answers (3)

Ludo
Ludo

Reputation: 783

Using Laravel 10 and Livewire it is located in

resources/views/components/authentication-card-logo.blade.php

Upvotes: 1

Andrew
Andrew

Reputation: 1833

Due to the fact that I am using the Inertia stack, I needed to edit the following files:

  • resources/js/Jetstream/ApplicationLogo.vue
  • resources/js/Jetstream/ApplicationMark.vue

With:

<template>
      <img src="/images/enhanced-logo.png"/>
</template>

As well as the file:

  • resources/views/vendor/jetstream/components/authentication-card-logo.blade.php

With:

<img src="{{ asset('images/enhanced-logo.png') }}" />

To replace the existing Jetstream logo with my image.

Upvotes: 1

Donkarnash
Donkarnash

Reputation: 12845

To change logo in a Laravel Jetstream application:

The authentication views in a Jetstream application, regardless of the stack are simple blade views common for both stacks. To change the logo for authentication views edit resources/views/vendor/jetstream/components/authentication-card-logo.blade.php

<a href="/">
    //Replace the default svg with your own logo svg or an image
    <img src="custom/logo.png" />
</a>

Then depending upon the stack

Inertia stack

Replace the default logo with your own custom logo in

  • resources/js/Jetstream/ApplicationLogo.vue
  • resources/js/Jetstream/ApplicationMark.vue

with

<template>
    //Replace the default svg with your own logo svg or an image
    <img src="custom/logo.png" />
</template>

Livewire stack

Replace the default logo with your own custom logo in

  • resources/views/vendor/jetstream/components/application-logo.blade.php
  • resources/views/vendor/jetstream/components/application-mark.blade.php

with

//Replace the default svg with your own logo svg or an image
<img src="custom/logo.png" />

Upvotes: 3

Related Questions