I that possible to have different layout in laravel vue components?
If we use blades all we need is to change #extends('layouts.app') to #extends('layouts.custom') and then you have different design, but how it's working in vuejs?
Code
This is my App.vue file which is in charge of rendering template of all pages
<template>
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
//navbar
</nav>
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">
<h5>{{site_name}}</h5>
</el-aside>
<el-main>
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
<div>
<transition name="fade">\
//router which renders all components in this part
<router-view id="content" :key="$route.fullPath"></router-view>
</transition>
</div>
</el-main>
</el-container>
<el-footer>Footer</el-footer>
</el-container>
</div>
</template>
and here is my layout blade file:
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="csrf-token" content="{{ csrf_token() }}" />
<title>{{ config('app.name', 'Laravel') }}</title>
<link href="{{ asset('css/app.css') }}" rel="stylesheet" />
</head>
<body>
<div id="app"></div>
<script src="{{ asset('js/app.js') }}"></script>
<script>
window.default_locale = "{{ config('app.locale') }}";
window.fallback_locale = "{{ config('app.fallback_locale') }}";
</script>
</body>
</html>
Basically that aside part in app.vue i only need to show in admin part not front-end (for users)
Any idea?
Pass it as a prop to your component
Something like:
Blade File:
#php
$isLoggedIn = Auth::check();
#endphp
<my-component :is-logged-in="{{ $isLoggedIn }}" </<my-component>
Related
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?
I have a blade file thanks.blade.php where I put two sessions grand_total and order_id. When I refresh the page session still exists.
I want when I refresh the page the session should be destroyed. I have written the session forget code at the end. Is it correct? I think it's not correct then how to write it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Thanks</title>
<link href="{{ url('css/front_css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ url('css/front_css/font-awesome.min.css') }}" rel="stylesheet">
<link href="{{ url('css/front_css/prettyPhoto.css') }}" rel="stylesheet">
<link href="{{ url('css/front_css/price-range.css') }}" rel="stylesheet">
<link href="{{ url('css/front_css/animate.css') }}" rel="stylesheet">
<link href="{{ url('css/front_css/main.css') }}" rel="stylesheet">
<link href="{{ url('css/front_css/responsive.css') }}" rel="stylesheet">
<!--[if lt IE 9]>
<script src="{{ url('js/front_js/html5shiv.js') }}"></script>
<script src="{{ url('js/front_js/respond.min.js') }}"></script>
<![endif]-->
<!-- favicon -->
<link rel="icon" type="image/png" sizes="192x192" href="{{ asset('images/ico/android-icon-192x192.png')}}">
</head>
<!--/head-->
<body>
<!-- Header Part -->
#include('layouts.front_layout.front_header')
<div class="jumbotron text-center">
<h1 class="display-3">Thank You!</h1>
<p class="lead"><strong>Your Order Is Successfully Place</strong></p>
<p class="lead">Your Order number is {{Session::get('order_id')}} and grand total is PK. {{Session::get('grand_total')}}</p>
<hr>
<p>
<strong>Please check your email</strong> for further instruction. Having trouble? Contact us
</p>
<p class="lead">
<a class="btn btn-primary btn-sm" href="{{url('/')}}" role="button">Continue to homepage</a>
</p>
</div>
<!--/Footer-->
#include('layouts.front_layout.front_footer')
<script src="{{ url('js/front_js/jquery.js') }}"></script>
<script src="{{ url('js/front_js/bootstrap.min.js') }}"></script>
<script src="{{ url('js/front_js/main.js') }}"></script>
</body>
</html>
<php Session::forget('grand_total'); Session::forget('order_id'); ?>
You have to use following code below
#php
Illuminate\Support\Facades\Session::forget('grand_total');
Illuminate\Support\Facades\Session::forget('order_id');
#endphp
It is working fine for me. I have just now used in my project.
I am new to Laravel 8 and TailwindCSS so I need your help with the following problem.
I just created a new folder inside resources and one blade file that extends the layouts.app. When I access this file through the browser I am getting the following error: Undefined variable: header (View: C:\xampp\htdocs\library\resources\views\layouts\app.blade.php) (View: C:\xampp\htdocs\library\resources\views\layouts\app.blade.php).
On the other hand, if I comment out the variable $header (and $slot) then I don't get the code that I wrote in that blade file.
My code for routes:
`Route::get('/', function () {
return view('welcome');
});
Route::post('books', [BooksController::class, 'store']);
Route::patch('books/{book}', [BooksController::class, 'update']);
Route::delete('books/{book}', [BooksController::class, 'destroy']);
Route::get('/authors/create', [AuthorsController::class, 'create']);
Route::post('authors', [AuthorsController::class, 'store']);
Route::post('/checkout/{book}', [CheckoutBookController::class, 'store']);
Route::post('/checkin/{book}', [CheckinBookController::class, 'store']);
Route::middleware(['auth:sanctum', 'verified'])->get('/dashboard', function () {
return view('dashboard');
})->name('dashboard');`
The code for app.blade:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
#livewireStyles
<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.6.0/dist/alpine.js" defer></script>
</head>
<body class="font-sans antialiased">
<div class="min-h-screen bg-gray-100">
#livewire('navigation-dropdown')
<!-- Page Heading -->
<header class="bg-white shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
{{ $header }}
</div>
</header>
<!-- Page Content -->
<main>
{{ $slot }}
</main>
</div>
#stack('modals')
#livewireScripts
</body>
</html>
And finally, the code for the new blade file called create:
#extends('layouts.app')
#section('content')
<div class="bg-gray-300 h-screen">
<h1>ada</h1>
</div>
#endsection
Thank you in advance,
It seems you're using livewire in your code. Therefore, you need to create a livewire component. You can find a guide on how to do that here: https://laravel-livewire.com/docs/2.x/making-components.
If you go through the guide above, you'll end up with two new files: a livewire component file and a blade view file that renders the component. You can then add the following to the blade file:
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Page Header') }}
</h2>
</x-slot>
<div class="bg-gray-300 h-screen">
<h1>ada</h1>
</div>
The first part occupies the header's slot while the other takes the main slot. I hope this helps to clarify things a bit.
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>