Why Laravel-livewire 'wire:model' not working? - laravel

I am using Laravel 8.
My Livewire Controller
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class SearchDropdown extends Component
{
public $search = 'hello there';
public function render()
{
return view('livewire.search-dropdown');
}
}
Livewire blade
<div class="relative mt-3 md:mt-0">
<input wire:model="search" type="text" class="bg-gray-800 text-sm rounded-full w-64 px-4 pl-8 py-1 focus:outline-none focus:shadow-outline" placeholder="Search">
<div class="absolute top-0">
<svg class="fill-current w-4 text-gray-500 mt-2 ml-2" viewBox="0 0 24 24"><path class="heroicon-ui" d="M16.32 14.9l5.39 5.4a1 1 0 01-1.42 1.4l-5.38-5.38a8 8 0 111.41-1.41zM10 16a6 6 0 100-12 6 6 0 000 12z"/></svg>
</div>
<div class="absolute text-sm bg-gray-800 rounded w-64 mt-4">
<ul>
<li class="border-b border-gray-700">
{{ $search }}
</li>
<li class="border-b border-gray-700">
Avengers
</li>
<li class="border-b border-gray-700">
Avengers
</li>
</ul>
</div>
</div>
I have included Livewire in my main.blade file
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Movie App</title>
<link rel="stylesheet" href="{{ URL::asset('/css/main.css') }}">
<livewire:styles />
</head>
And this before the end of the body
<livewire:scripts />
Now when I write something in my searchbox, it should have updated as i write, but it's not updating instead showing "hello there" - initial value of the $search variable.
P.S :
This is what its showing in my browser. For some reason livewire.js is getting error. How to fix this?


I had the same issue, fixed it by adding
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.x.x/dist/alpine.min.js"></script>
in the main layout file because apparently, it was missing that.


Add
#livewireStyles
<link rel="stylesheet"
href="{{ mix('css/app.css') }}">
and
<script src="{{ mix('js/app.js') }}"></script>
#livewireScripts
at your main layouts file, I think it should be worked


Try wrapping your content with a div and container class in your Livewire blade.
<div class="container">
<div class="relative mt-3 md:mt-0">
<input wire:model="search" type="text" class="bg-gray-800 text-sm rounded-full w-64 px-4 pl-8 py-1 focus:outline-none focus:shadow-outline" placeholder="Search">
<div class="absolute top-0">
<svg class="fill-current w-4 text-gray-500 mt-2 ml-2" viewBox="0 0 24 24"><path class="heroicon-ui" d="M16.32 14.9l5.39 5.4a1 1 0 01-1.42 1.4l-5.38-5.38a8 8 0 111.41-1.41zM10 16a6 6 0 100-12 6 6 0 000 12z"/></svg>
</div>
<div class="absolute text-sm bg-gray-800 rounded w-64 mt-4">
<ul>
<li class="border-b border-gray-700">
{{ $search }}
</li>
<li class="border-b border-gray-700">
Avengers
</li>
<li class="border-b border-gray-700">
Avengers
</li>
</ul>
</div
</div>


I faced this problem and I solve it by just clearing cache ...
try to add this code snippet to your web route for fast clearance of caches
Route::get('/clear', function() {
Artisan::call('cache:clear');
Artisan::call('route:cache');
Artisan::call('view:clear');
Artisan::call('config:cache');
return "all cleared ...";
});
or just in cmd
Php artisan cache:clear
Php artisan route:cache
.... and so on


I followed the advise by #Kamlesh Paul and it worked.
you need to setup livewire base url
in config/livewire.php
'asset_url' => env('APP_URL', 'http://localhost'),
then in .env
APP_URL=your_app_url

Related

In Laravel how can I make a side bar when pressed goes to the page content link but still is the current page

