I have my master .php file setup here: views/layouts/app.blade.php
and my child here views/tasks.blade.php
In tasks.blade.php I wrote the following code:
#extends('layouts.app')
#section('content')
<div class="panel-body">
<form action="/task" method="POST" class="form-horizontal">
[content here]
</form>
</div>
#endsection
In app.blade.php I have a basic html setup with html-tags, bootstrap cdn, and jquery. In the body-tags I wrote:
#yield('content')
In routes.php the default route when localhost loads the map is set to 'tasks':
Route::get('/', function () {
return view('tasks');
});
However, I do not get the tasks.blade.php displayed within app.blade.php. this is what I DO get returned:
Any solutions please?
From what I see you should have this
#extends('layouts.app')
#section('content')
<div class="panel-body">
<form action="/task" method="POST" class="form-horizontal">
[content here]
</form>
</div>
#stop
#stop
Related
I am using Laravel 6.20.11, and I have published the Laravel blade error templates. What I need to have happen is that if the user is authenticated, the error message extends the internal-only layout, and if not, it extends the public layout like so:
#auth
#extends ('int-layouts.partials.wrapper')
#section ('error')
<div class="be-content">
<div class="main-content container-fluid">
<div class="container py-5">
<div class="row">
<div class="col-lg-8">
<div class="text-block">
<h1>404 - Not Found</h1>
<p class="text-muted text-uppercase mb-4">Sorry, we couldn't find the page you were looking for.
Please contact the administrator<br/>
Or go back to the <a class="navbar-brand py-1" href="/controlpanel/">Dashboard</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
#endsection
#endauth
#guest
#extends ('ext-layouts.master')
#section('error')
<div class="container py-5">
<div class="row">
<div class="col-lg-8">
<div class="text-block">
<h1>404</h1>
<p class="text-muted text-uppercase mb-4">Sorry,You are trying to reach the page that does not exist.<br>
Please contact the administrator <br/> Or go back to the <a class="navbar-brand py-1" href="/">Home Page</a></p>
</div>
</div>
</div>
</div>
#endsection
#endguest
The problem I am having is that when I test the 404 error using abort(404) or by trying to access a route that doesn't exist, the error message displays twice and the page inherits the int-layouts.partials.wrapper even when the user isn't authenticated.
Is this expected behavior or am I doing something wrong in my blade file?
You can try to use a conditional in one #extends directive:
#extends (auth()->check() ? 'int-layouts.partials.wrapper' : 'ext-layouts.master')
Then you can use a conditional after this inside your section.
#section('error')
#auth
#else
#endif
#endsection
The #extends directive is not actually returning output directly into the compiled result like most directives do. The compiled PHP for this is held in an array to be added later.
Everything inside the ( ) of the directive is being used as a literal to call make on the View Factory:
"<?php echo \$__env->make({$expression}, \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>"
If you found the compiled view for this Blade template you would see this:
<?php echo \$__env->make(auth()->check ? 'int-layouts.partials.wrapper' : 'ext-layouts.master', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
The first argument to make ends up being your view name when this compiled view is executed.
In Controller function:
$layouts = Auth::user->admin ? 'view.admin' : 'view.student'; //
view.admin or view.student is the blade file which you want to render
dynamically.
return view('welcome',compact('layouts'));
Write in Blade File:
#extends($layouts)
#section('...')
...
#endsection
I am passing a json encoded data to my Vue component as a prop, when I am printing the whole prop variable then it is showing that the data has successfully received, but I am not able to parse the data.
profile.blade.php
#extends('layouts.app')
#section('content')
<my-profile user-details="{{ json_encode($userDetails) }}"></my-profile>
#endsection
MyProfile.vue
<template>
<div class="container">
<div class="row justify-content">
<div class="col-md-3" id="profile-image">
<img class="img-fluid rounded" src="https://www.w3schools.com/bootstrap4/paris.jpg" alt="Profile Image">
</div>
<div class="col-md-12">
<p>{{userDetails}}</p>
<p> Name: {{ userDetails.first_name }} </p>
</div>
</div>
</div>
</template>
<style>
#profile-image {
margin-bottom: 30px;
}
</style>
<script>
export default {
props: ["userDetails"]
}
</script>
Output
{"user_id":2,"first_name":"Shan","last_name":"Biswas","email":"shanpro.2015#gmail.com","phone":"9508168983","created_at":"2019-05-03 05:43:17","updated_at":"2019-05-03 05:43:17"}
Name:
You need to bind the value to the component as dynamic and not static.
So change your blade file to:
#extends('layouts.app')
#section('content')
<!-- see the colon in front of the props, that is a shortcut for v-bind:prop-name -->
<my-profile :user-details="{{ json_encode($userDetails) }}"></my-profile>
#endsection
Otherwise are all values passed to the component as a simple string.
Change this:
<my-profile user-details="{{ json_encode($userDetails) }}"></my-profile>
with this:
<my-profile user-details='#json($userDetails)'></my-profile>
// Pay attention to single quotes instead of double
This worked for me.
Update profile.blade.php to following!
#extends('layouts.app')
#section('content')
<my-profile user-details="{{ $userDetails }}"></my-profile>
#endsection
My view blade laravel like this :
<section class="content">
<product-list :product-data="{{json_encode($products)}}"></product-list>
</section>
In the view blade call vue component
The vue compoponent like this :
<template>
<div class="box">
...
<div class="box-body">
<div class="box-footer">
<!-- call view blade -->
</div>
</div>
</div>
</template>
<script>
export default {
...
}
</script>
In the vue component, I want to call view blade laravel
The view blade like this :
{{$products->links()}}
I want to call it because the pagination only run in view blade
How can I do it?
You'd have to use a slotted component:
Vue Components:
<template>
<div class="box">
...
<div class="box-body">
<div class="box-footer">
<slot></slot>
</div>
</div>
</div>
</template>
<script>
export default {
...
}
</script>
Blade file
<section class="content">
<product-list :product-data="{{json_encode($products)}}">
{{$products->links()}}
</product-list>
</section>
I'm stucked with this code. I can't make it work, and i don't get any errors. Which might mean that i need an aditional dependency? It's simply not showing. Please help me. Thanks.
app.js - file
Vue.component('message', require('./components/Message.vue'));
const app = new Vue({
el: '#app'
});
Message.vue - file
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Message</div>
<div class="panel-body">
I'm the component!
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
ready () {
console.log('Component ready')
}
}
</script>
home.blade.php - file
#extends('templates.default')
#section('content')
<h3>Welcome to Site</h3>
<div class="container">
<div id="app">
<message></message>
</div>
</div>
#stop
You may also need to clear browser cache when working with frontend. On mac this is command + shift + R. Also make sure you did run gulp to compile your js file.
Also make sure you included compiled js file to your layout template before </body>:
<script src="/js/app.js"></script>
I think you're missing the .default from the line
Vue.component('message', require('./components/Message.vue').default);
I have blade template namely default.blade.php in app/layout/ folder
<!doctype html>
<html>
<head>
#include('includes.head')
</head>
<body>
<div class="container">
<header class="row">
#include('includes.header')
</header>
<div id="main" class="row">
#yield('content')
</div>
<footer class="row">
#include('includes.footer')
</footer>
</div>
</body>
</html>
Folder structure:
app/views/layout/default.blade.php
app/views/includes/footer.blade.php
app/views/includes/head.blade.php
app/views/includes/header.blade.php
My controller namely blade.php
<?php
class Blade extends BaseController
{
public function layout()
{
return View::make('layout.default');
}
}
?>
Routes.php
Route::get('blade','Blade#layout');
I am pointing my controller in browser like:
http://localhost/laravel/public/blade
It is showing error:
Call to undefined method Illuminate\Support\Facades\Blade::getAfterFilters()
How can i fix it. Please help me.
You can't name your Controller BLADE, Blade is a facade for the Template engine in Laravel, rename your Controller, to something else then Blade.
you can find all Laravel internal Facades in your config\app.php at the key aliases