Unexpected Screen in Laravel Vue3 example - laravel

Learning by example from
https://laraveldaily.com/post/laravel-8-vue-3-crud-composition-api
and finishing the following step:
<x-app-layout>
<x-slot name="header">
...
</x-slot>
<div class="py-12">
<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
<div class="overflow-hidden bg-white shadow-sm sm:rounded-lg">
<div class="p-6 bg-white border-b border-gray-200">
<router-view />
</div>
</div>
</div>
</div>
</x-app-layout>
Running npm run dev I am landing on a false screen. The text says "After logging into your Laravel Breeze, we should see this" Where would I log into "my" Laravel Breeze? (URL shows http_://localhost:5173/)
enter image description here This is what is to be expected
But I am landing on
enter image description here false screen
I checked routing, but I don't find a mistake.
web.php:
<?php
use App\Http\Controllers\ProfileController;
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('welcome');
});
Route::get('/dashboard', function () {
return view('dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');
Route::middleware('auth')->group(function () {
Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');
Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');
});
Route::view('/{any}', 'dashboard')
->middleware(['auth'])
->where('any', '.*');
require __DIR__.'/auth.php';

Related

limit () and take () not working properly

im trying to take 3 most viewed post but its just getting only two I don't know why I have tried limit () method it's not showing anything what am I doing wrong here ,
<?php
namespace App\Http\Livewire;
use App\Models\Movie;
use Livewire\Component;
class MovieBox extends Component
{
public function render()
{
return view('livewire.movie-box',[
'movies' => Movie::withCount('read_count')->orderBy('reads', 'desc')->take(3)->get(),
]);
}
}
movie box
<div>
<div class="relative grid grid-cols-3 gap-2 mt-3 user_story md:grid-cols-5">
#foreach ( $movies as $movie )
<a href="#create-post" uk-toggle="target: body ; cls: story-">
<div class="single_story">
<img src="assets/images/avatars/avatar-lg-1.jpg" alt="">
<div class="story-avatar"> <img src="assets/images/avatars/avatar-1.jpg" alt=""></div>
<div class="story-content">
<h4> {{ $movie->title }}</h4>
</div>
</div>
</a>
#endforeach
<span
class="absolute z-10 items-center justify-center hidden p-2 -mr-4 text-xl bg-white rounded-full shadow-md lg:flex w-9 uk-position-center-right"
uk-toggle="target: body ; cls: story-">
<i class="icon-feather-chevron-right"></i></span>
</div>
Change your render method like this.
public function render()
{
return view('livewire.movie-box',[
'movies' => Movie::withCount('read_count')->orderBy('reads', 'desc')->limit(3)->get(),
]);
}

How to register components inside other components in Livewire?

I have a Livewire component rendering full page, but I'm trying to include a component in the middle of the view:
<div>
<div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
#livewire('livewire.person.own-person-update')
</div>
</div>
I have a component in this path:
namespace App\Http\Livewire\Person;
use Livewire\Component;
class OwnPersonUpdate extends Component
{
public function render()
{
return view('livewire.person.own-person-update');
}
}
But I have the following error response in laravel:
enter image description here
In the view you should call your component without the livewire as bellow:
<div>
<div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
#livewire('person.own-person-update')
</div>
</div>

Laravel Pagination not working in Blade file with Tailwind CSS

I'm trying to use Laravel pagination. The issue is that when I use the links() method in the Blade file, it gives an error. For example, when I use the URL "http://127.0.0.1:8000/tournaments?page=3," it works fine, but it gives an error in the Blade file, as explained below.
Controller
public function index()
{
return view('front.tournaments', [
'seriesdata' => $this->tournamentList()
]);
}
public function tournamentList()
{
return Series::leftJoin('team_squads as ts', 'ts.id_series', 'series.id')
->leftJoin('series_team_squads as sts', 'sts.id_series', 'series.id')
->leftJoin('admins as a', 'a.adminable_id', 'series.id')
->where('series.lang', 'en')
->orderBy('series.id', 'asc')
->groupBy('series.id')
->select('series.*')
->paginate(10)
->append([
'logo_url',
'location'
]);
}
Blade
#foreach($seriesdata as $series)
<div class="flex flex-inline xs:flex-col sm:flex-row">
<div class="w-full border-b">
<div class="flex justify-center items-start">
<div class="py-2 mx-auto sm:bg-white xs:bg-white w-full">
<a href="{{ url('tournaments/').'/'.$series->url.'/'.$series->id }}" class="flex">
<div class="grid grid-rows-1 grid-flow-col gap-1">
<div class="row-span-1 col-span-2">
<img src="{{ $series->logo_url }}" alt="avatar" class="object-cover w-12 h-12 mx-4">
</div>
<div class="row-span-1 col-span-2">
<h1 class="font-bold text-lg">{{ $series->name }}</h1>
<p class="uppercase font-light text-sm text-grey">{{ $series->location->address }}</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
#endforeach
{{ $seriesdata->links() }}
Error
It looks like your append() method is blocking pagination in blade. Try to remove it from tournamentList() in controller.
When you do ->append() after the ->paginate(), you are transforming what ->paginate() returns (basically a LenghtAwarePaginator) into a Collection, and Collection does not have a ->links() method. You can see this as the error shows you are trying to call links method in Illuminate\Database\Eloquent\Collection, that is how I know what ->append() is returning.

Laravel nova custom card vue file - how to set href attribute to external url

So I have made a custom card in Laravel nova and I want to pass in a URL as metadata and set the href attribute of a link to that URL.
It works but Vue keeps setting the URL to be an internal URL:
I want it to be :
http://foo.peoplebase.test/admin
but when I click the link I end up with is:
http://peoplebase.test/admin/dashboards/http//:foo.peoplebase.test
Here is the Vue file
<template>
<card class="flex flex-col items-center justify-center">
<div class="px-3 py-3">
<h1 class="text-center text-3xl text-80 font-light">{{ card.title }}</h1>
</div>
<div class="px-3 py-3">
<a :href="'http//:' + card.domain + '.peoplebase.test'" class="btn btn-default btn-primary inline-flex items-center relative" target="_blank">Website</a>
<a :href="'http//:' + card.domain + '.peoplebase.test/admin'" class="btn btn-default btn-primary inline-flex items-center relative" target="_blank">Backend</a>
Settings
</div>
</card>
</template>
<script>
export default {
props: [
'card',
// The following props are only available on resource detail cards...
// 'resource',
// 'resourceId',
// 'resourceName',
],
mounted() {
//
},
}
</script>
The normal href on the third link works fine but the dynaimc :href does not.
What am I missing here?
You have a typo! that's why it's not working as expected!
<a :href="'http//:'
change the http//: to http://
<a :href="'http://'

Laravel, Jetstream with Inertia view returns a blank page

I have used Laravel with Jetstream & Inertia to build a small backend solution, which works fine but when I try to move the views to a folder/dir it returns an empty page(blank page). I havent worked that much with laravel so I probably doing something dump.
Yes I run Npm run watch
web.php
Route::middleware(['auth:sanctum', 'verified'])->get('/upload/form', function () {
return Inertia::render('Upload/Form');
})->name('upload.form');
AppLayout.vue
<jet-nav-link :href="route('upload.form')" :active="route().current('upload.form')">
Upload form
</jet-nav-link>
pages/Upload/Form.vue
<template>
<app-layout>
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Upload Form
</h2>
</template>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
Hello form....
</div>
</div>
</div>
</app-layout>
</template>

Resources