I want to have the same mechanism like this https://www.w3schools.com/html/default.asp but in laravel application
This is my code on routes/web.php
Route::get('tutorial', function(){
$tutorial = Tutorial::get();
return view('tutorial.index')->with('tutorial', $tutorial);
})->name('index-tutorial');
// Show one Tutorial by Id
Route::get('tutorial/{id}', function($id){
$tutorial = Tutorial::findOrFail($id);
return view('tutorial.show')->with('tutorial', $tutorial);
})->name('show-tutorial');
for my Blade template
tutorial/show.blade.php
<div class="container">
#foreach($tutorial as $tutorial)
<h1>{{$tutorial->title}}</h1>
<p>{{$tutorial->title_description}}</p>
<p>{{$tutorial->title_lesson}}</p>
<div class="btn-group btn-group-lg d-flex justify-content-end mb-3" role="group">
<form class="mx-3" action="{{route('delete-tutorial', $tutorial->id)}}" method="POST">
#csrf
#method('DELETE')
<button class="btn btn-danger" name="Delete">Delete</button>
</form>
<form action="{{route('edit-tutorial', $tutorial->id)}}" method="GET">
#csrf
<button class="btn btn-primary" name="Edit">Edit</button>
</form>
#endforeach
</div>
tutorial/index.blade.php
<main class="d-flex flex-nowrap">
<div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark"
style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-
auto text-white text-decoration- none">
<svg class="bi pe-none me-2" width="40" height="32"><use
xlink:href="#bootstrap"></use></svg>
<span class="fs-4 text-white">MySql Lessons</span>
</a>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
#forelse($tutorial as $link)
<li class="nav-item">
<a href="{{route('show-tutorial', $link->id)}}" class="nav-
link">
<p class="text-white bg-dark">{{$link->title}}</p>
</a>
</li>
#empty
<p class="text-white bg-dark">No available lesson</p>
#endforelse
</ul>
</div>
I been researching a lot about having this mechanism
This one is different from other questions because i don't use controllers for this

Have you tried using example tamplates from Bootstrap?
Check here https://getbootstrap.com/docs/5.3/examples/
it's quite easy actually, you just need to copy the html code from bootstrap tamplate and tweak here and there. use
#include to add your desired components, #yield for your desired content page. and use #extends and #section inside your content pages.
roughly like this.
your main blade view
<!doctype html>
<html lang="en">
<head>
</head>
<body>
#include('partials.adminNav')
<div class="row">
#include('partials.adminSideBar')
</div>
<div class="container">
#yield('container')
</div>
</body>
#include('partials.footer')
</html>
for your side bar you just need to put links for your desired page
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky pt-3 sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">
<span data-feather="home" class="align-text-bottom"></span>
//Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//your links/route for page content">
<span data-feather="file" class="align-text-bottom"></span>
//links name
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//your links/route for page content">
<span data-feather="edit" class="align-text-bottom"></span>
//Links name
</a>
</li>
</ul>
</div>
</nav>
in like this in your content pages
#extends('layouts.adminMain')
#section('container')
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="py-4">
// your content here
</div>
</main>
#endsection
make use of the #include and #yield build in function. this way you'll have a consistent navbar/sidebar but can changes the content within.
Hope this works for you :)

Instead of using route closures, I manage to convert them to a TutorialController
Route::resource('tutorial', TutorialController::class);
for the aside bar routes/web
view()->composer('layout.sidebar', function($view){
$tutorial = Tutorial::all();
$view->with('links', $tutorial);
});
layout/sidebar.blade.php
<main class="d-flex flex-nowrap">
<div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark"
style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto
text-white text-decoration-none">
<svg class="bi pe-none me-2" width="40" height="32"><use
xlink:href="#bootstrap"></use></svg>
<span class="fs-4 text-white">MySql Lessons</span>
</a>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
#forelse($links as $link)
<li class="nav-item">
<a href="{{ route('tutorial.show', $link->id)}}" class="nav-link">
<p class="text-white bg-dark">{{$link->title}}</p>
</a>
</li>
#empty
<p class="text-white bg-dark">No available lesson</p>
#endforelse
</ul>
</div>
</main>
in my index.blade and show.blade you can add #include('layout.sidebar')
#extends('layout.app')
#section('title', "Show Tutorials")
#section('content')
#include('layout.sidebar')
<div class="container">
<h1>{{$tutorial->title}}</h1>
<p>{{$tutorial->title_description}}</p>
<p>{{$tutorial->title_lesson}}</p>
<div class="btn-group btn-group-lg d-flex justify-content-end mb-3"
role="group">
<form class="mx-3" action="{{route('tutorial.destroy', $tutorial-
>id)}}" method="POST">
#csrf
#method('DELETE')
<button class="btn btn-danger" name="Delete">Delete</button>
</form>
<form action="{{route('tutorial.edit', $tutorial->id)}}" method="GET">
#csrf
<button class="btn btn-primary" name="Edit">Edit</button>
</form>
</div>
#endsection

