I am currently developing a CRUD application using Laravel 9, InertiaJS and VueJS.
When I try to go to the route /ads I have the following error message in the console :
My index page is in /Pages/Ads/Index.vue
The code of my route (web.php) is :
Route::resource('ads', AdController::class);
The code of my controller is :
class AdController extends Controller
{
public function index(Request $request)
{
$ads = Ad::with(['model','user'])->get();
return inertia('Ads/Index', compact('ads'));
}
}
The code of my Pages/Ads/Index.vue is :
<template>
<h1>Index ad</h1>
</template>
<script>
export default {
name: 'Index ad',
props: {
ads: Object,
},
}
</script>
I don't understand why I have this error, because I have other routes working and rendering properly Vue pages.
I check the Laravel and Inertia documentation but I didn't found the issue.
Thanks in advance for your help :)
I tried to look the at the differences with my code that is working with other routes, I checked the Laravel and Inertia documentation, and look online same issues.
Related
I followed an article here:
https://devlan.io/disabling-personal-teams-in-laravel-8-and-jetstream-1fd083593e08
Basically to disable personal teams in Laravel / Jetstream. Now the article gives the example of how to achieve this using Livewire but I am using Inertia. The Livewire template needs this to be changed from this:
#if (Laravel\Jetstream\Jetstream::hasTeamFeatures()
To this:
#if (Laravel\Jetstream\Jetstream::hasTeamFeatures() && Auth::user()->isMemberOfATeam())
How would I achieve this in Inertia? I have had a look around the web, but because I am new to this stack I am completely stumped.
Thanks in advance.
This is a conditional made in Blade templates. Since Inertia doesn't work with Blade, instead it uses some JavaScript framework (Vue, React, Svelte), what you need to do is to run this conditional somewhere in the Laravel side (Controller, Middleware) and set a variable that you'll pass your client side component to conditionally render the teams html stuff.
If you want to have this flag available to all the pages in your app, you can do this through the HadleInertiaRequests middleware.
class HandleInertiaRequests extends Middleware
{
public function share(Request $request)
{
return array_merge(parent::share($request), [
'has_teams' => Laravel\Jetstream\Jetstream::hasTeamFeatures() && Auth::user()->isMemberOfATeam()
]);
}
}
Then, your component, you can use that variable to render the teams part or not (Example using Vue):
<div v-if="$page.props.has_teams">
<!-- Teams... -->
</div>
I'm trying to keep Login and Register in blade. I used the default php artisan ui vue --auth.
Then keep the SPA in Vuejs with Vuetify.
App.vue
...sidebar containing link to register
<v-list-item link #click="register">
<v-list-item-action><v-icon>mdi-icon</v-icon></v-list-item-action>
<v-list-item-content><v-list-item-title>Register</v-list-item-title></v-list-item-content>
</v-list-item>
...
<script>
methods: {
register() {
axios.post('/register')
.finally( err => {
window.location = '/register';
})
},
}
</script>
If you click the register link, it keeps going to "/home" instead of "/register". Help please thanks.
instead of
window.location = '/register';
use this
window.location.href = '/register';
I'm basically using VueRouter to create all my routes which is working really well. However, my application is built using Laravel. So if I refresh any of the routes I get an error that the route is not defined. So at the minute in every controller I've had to add an index function. This just returns the view of my app.blade which is just the usual tags etc and the to load my single page app. I'm just wondering if there is a cleaner solution? I guess I could move the return view into a single Controller and make my Controllers extend this. But I'm just wondering if there is a better way I'm missing?
i.e. one of my routes via VueRouter:
{
path: "/clients",
name: "clients",
component: () => import(/* webpackChunkName: "clients" */ "../resources/js/components/Views/Clients/Clients.vue")
},
The route in my clients.php file
Route::get('/clients', [App\Http\Controllers\ClientController::class, 'index'])->name('clients');
Then the ClientController index function
public function index()
{
return view('app');
}
It would just be nice to have the loading of the app.blade done somewhere else and not need to be specified per controller. Any help would be appreciated to ensure it's all done efficiently!
Thanks!
Here is how I solved this issue for one of my projects which is also single page application in Vue and Laravel: https://github.com/lyyka/laravel-vue-blog-spa/blob/master/routes/web.php
Simply, in your routes file, you put this code:
Route::get('/{any}', function () {
return view('welcome');
})->where("any", ".*");
And in my welcome view I have:
#extends('layouts.app')
#section('content')
<div class = "container">
<router-view></router-view>
</div>
#endsection
Basically this will return your app view for any URL and so your Vue SPA should work properly. Generally, it is not a good practice to put callback functions inside your routes file, but in this case, you won't even be using your routes file as it is a SPA, so this solution can pass! :)
You should use your single html file and make a controller.
On your controller
public function index(){
return view('index');
}
on your web.php
basically, you should make the same route on your laravel and vue
Route::get('/products', [ProductsController::class,'index']);
in my vue-routes
import Products from './components/Products.vue'
{
path:'/products'
component: Products
}
I have a Laravel + VueJS app. I would like to change the url when the user selects a new year, for example.
The user in on the url idea/[IDEA_ID]/[YEAR] and changes year inside the page, so i want to set the url, but the rest of the work is done through axios call.
Here is how I work for now:
Route::get('idea/{n}/{m}', 'IdeaController#idea')->name('idea');
class IdeaController extends Controller
{
public function idea($id, $year)
{
$sql = "";
$array = DB::connection('ideas')->select( DB::connection('ideas')->raw($sql));
return view('ideas/idea', ['idea' => json_encode($array)] );
}
}
blade view:
#extends('template')
#section('content')
<div>
<div id="app">
<ideapage ideas="{{ $idea }}"></ideapage>
</div>
</div>
#endsection
And in my Vue view (ideapage), I have all the logic and only make axios requests.
The problem is that I want to change my url inside my Vue view, when the user changes the year for example.
Therefore I am wondering if I did the things well. Would it be a better idea to separate the components inside the laravel blade view? And how can I change only a section when the url changes?
I am not using VueRouter: the routes are in web.php only.
Thanks a lot in advance.
After a lot of thinking, I didn't change my architecture for now, and I only use history.pushstate when the year or idea changes
idea.vue
watch: {
idea: function() {
history.pushState({}, null, '/idea/'+this.idea +'/'+this.year)
},
year: function() {
history.pushState({}, null, '/idea/'+this.idea +'/'+this.year)
}
},
On my laravel home page I have a vue component like this
<new-tutor area-id="{{ $area->slug }}" tutor-id="{{ $tutor->slug }}" route="{{ route('tutor.show', [$area, $tutor]) }}"></new-tutor>
it returns all new tutors in a given area in individual bootstrap cards, and uses this controller
public function index(Request $request, Area $area, Profile $profile, Tutor $tutor)
{
$newTutors = Tutor::with(['user', 'area'])->inArea($area)->latestfirst()->get();
return response()->json($newTutor, 200);
}
I would like to be able to click on the tutors name and be sent to that tutors page, but I can't seem to get the tutor slug to pass though properly, and I am not sure why.
In my vue component I set the link like
<a :href="route">{{newTutor.name}}</a>
and I have props set up like this
props: {
areaId: null,
tutorId: null,
route: { type: String, required: true }
},
the slug does come through in a dd on newTutors, and Tutor.
Also note, I am using the same web route
tutor.show
in other blade templates, so I am mostly confident that that is not where the issue is.
if you using laravel + vuejs,You need add #{{}}
<a :href="route">#{{newTutor.name}}</a>