I have Master as a main page where I load dynamic pages.
Master
<!DOCTYPE html>
<html lang="en">
<head>
#include('backend.includes.header')
#yield('style')
</head>
<body>
#include('backend.includes.navbar')
<div class="mobile-menu-overlay"></div>
#yield('content')
#yield('script')
</body>
</html>
Dashboard
#extends('backend.master.master')
#section('style')
<link rel="stylesheet" href="{{ asset('backend/css/apexcharts.css') }}">
#stop
#section('content')
// Dashboard Code here
#endsection
#section('script')
<script src="{{ asset('backend/js/dashboard.js') }}"></script>
#endsection
It doesn't render #yield('style') and #yield('script')
Also my controller:
public function index(){
return view('backend.pages.home.dashboard');
}
Related
This is the structure of the views folder:
/layout
header.blade.php
footer.blade.php
template.blade.php
index.blade.php
header content:
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="{{ asset('img/favicon.png') }}">
<link rel="apple-touch-icon" href="{{ asset('img/favicon.png') }}">
<title>#yield('title')</title>
</head>
<body>
footer:
<script src="{{ asset('js/jquery-3.6.0.min.js') }}"></script>
<script src="{{ asset('js/custom.js') }}"></script>
#stack('scripts')
</body>
</html>
template:
#include('layout.header')
#yield('content')
#include('layout.footer')
index:
#extends('layout.template')
#section('title', 'Title')
#section('content')
<div>Content</div>
#endsection
When I inspect the html that's how the structure looks like:
<html>
<head></head>
<body>
<link rel="icon" href="http://localhost/project/public/img/favicon.png">
<title>testing</title>
<div>Test</div>
<script src="http://localhost/project/public/js/jquery-3.6.0.min.js"></script>
<script src="http://localhost/project/public/js/custom.js"></script>
</body>
</html>
This causes the favicon not to be displayed.
How to fix this issue?
You are making this much more complicated then it needs to be. You can use the #extend method to use a template file. I would make it like this:
/layouts/app.blade.php
index.blade.php
<!-- app.blade.php -->
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="{{ asset('img/favicon.png') }}">
<link rel="apple-touch-icon" href="{{ asset('img/favicon.png') }}">
<title>#yield('title', 'Title')</title>
</head>
<body>
#yield('content')
<script src="{{ asset('js/jquery-3.6.0.min.js') }}"></script>
<script src="{{ asset('js/custom.js') }}"></script>
</body>
</html>
<!-- index.blade.php -->
#extends('layouts.app')
#section('title, 'My Page Title')
#section('content')
<div>
<!-- Go crazy -->
<!-- Everything in here will take place of the #yield('content') area -->
<!-- in the app.blade.php file -->
</div>
#endsection
I'm trying to add a header component to my main 'welcome.blade.php' file, but it's content is not rendering. What am I doing wrong here?
I have made my header component in my components folder like this:
<template>
<div class="header">This is the header.</div>
</template>
<script>
export default {
name: "Header",
};
</script>
Then I imported my header to my main app.js file and registered my component like this:
import Header from './components/header';
Vue.component('header', Header);
Eventually I added my header tags to Laravel's main 'welcome.blade.php' file within the #app container:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--<link rel="shortcut icon" href="{{ asset('images/evoqia-icon-gray.png') }}" />-->
<link rel="shortcut icon" href="//creatio.com/themes/custom/creatio/favicon.ico" />
<title>{{ config('app.name') }}</title>
</head>
<body class="antialiased">
<div id="app" v-cloak>
<header></header>
<div class="content-wrapper" :class="{'nopadding': !$store.state.authStore.user}">
<div class="container app-container">
<router-view></router-view>
</div>
</div>
</div>
<script>
var Laravel = {
'csrfToken': '{{ csrf_token() }}'
};
</script>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
So what am I doing wrong here?
in my Laravel 8 / apline 2.8 / tailwindcss 2 app
I want to make alpine component which must be accessible on all pages of the site and I
want to use footer for this
My resources/views/layouts/app.blade.php has structure :
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
...
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
...
</head>
<body class="flex flex-col min-h-screen">
<header class="h-14 bg-red">
#include('layouts.header')
</header>
<main class="flex-1">
#yield('content')
#yield('scripts')
</main>
<footer class="h-8 bg-green">
#include('layouts.footer')
</footer>
</body>
</html>
But Trying to implement footer comnponent in resources/views/layouts/footer.blade.php :
<div class="m-0 p-0">
<div class="flex w-full p-0 m-0 content-center justify-between md:w-1/2 md:justify-end" x-data="adminFooterComponent()">
...
</div>
</div>
#section('scripts')
<script>
function adminFooterComponent() {
console.log('adminFooterComponent::')
return {
addDonationOpen: false,
}
} // function adminFooterComponent() {
</script>
#endsection
I got error :
Uncaught ReferenceError: adminFooterComponent is not defined
I suppose that I got this error as I did not wrap(as I do on all my pages) my footer in
#section('content')
...
#endsection
section. But I really do not need it, as resources/views/layouts/footer.blade.php is a partial file.
How can I implement alpine component accessible on all pages of the app?
Thanks!
I think the issue arises since the section is included in the footer. To resolve the issue, we can include the section in the actual view or we can just include it in the layout file itself.
Method 1 - In the blade file
#extends('layouts.app')
#section('content')
......
#endsection
#section('scripts')
<script>
function adminFooterComponent() {
console.log('adminFooterComponent::')
return {
addDonationOpen: false,
}
}
</script>
#endsection
Method 2 - In layout file (directly) app.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.8.0/dist/alpine.min.js" defer></script>
</head>
<body class="flex flex-col min-h-screen">
<main class="flex-1">
#yield('content')
</main>
<footer class="h-8 bg-green">
#include('layouts.footer')
</footer>
<script>
function adminFooterComponent() {
console.log('adminFooterComponent::')
return {
addDonationOpen: false,
}
}
</script>
</body>
The straightforward solution is Method 2 so that the code is not replicated.
I have a #section inside my child template and I am trying to include another template inside of it, but It doesn't work.
My parent template looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- X-csrf token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
{{-- Custom CSS --}}
#yield('head')
{{-- Open Sans font --}}
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{$title}}</title>
</head>
<body>
#yield('content')
#yield('footer')
</body>
{{-- JS files --}}
#yield('javascript')
</html>
My child template code:
#extends('layouts.app')
{{-- /////////////////////////////////////////////////////////////////// --}}
#section('head')
{{-- Custom CSS for index page --}}
<link rel="stylesheet" type="text/css" href="{{asset('css/index.css')}}">
#endsection
{{-- /////////////////////////////////////////////////////////////////// --}}
#section('header')
<header>
#include('navbar')
</header>
#endsection
{{-- /////////////////////////////////////////////////////////////////// --}}
#section('content')
<section>
<div class="entry-texts">
<h1 class="entry-title">Welcome to my page!</h1>
<h2 class="entry-subtitle">Must be some text in here.</h2>
</div>
</section>
#endsection
{{-- /////////////////////////////////////////////////////////////////// --}}
#section('footer')
<footer>
</footer>
#endsection
{{-- /////////////////////////////////////////////////////////////////// --}}
#section('javascript')
#endsection
The problem is in this part:
#section('header')
<header>
#include('navbar')
</header>
#endsection
It does not include my navbar in the header tag. My navbar file is located in views directory. What is the problem and what am I doing wrong here?
Your parent template does not have #yield('header') and your navbar is in a section called #section('header')
You are yielding head but using section header. This is the problem.
Use #section('head')
just a little clarification. your head section should end with stop as in for yielding scripts and styles:
#section('head')
{{-- Custom CSS for index page --}}
<link rel="stylesheet" type="text/css" href="{{asset('css/index.css')}}">
#stop
You should try this:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- X-csrf token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
{{-- Custom CSS --}}
#section('head')
{{-- Open Sans font --}}
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{$title}}</title>
</head>
<body>
#yield('content')
#yield('footer')
</body>
{{-- JS files --}}
#yield('javascript')
</html>
I have a fresh installed laravel project with all the components updated.
All I did is tried to add app.js in my welcome.blade.php file, after adding the following I get this error
[Vue warn]: Cannot find element: #app
I followed this thread, but it's not relevant as my script is at the bottom of the page.
https://laracasts.com/discuss/channels/vue/fresh-laravel-setup-and-vue-2-wont-work
Here's my file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{$project}} | {{ $title }}</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="/css/app.css" rel="stylesheet" type="text/css"/>
<style>
...
</style>
</head>
<body class="sticky-nav">
<div id="nav">
<div class="display-sm">
<header class="top-header">
<span class="menu-icon">☰</span>
</header>
</div>
<div class="custom-container">
<div id="logo" class="float-left">
<img alt="xyz" src="/images/xyz.png"/><span> xyz</span>
</div>
<div id="btn-project" class="float-right">
<a title="project" href="#" class="btn btn-project">Project</a>
</div>
</div>
</div>
<div class="sub-container">
<h1 id="header-title">{{ $header_title }}</h1>
<h2 id="meta-data"><i class="fa fa"></i>{{$location}} <span id="category"> <i></i>{{$category}} </span></h2>
<div class="clear"></div>
</div>
<script src="/js/app.js"></script>
<script>
var wrap = $(".sticky-nav");
wrap.on("scroll", function (e) {
if (this.scrollTop > 147) {
wrap.find('#nav').addClass("fix-nav");
} else {
wrap.find('#nav').removeClass("fix-nav");
}
});
</script>
</body>
</html>
Error says it all. Vue can't find #app element, so you need to add it:
<div id='app'></div>
https://v2.vuejs.org/v2/guide/
Sometime everything seems got , but we are still getting same error then you have to copy this code and paste in app. blade.
<head>
<!-- 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">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
.
.
.
.
.
.
</div>
</body>
Verify that your main design file app.blade.php contains a div with the app id just after the <body> tag just like this:
<body>
<div id="app">
.
.
.
</div>
</body>