Installing Vue 3.x In LVM Stack Using Webpack and NPM

I'm having a difficult time getting Vue to work in a blade.php page I have in my laravel website.
Here is the blade page code:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap" rel="stylesheet">
<!-- Custom css -->
<link href="{{ url('sass/custom.scss.css') }}" type="text/css" rel="stylesheet">
<!-- Fav icon -->
<link rel="icon" type="image/png" href="{{ url('omnisection.png') }}">
<!-- development version, includes helpful console warnings -->
<script src="{{ mix('/js/vue.js') }}"></script>
<script src="{{ mix('/js/app.js') }}"></script>
<script src="{{ mix('/js/RecordRTC.js') }}"></script>
<script src="{{ mix('/js/customrecrtc.js') }}"></script>
<!-- Styles -->
<style>
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent}[hidden]{display:none}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #e2e8f0}a{color:inherit;text-decoration:inherit}svg,video{display:block;vertical-align:middle}video{max-width:100%;height:auto}.bg-white{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.bg-gray-100{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.border-gray-200{--border-opacity:1;border-color:#edf2f7;border-color:rgba(237,242,247,var(--border-opacity))}.border-t{border-top-width:1px}.flex{display:flex}.grid{display:grid}.hidden{display:none}.items-center{align-items:center}.justify-center{justify-content:center}.font-semibold{font-weight:600}.h-5{height:1.25rem}.h-8{height:2rem}.h-16{height:4rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.leading-7{line-height:1.75rem}.mx-auto{margin-left:auto;margin-right:auto}.ml-1{margin-left:.25rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.ml-4{margin-left:1rem}.mt-8{margin-top:2rem}.ml-12{margin-left:3rem}.-mt-px{margin-top:-1px}.max-w-6xl{max-width:72rem}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.p-6{padding:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.pt-8{padding-top:2rem}.fixed{position:fixed}.relative{position:relative}.top-0{top:0}.right-0{right:0}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.text-center{text-align:center}.text-gray-200{--text-opacity:1;color:#edf2f7;color:rgba(237,242,247,var(--text-opacity))}.text-gray-300{--text-opacity:1;color:#e2e8f0;color:rgba(226,232,240,var(--text-opacity))}.text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.text-gray-500{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.text-gray-600{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.text-gray-700{--text-opacity:1;color:#4a5568;color:rgba(74,85,104,var(--text-opacity))}.text-gray-900{--text-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--text-opacity))}.underline{text-decoration:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.w-5{width:1.25rem}.w-8{width:2rem}.w-auto{width:auto}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}#media (min-width:640px){.sm\:rounded-lg{border-radius:.5rem}.sm\:block{display:block}.sm\:items-center{align-items:center}.sm\:justify-start{justify-content:flex-start}.sm\:justify-between{justify-content:space-between}.sm\:h-20{height:5rem}.sm\:ml-0{margin-left:0}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pt-0{padding-top:0}.sm\:text-left{text-align:left}.sm\:text-right{text-align:right}}#media (min-width:768px){.md\:border-t-0{border-top-width:0}.md\:border-l{border-left-width:1px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}#media (min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}#media (prefers-color-scheme:dark){.dark\:bg-gray-800{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.dark\:bg-gray-900{--bg-opacity:1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.dark\:border-gray-700{--border-opacity:1;border-color:#4a5568;border-color:rgba(74,85,104,var(--border-opacity))}.dark\:text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.dark\:text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.dark\:text-gray-500{--tw-text-opacity:1;color:#6b7280;color:rgba(107,114,128,var(--tw-text-opacity))}}
</style>
<style>
body {
font-family: 'Nunito', sans-serif;
}
</style>
</head>
<body class="antialiased">
<div id="app">
#{{ message }}
</div>
<script>
var test = new Vue({
el: '#app',
data: {
message: 'hi'
}
});
</script>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/"><img class="rounded-3" src="{{ url('omnisection(new).png') }}" style="width:172px;height:108px" /></a>
<button class="navbar-toggler brotoggle" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
#foreach($pages as $page)
<li class="nav-item">
<a href="{{ url($page['url']) }}">
<button class="btn btn-lg btn-outline-secondary brobutton" type="button">{{ $page['page_name'] }}</button>
</a>
</li>
#endforeach
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search Requests" aria-label="Search">
<a href="{{ url('search') }}">
<button class="btn btn-outline-secondary brobutton" type="submit">Search</button>
</a>
</form>
</div>
</div>
</nav>
<div class="relative flex items-top justify-center bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0">
#if (Route::has('login'))
<div class="hidden fixed top-0 right-0 px-6 py-4 sm:block">
#auth
Dashboard
#else
Log in
#if (Route::has('register'))
Register
#endif
#endauth
</div>
#endif
</div>
<!-- Fluid container -->
<div class="container-fluid mt-1">
<div class="row">
<div class="col fs-1 text-center">
Your Data
</div>
<div class="col fs-1 text-center border-start">
Other's Data
</div>
</div>
<div class="row">
<div class="col">
#guest
<a href="{{ url('login') }}">
<button type="button" class="btn rounded btn-primary btn-lg start-50 translate-middle-x position-relative" alt="login button">Log in</button>
</a>
#endguest
</div>
<div class="col fs-1 border-start text-center">
#guest
?
#endguest
</div>
</div>
<div class="row">
<div class="col">
#auth
<div class="input-group mb-3">
<input type="file" class="form-control mt-2" id="inputGroupFile02" data-bs-toggle="tooltip" data-bs-placement="top" title="Use this to upload a file">
<label class="input-group-text mt-2" for="inputGroupFile02">Upload</label>
</div>
#endauth
</div>
<div class="col border-end" id="rcrdplayer">
#auth
<button v-on:click="startrecord" type="button" class="rounded-circle button-rec btn-lg btn-secondary" id="btn-start-recording" alt="record audio button" data-bs-toggle="tooltip" data-bs-placement="top" title="Use this button to record audio">Rec</button>
<img src="video.svg" class="img-fluid custom-img-bg rounded" id="btn-start-recording" alt="record video button" height="75" width="75" data-bs-toggle="tooltip" data-bs-placement="top" title="Use this button to record video"/>
#endauth
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
<!-- Recorder -->
#auth
<div class="row">
<div class="col">
<select class="form-select form-select-sm media-resolutions">
<option value="default">Default resolutions</option>
<option value="1920x1080">1080p</option>
<option value="1280x720">720p</option>
<option value="640x480">480p</option>
<option value="3840x2160">4K Ultra HD (3840x2160)</option>
</select>
<select class="form-select form-select-sm media-framerates" aria-label=".form-select-sm example">
<option value="default">Default framerates</option>
<option value="5">5 fps</option>
<option value="15">15 fps</option>
<option value="24">24 fps</option>
<option value="30">30 fps</option>
<option value="60">60 fps</option>
</select>
<select class="form-select form-select-sm media-bitrates" aria-label=".form-select-sm example">
<option value="default">Default bitrates</option>
<option value="8000000000">1 GB bps</option>
<option value="800000000">100 MB bps</option>
<option value="8000000">1 MB bps</option>
<option value="800000">100 KB bps</option>
<option value="8000">1 KB bps</option>
<option value="800">100 Bytes bps</option>
</select>
</div>
<div class="col border-end">
</div>
</div>
#endauth
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
Here is the Webpack code:
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
module.exports = {
mode: 'development'
}
mix.sass('resources/css/custom.scss','public/sass/custom.scss');
mix.js('node_modules/recordrtc/RecordRTC.js', 'public/js/RecordRTC.js');
mix.js('resources/js/customrecrtc.js', 'public/js/customrecrtc.js');
mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]);
I've read and re-read the docs on the installation, then I found that I was in version 2.x, so I switched to version 3.x. All this to no avail. It works if I use the CDN method, and I am then able to run some vue code in the blade template. I really just wanted to have all my node modules linked to the page through NPM, otherwise I would just use the CDN method.
Update: I have added the Webpack and Blade code. Since I installed Vue 3 using
npm install vue#next
I can't find where to add Vue from my node modules. This is a new laravel project, using Laravel 8.x

