This may seem like an odd question, but I am new to Laravel and have a lot of trouble finding the right syntax in the official documentation. Here is an example. I was using the following blade syntax to try and have a conditional view:
#if (condition)
#extends 'layouts.regular'
#else
#extends 'layouts.special'
#endif
This did not work. I then went to the blade documentation on the Laravel site and read through the Extending a Layout section. All seemed well and I spent 10 minutes debugging my code and trying to find out if I did something wrong. It all seemed correct, so I then resorted to Google and found this thread.
From the comments I understood that:
The #extends statement must be the first line in a blade template
You can only use a conditional extend by using a ternary expression
While this solved my problem, it took too long to find. I still can't figure out WHERE in the official documentation this is mentioned. Am I using the official documentation wrong? Is there other, more extensive documentation out there? I keep feeling that the online documentation is very brief and often does not explain important details on syntax or exceptions...
#extends always comes in the first line of blade, it is used to define the layout e.g.
Assume we have master.blade.php
<html>
<head>
</head>
<body>
#yield('content')
</body>
</html>
Then we have page.blade.php
#extends('master') // this one says this page will be placed in master.blade.php
#section('content') // find the line that says #yield('content') and replace it with...
<h1> Hello World </h1>
#stop
Now, if you have many layouts and you want to share the content with it, you can achieve that programatically away from blade.. take this example
Assume we have master.blade.php
<html>
<head>
<title>Master</title<
</head>
<body>
#yield('content')
</body>
</html>
and we have master2.blade.php
<html>
<head>
<title>Master 2</title>
</head>
<body>
#yield('content')
</body>
</html>
and we have page.blade.php
#section('content')
<h1>Hello World</h1>
#stop
// note that we have no #extends()
now in the controller we do something like this
if($cond)
{
$layout = view('master');
}
else
{
$layout = view('master2');
}
$page = view('page');
$layout->content = $page;
return $layout;
Note that we are using $layout->content because both layouts are yielding content in #yield('content')
Related
I am trying to learn Laravel and Vue properly, after an initial attempt back in the spring. I'm still pretty new to both though.
I am using Laravel 8.x in Windows 10 along with Vue 2.6.12. I am working my way through a video on combining Vue with Laravel. The video is for an older version of Laravel, probably 5.5, and probably a slightly older Vue as well so that may well be the nature of my problem. Here's the link to the video. I'm at about the 8:00 minute mark.
The problem I'm having is that when I try to execute my code, Laravel doesn't see my Articles component.
My app.js file is at /resources/assets/js/app.js. Here is the code:
require('./bootstrap');
window.Vue = required('vue');
Vue.component ('Articles', require('./components/Articles.vue'));
const app = new Vue({
el: '#app'
});
The file that contains the script tag is at /resources/views/welcome.blade.php. Here is the code:
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<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>Larticles App</title>
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app">
<div class="container">
<Articles></Articles>
</div>
</div>
<script src="{{ asset('js/app.js') }}">console.log("Made it to here!");</script>
</body>
</html>
The Article component is at /resources/assets/js/components/Articles.vue. Here is the code:
<template>
<div>
<h2>Articles</h2>
</div>
</template>
<script>
export default {
name: "Articles",
beforeCreate() {
console.log("Articles - beforeCreate()");
},
created() {
console.log("Articles - created()");
},
beforeMount() {
console.log("Articles - beforeMount()");
},
mounted() {
console.log("Articles - mounted");
}
}
</script>
<style lang="scss" scoped>
#app {
background-color: gold;
color: blue;
}
</style>
What do I need to change to make this work? I think the issue is the require portion of the Vue.component statement in app.js but I've tried every variation I can think of without success. I can't think of anything else to try! I can't find anything in the Vue manual on special syntax for this statement in Vue or Laravel.
I should mention some things. I've deviated slightly from what he does in the video as part of my troubleshooting. I've capitalized Articles in the first parameter of the Vue.component statement and I've also capitalized it in the container div of the welcome.blade.php file. (Initially, I wrote it all lower case in each of those places but it didn't work that way either.) I've also added several console.log statements in the components lifecycle hooks and in the script tag. Absolutely none of them appear in the console though.
Also, for some reason, my IDE, VS Code, insists on displaying in red in the welcome.blade.php. Red always makes me think of errors but there is no error message of any kind. If I write those tags as (and change the app.js accordingly), they stay red so I don't think this is a casing issue.
I should also mention that the Inspector shows the as . Shouldn't it be showing exactly what I have in my welcome.blade.php file?
Use lower case letters when importing the component
<articles></articles>
Try to set each component you're reuire as default. Then use lower case as mentioned above. See below.
Vue.component ('Articles', require('./components/Articles.vue').default);
<articles></articles>
I am trying to make layout using blade but the problem is that when i tried to
#yield on the file which is included in master file but #yield is not working.
resouces/views/layouts/app.blade.php
<html>
<head>
...
...
</head>
<body>
#include('layouts.navigation')
#include('layouts.main_panel')
#include('layouts.footer')
</body>
</html>
resouces/views/layouts/main_panel.blade.php
// some html stuff
#yield('form')
// some html stuff
resouces/views/auth/login.blade.php
#extends('layouts.app')
#section('form')
<form>
// input
</form>
#endsection
I would suggest you pass variables to the partials and echo
them inside it. This is an alternative way to achieve what you are
trying to do.
For example -
Partial blade file (resouces/views/partials.header.blade.php) -
<h4>{{ $name }}</h4>
View (resouces/views/custom.blade.php) -
#include('partials.header', [ 'name' => 'Lorem Ipsum' ])
I am also using laravel framework but i used to do in that way :-
Layout :- resouces/views/layouts/app.blade.php
<html>
<head>
...
...
</head>
<body>
#include('layouts.navigation')
#yield('content') // use #yield here why you need separate file
#include('layouts.footer')
</body>
</html>
After that :- resouces/views/auth/login.blade.php
#extends('layouts.app')
#section('content')
<form>
// input
</form>
#stop
Hope it helps!.. I used to follow this structure in laravel project
im using a laravel 5.4 and i have a problem with urls, when i send value with urls like http://localhost:8000/Music/{id} , laravel does not load styles but if use url without value to get that view it loads styles properly, it also does not load styles if an slash get added to end of url like http://localhost:8000/videos/ but without that slash http://localhost:8000/videos works without problem ..sorry i cant speak english good.
here is my code :
Route::get('Music/{id}','homeController#Music');
public function Music(music $item)
{
return view('music',['item'=>$item]);
}
this works by route model binding properly and does what i want but when it returns music blade file it does not load styles that i linked but if use this instead :
Route::get('Music','homeController#Music');
a
public function Music()
{
$item = music::find(1); //for example
return view('music',['item'=>$item]);
}
that works perfect.
i checked this many ways its because of {vlaues} in urls
it also does not loads styles or js files if an slash get added to end of urls
what is the problem?
Use the asset() function...
<html>
<head>
<link href="{{ asset('css/test.css') }}" rel="stylesheet">
</head>
<body>
<div class="square"></div>
<!-- Same for Javascript... -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
i tested it on this too
<html>
<head>
<link rel="stylesheet" href="css/test.css" type="text/css">
</head>
<body>
<div class="square"></div>
</body>
</html>
I have the following files:
foo.blade.php
<html>
<head>
</head>
<body>
<h1>Foo Template</h1>
#yield('content')
</body>
</html>
bar.blade.php
<h2>Bar Template</h2>
<div class="bar-content">
#yield('bar-content')
</div>
I want to create another file that is able to extend both the above templates. e.g something like this:
#extends('foo')
#section('content')
<p>Hello World</p>
#extends('bar')
#section('bar-content')
<p>This is in div.bar-content</p>
#endsection
#endsection
To give:
<html>
<head>
</head>
<body>
<h1>Foo Template</h1>
<p>Hello World</p>
<h2>Bar Template</h2>
<div class="bar-content">
<p>This is in div.bar-content</p>
</div>
</body>
</html>
How can I do this?
Use multiple files.
for eg;
layout.blade.php:
#include('header')
#yield('layout_content')
#include('footer')
second.blade.php
#extends('layout')
#section('layout_content')
<div>
#yield('second_content')
</div>
#stop
third.blade.php
#extends('second.blade.php')
#section('second_content')
<h1>Hello World!</h1>
#stop
You can include #yield in any of the parent files and can be used in the child
I would recommend using components. Here is an example.
It seems to me layout/include has a weird logic when there are many of them and you start nesting them. Components are pretty straight forward. For these nested structures you are building there, components also have slots.
I think it's not possible to do what you want here, at least without extending Blade:
https://laravel.com/docs/5.1/blade#extending-blade
If I were you, I'd rearchitectured my views hierarchy to keep things simple.
I do not know if this will work, but try #include instead of #extends for your bar template. The put your section for bar below the other section (not nested). I did not tested this, so I hope it works ;)
// EDIT:
Try it with an if-statement in your foo file:
<html>
<head>
</head>
<body>
<h1>Foo Template</h1>
#yield('content')
#if(isset($displayBar) && $displayBar == true)
#include('dashboard.test.bar')
#endif
</body>
</html>
And now the child view:
#extends('dashboard.test.foo')
#section('content')
<p>Hello World</p>
#endsection
<?php $displayBar = true ?>
#section('bar-content')
<p>This is in div.bar-content</p>
#endsection
#php
$ext = '';
#endphp
#if (Request::segment(1)=='explications')
#php
$ext = '_explications'
#endphp
#endif
#extends('pages_templates/template_page_fluid'.$ext)
I'm learning Laravel 3, but Blade template is not working. My code seems correct, but all it displays is #layout('master'). Pages source also contains this text only.
application\views\home\index.blade.php contents:
#layout('master')
#section('main')
{{ $greeting }}
#endsection
application\views\master.blade.php contents:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello world!</title>
</head>
<body>
<div id="container">
#yield('main')
</div>
</body>
</html>
and in routes.php:
Route::get('/, home', function()
{
$greeting = "Hello world";
return View::make('home.index')->with('greeting',$greeting);
});
What can cause blade not to work? I tried Laravel 4 also, and changed #layout to #extends, #endsection to #stop but same situation. I get only #extends('master').
Not sure...but I think its because you have a space at the top of your file....
#layout('master')
needs to be directly at the top of the file for it to work properly...
Else it just echoes #layout('master') as words to the page, if you know what Im trying to say :)
same on me in L4...
check your charset of your code editor! sometimes some hidden chars are at the beginning of the file.
i switched to "UTF-8 without BOM"
Just remove every space or EOL, CR, LF, Enter, \n (or whatever) before your code.
Same issue in Laravel 4, I followed the quick start the step where you create a view I leave a new line.
-New line here, and it brokes-
#extends('layout')
#section('content')
Users!
#stop
Again remove anything before #extends('layout') and it works for me!!