I use Livewire, how can I put a loder on all pages but call it once
nav.blade.php
<html>
<head>
#livewireStyles
</head>
<body>
<livewire:layouts.header/>
{{ $slot }}
#livewireScripts
</body>
</html>
header.blade.php
<div>
<div class="spinner" wire:loading></div>
</div>
welcome.blade.php
<div>
<input wire:model="search" placeholder="Search">
</div>
When I write things in the input, it doesn't show the loder.
I want to call this loder only once and work on every page
As of today wire:loading only works in the scope of a single livewire component. There is no wire:loading.all.
Simple solution: create a blade component and name it e.g. x-loading
<div class="page-loading" wire:loading>
Loading...
</div>
Style the component such that it appears e.g. in the bottom right corner of the page. You might want to use position: absolute.
Place this component in the view of every livewire component you want to show the loading indicator for.
This solution comes with two drawbacks. First, if you try to position the loading indiator in a container that has absolute position (like a modal), it wont have the same position as you intended. Second, the loading blade component will be in every livewire component.
I just tested a more elegant solution. For this you have to use livewire js hooks: https://laravel-livewire.com/docs/2.x/reference
<script>
window.onload = function() {
Livewire.hook('message.sent', () => {
window.dispatchEvent(
new CustomEvent('loading', { detail: { loading: true }})
);
})
Livewire.hook('message.processed', (message, component) => {
window.dispatchEvent(
new CustomEvent('loading', { detail: { loading: false }})
);
})
}
</script>
<div
x-data="{ loading: false }"
x-show="loading"
#loading.window="loading = $event.detail.loading"
class="absolute z-50 bottom-20 right-20"
>
This is taking way too long...
</div>
Place this this code e.g. in your app layout.
Related
I have created a fresh Laravel6 project to work out how to register components...
I have cloned ExampleComponent.vue to ExampleComponent2.vue
// ExampleComponent2.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example2 Component</div>
<div class="card-body">
I'm an example2 component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component2 mounted.')
}
}
</script>
// app.js
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('example-component2', require('./components/ExampleComponent2.vue').default);
// login.blade.php
- I have placed this under the closing tag and #endsection to test on the login page...
<example-component2></example-component2>
I have run "npm run watch" in command line and there are no error messages...
When I load the login route, I open the console to see this error message?
[Vue warn]: Unknown custom element: - did you
register the component correctly? For recursive components, make sure
to provide the "name" option.
(found in )
How do I register extra components???
// login.blade.php - I have placed this under the closing tag and #endsection to test on the login page...
You need an element with the id that you defined in your js/app.js:
const app = new Vue({
el: '#app', // you need an element with id="app". Your vue component will replace this
});
Then put your component inside that element.
//login.blade.php
#extends('layouts.authentication')
#section('content')
<div id="app">
<example-component2/>
</div>
#endsection
how Can I render smarty inside vue? I wanted to create vue instance on everything in my app and connect it with smarty. I want to use vue for frontend data and smarty for backend data. When I generate code like in example it appears and when vue render disappear
<div id="vue-app">
<div>{$smartyVariable}</div>
<div>
Maybe to late but... You can use the {LITERAL} in your *.tpl
Something like this:
<div>
<div id="app">
<h1>{literal} {{ message }} {/literal}</h1>
</div>
{literal}
<script>
var myObject = new Vue(
{
el: '#app',
data: {
message: 'Hello Vue!'
}
}
);
</script>
{/literal}
</div>
I have a Chat-User.vue file in components like
<template lang="html">
<div class="chat-user">
×
<h1>Users in Chat Room</h1>
<hr />
Number of users = {{ usersInRoom.length }}
<div class="users" style="overflow: hidden;">
<div class="col-sm-3 w3-margin-bottom" v-for="userInRoom in usersInRoom" style="overflow: hidden;">
<div class="u-1">
<img :src="userInRoom.profile" width="50" height="50">
</div>
<div class="u-2">
{{ userInRoom.name }}
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['usersInRoom']
}
</script>
My app.js file
Vue.component('chat-user', require('./components/Chat-User.vue'));
const app = new Vue({
el: '#app',
data: {
usersInRoom: []
},
});
and the indx.blade.php file
<div id="app">
<chat-user v-bind:usersInRoom="usersInRoom"></chat-user>
</div>
In usersInRoom variable it will add data's automatically.
But when I look the browser I cannot see any thing in the place of <chat-user></chat-user>, Just only <!---->.
I think it was commented out by vue for some reason. I tried removing all {{ usersInRoom }} and then I can see the other things like <h1>Users in Chat Room</h1> and the <hr>.
if I am not wrong The component file is not recognizing any variable like usersInRoom, when I have a variable like that.
Please some one tell me how to fix this problem.
Html directives are case insensitive, in the documentation Vue mentions that you need to use kebab-case in binding props.
Try <chat-user v-bind:users-in-room="usersInRoom"></chat-user> Which will bind to the usersInRoom prop.
you cant use camel case for props. u need to to use kebab case.
and binding from vue 1, you can remove the "v-bind" string and just directly start at :
<chat-user :users-in-room="usersInRoom"></chat-user>
I am using Laravel 5.3.28 version. I have created main view(main.blade.php) and trying to extract the details from different child views(navbar.blade.php) which is in view/pages directory but its not working.
Route file in project/routes/web.php
Route::get('/', function () {
return view('main');
});
Main view in resources/views/main.blade.php(this file will receive the data from navbar.blade.php)
<div id="column">Test1</div>
<div id="container">
#yield('content')<!--This will get the content from navbar.blade.php-->
</div>
child view in resources/views/pages/navbar.blade.php
#extends('main')
#section('content')
<div id="row">
Test2
</div>
#endsection
I am able to see output as Test1 but not Test2. Why it this happening?
To see navbar content you should return navbar view:
Route::get('navbar', function () {
return view('navbar');
});
But if you're planning to include navbar in many views, you should use #include() instead of using section(), extends() and yield():
#include(`navbar`)
you should call view('navbar') instead of view('main') because navbar is a child of main view
if you call parent child content will not be seen there for call view('navbar')
For seeing the output Test2 you have to return navbar view
Route::get('/', function () {
return view('navbar');
});
#yield is a place when you will extends main view then you can put something inside this content.
I am explaining below by an example using your view file
you can simply put this in navbar.blade.php. it doesn't needs to be extended.
<div id="row">
Test2
</div>
In your main.blade.php you can put this
<div id="column">Test1</div>
<div id="container">
#include('navbar')
#yield('content')
</div>
The suppose you have decided to create a third view which will extends main view with navbar view. suppose your created a view named home.blade.php and add this to your home.blade.php view
#extends('main')
#section('content')
Welcome Home !!!
#endsection
Then if you calls create your route like below
Route::get('/home', function () {
return view('home');
});
It will render like below
<div id="column">Test1</div>
<div id="container">
<div id="row">
Test2
</div>
Welcome Home !!!
</div>
Hope this will clear your concept about view rendering
I am trying to pass data from my master blade to the partial depending where it is open. This is part of my master blade:
<div id="main-section">
#section('topBar')
#include('customer.layouts.partials.top-bar')
#show
#section('header')
#include('customer.layouts.partials.header')
#show
#section('carousel')
#include('customer.layouts.partials.carousel', ['function' => 'drawer'])
#show
</div>
<div id="drawer">
<div id="item-detail">
</div>
<div id="item-detail-carousel">
#section('carousel')
#include('customer.layouts.partials.carousel', ['function' => 'itemDetail'])
#show
</div>
</div>
So, as you can see I am using customer.layouts.partials.carousel in two places.
I am receiving data in my partial like this:
<div class="swiper-container {{ $function }}">
<div class="swiper-wrapper">
#foreach($issues as $issue)
<div class="swiper-slide">
<img
src="/imagecache/large/{{ $issue->first()->image }}"
onclick="{{ $function }}(
'{{ $issue->first()->magazine->id }}',
'{{ $issue->first()->magazine->name }}',
'{{ $issue->first()->magazine->summary ?: '' }}',
'{{ $issue->first()->magazine->image ?: '' }}',
'{{ $issue->first()->image }}'
)"
>
</div>
#endforeach
</div>
</div>
Div #drawer is hidden first, has display:none, and it is shown on click on an image in the slider in the main-section. And then #drawer gets slides over the main-section. But when I inspect the elements in the chrome I see that both in the main-section and in the drawer section, data that was passed is drawer. The #drawer didn't get data ['function' => 'drawer'] as I thought it would.
How can I achieve that?
I think you're misunderstanding how the #section directive is meant to work.
For starters, you shouldn't have multiple #section directives with the same name (think of it like ids with HTML - there should only be one with that name). Also, if your not going to be extending files with #extend there isn't much point in using #section at all.
If you remove the #section directives from around your #include('...') then they should work fine.
Hope this helps!