https://laravel.com/docs/8.x/mix#working-with-scripts
As it says in the above link, since I'm using Webpack which compiles JS code. I found that I must import the specific node module. If you have programmed before, think of it as importing or including a file in Java, C++, Python, or what have you.
In my case I needed to realize that I not only had to import one module, but many. And then specifically use the same file I imported into to type the relevant code. I still can't type the JS into the .blade.php file, but this should work well enough.
This an example of my custom.js
import node_module1
import node module2
// code goes here

Laravel Blade Not outputting #section('content')?

I am using Laravel 6 and working on a blade.php file. Also, I'm using tailwindCss and tailwindUi in parts of my code. I have a layout file with the main nav bar working, on the other pages when I #section('content') nothing is being outputted and isn't showing in the browser. If I exclude the #section the code is passed through the browser but then pushes my nav bar down which isn't good. Hoping its a silly mistake but if you have had this issue and know of a fix please do share.
LAYOUT File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.0.1/dist/alpine.js" defer></script>
<title>#yield('title')</title>
</head>
<div>
<nav x-data="{ open: false }" #keydown.window.escape="open = false" class="bg-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center h-24">
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-10 w-10" src="/images/startup.svg" alt="icon" />
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline">
Home
Contact
Blog
</div>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<button #click="open = !open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path :class="{'hidden': open, 'inline-flex': !open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
<path :class="{'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div :class="{'block': open, 'hidden': !open}" class="hidden md:hidden">
<div class="px-2 pt-2 pb-3 sm:px-3">
Home
Contact
Blog
</div>
<div class="pt-4 pb-3 border-t border-gray-700">
<div class="flex items-center px-5">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="/images/0.jpeg" alt="My Picture" />
</div>
<div class="ml-3">
<div class="text-base font-medium leading-none text-white">Paolo Trulli</div>
<div class="mt-1 text-sm font-medium leading-none text-gray-400">paolo.g.trulli#gmail.com</div>
</div>
</div>
INDEX File (blog)
#extends('layout')
#section('title', 'Blog')
#section('content')
<div class='blog-form'>
<h1>My Blog</h1>
<h3>A place where I create posts on random things that interest me</h3>
<form action="/blog" method="post">
<input type="text" name="title" autocomplete="off">
#csrf
<button>Add Blog Post</button>
</form>
<p style="color: red">#error('title') {{ $message }} #enderror</p>
<ul>
#forelse ($blogs as $blog)
<li>{{ $blog->title }}</li>
#empty
<li><h3>No Blog Posts Yet</h3></li>
#endforelse
</ul>
</div>
#endsection
HomeController
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class HomeController extends Controller
{
public function index()
{
return view ('/home');
}
public function about()
{
return view ('/about');
}
public function contact()
{
return view ('/contact');
}
}
WEB Route
use App\Mail\WelcomeMail;
Route::get('/email', function() {
return new WelcomeMail();
});
Route::get('/home', 'HomeController#index');
Route::get('/about', 'HomeController#about');
Route::get('/contact', 'HomeController#contact');
Route::get('/blog', 'BlogController#index');
Route::post('/blog', 'BlogController#store');
Route::get('/subscribers', 'SubscriberController#index');
Route::get('/subscribers/create', 'SubscriberController#create');
Route::post('/subscribers', 'SubscriberController#store');
Route::get('/subscribers/{subscriber}', 'SubscriberController#show');
Route::get('/subscribers/{subscriber}/edit', 'SubscriberController#edit');
Route::put('/subscribers/{subscriber}', 'SubscriberController#update');
Route::delete('/subscribers/{subscriber}', 'SubscriberController#destroy');

You need to use #yield('content') in your layout file.
Layout.blade.php
<html>
<body>
<nav>
</nav>
#yield('content')
</body>
</html>
now you can use #section('content') in extened files.
index.blade.php
#extends('layout')
#section('content')
<div class="">
...
...
</div>
#endsection

new component is not displaying

m new to vue and after installing it in Laravel, I make a new component but its not showing in browser,and the browser gives warning in developers tools, in developers tools > console it shows:
app.js:37960 [Vue warn]: Failed to mount component:
template or render function not defined.
found in
---> <TaskForm>
<Root>
warn # app.js:37960
app.js:46384 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
is there any problem in code or if any solution to resolve this issue?
component:
<template>
<div class="col-md-8">
<div class="card card-default">
<div class="card-header">Task Form</div>
<div class="card-body">
<form action="./api/task" method="POST">
<div class="form-group">
<input type="text" name="title" placeholder="Task title" class="form-control">
</div>
<div class="form-group">
<input type="submit" value="Add Task" class="btn btn-info">
</div>
</form>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
app.js:
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component',
require('./components/ExampleComponent.vue').default);
Vue.component("task-form", require('./components/TaskForm.vue'));
const app = new Vue({
el: '#app'
});
this is app.blade.php: app.blade.php:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light navbar-laravel">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
#guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
#if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
#endif
#else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
#csrf
</form>
</div>
</li>
#endguest
</ul>
</div>
</div>
</nav>
<main class="py-4">
#yield('content')
</main>
</div>
</body>
</html>

Navbar title not showing in laravel

for some reason when I try to add in a title for my page, inside my navbar, it not showing up. I am currently trying to create a title for every page I have inside the navbar and I have researched a lot and one of the resources that was helpful was this,Laravel dynamic page title in navbar-brand, I tried following it but for some reason, my title isn't showing. Could it be because I have put my #yield and #section wrongly? So sorry because it my first time using this function since most of the time I would just follow tutorial video in doing it.
app.blade.php (sorry I don't really know where to put it)
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<title>#yield('title')</title>
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}" style="color: white">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#guest
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true" style="background-color:blue" style="color:white">
<b>{{ Auth::user()->name }}</b> <span class="caret"></span>
</a>
<ul class="dropdown-menu" style="background-color: blue">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();" style="background-color: blue" style="color: white">
<b>Logout</b>
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endguest
</ul>
</div>
</div>
</nav>
home.blade.php(this is where I want the title to be shown)
#extends('layouts.app')
#section('title', 'Summary')
#section('content')
<link href="{{ asset('css/homeStyle.css') }}" rel="stylesheet">
<table class="table table-bordered">
<tr>
<th><strong><big>Name: </big></strong></th>
<th><strong><big>Action: </big></strong></th>
</tr>
<td>
<tr>
#foreach($data as $value)
<tr>
#if($value->blacklist == 'Yes')
<th><span style="color: red;">{{$value->Name}}</th>
#else
<th>{{$value->Name}}</th>
#endif
<th><form action="{{ url('/home/'.$value->pi_id.'/delete') }}" method="get">
{{ csrf_field() }}
<button type="submit">Delete</button>
</form></th>
</tr>
#endforeach
#endsection

In your app.blade make sure you add in head tags
<head>
<title>#yield('title')</title>
</head>
Next, in your navbar header div
#yield('title')
Remove the title tags, not needed, as its stated in head tags
Your individual pages will then work as you have it now
#section('title', 'Summary')
before your content section
Hope that helps

Resources