Building on Laravel API backend and Vuejs frontend - laravel

I would require a little help here if this method will work out well.
Firstly, I have a backend API server created using Laravel and Laravel Passport. Secondly, I have also created the frontend with Vuejs within the same project. As such, I will be required to use both the api.php and web.php routes. I am also redirecting these routes using vue-router.
Backend
Inside the web.php routes, I have used two different routes because I want to display generic contents on my landing site and the other as an authentication required dashboard.
Example:
web.php
As above, this is to capture the routes which are 404 Not Found that are directly manipulated in the address bar to redirect correctly to their respective pages. I also ended up having two different blade templates named as dashboard.blade.php and home.blade.php respectively. Is this an okay practice for a Laravel-Vuejs project? Or are there ways that you would like to recommend?
dashboard.blade.php
home.blade.php
Login related problem with login page using the layout of the landing page into another layout of the dashboard page
The problem that I am faced with when doing an API login with the password grant is that the login page does not redirect to the dashboard page properly. The URL route does change but the page is rendered as blank.
The login using axios here:

I have managed to fix the problem.
In web.php, since we have
Route::get('/dashboard/{any?}', function () {
return view('dashboard');
})->where('any', '^(?!.*api).*$[\/\w\.-]*');
Inside of my Login.vue redirect handler, I use location.href = '/dashboard' instead of this.$router.push('dashboard').

Related

How to redirect to a blade dashboard page from Vue login Component page after successfully login in laravel JetStream?

I created a laravel 8 project using jetstream authentication. As stack I have used inertia+vue. After successful login, I need to redirect to a blade file. But the problem is when I redirect to the blade file, the blade file opens as a modal like the image attached below. And the URL doesn't change (I mean the browser doesn't get refreshed). I would be grateful if you can suggest me the solution. Thanks in advance.
I eventually found this that allowed me to redirect to a page directly from a controller without it appearing in a modal—https://inertiajs.com/redirects#external-redirects.
Example:
return Inertia::location($url);

vue-router url can't find when its revisite/reload in laravel project

When i re hit the vue-router url its return 404 page not found.
I running it on laravel 5.8. in web.php file
I tried some of these but they don't work
Route::get('/{capture_all?}', 'HomeController#index')->where('capture_all', '[\/\w\.-]');
Route::get('/{vue_capture?}', 'HomeController#index')->where('vue_capture', '[\/\w\.-]');
Route::get('/{any}', 'HomeController#index')->where('any', '[\/\w\.-]');
the page will refreshed
Consider a fallback route:
Route::fallback('HomeController#index');
Any unknown route will be passed to this fallback route. Any known routes (like to your APIs) will remain untouched.

How to deploy vue.js and laravel appllication on shared hosting

I have an application with Vue and laravel5.6 which is working fine on my virtual machine setup.
What is the way to host it on live shared hosting server.
I got 500 internal server error while accessing it from URL,as there is no routes defined as GET.
Note:The index is coming from the Vue project. Laravel is only API
Like #Gaurave Dave had suggested in the comment section,
you can insert a code in your web.php for all request to go to a view. An example is given below.
Route::get('/{any}', function(){
return view('index');
})->where('any', '.*');
so inside your index.blade.php, you can insert your Vue script code or component, this will serve as landing for your Vue app.

Vue.js SPA with Laravel API

I have a problem with defining routes for frontend portion of the application. It is Vue.js with Vue Router. Since it is SPA I think defining all routes in Laravel is not the correct answer but it seems I need to somehow because content is not served with current setup. Does Vue Router fetch the entire page and load it with each link? That would mean setting up a route for each link to load in Laravel routes. I think this is not intention of SPA decide.
So with route like
<route-link :to="{name: 'faq'}">FAQ</route-link>
Does this mean I must make a route
Route::get('faq', 'FaqController#index')->name('faq');
This is new architecture that is not well understand with me now. Thank you.
Generally, SPA setup will fallback to "index.html" when no matched route
In routes/web.php:
Route::get('{path}', function () {
return view('index');
})->where('path', '(.*)');
and vue-router will handle the rest
full setup: https://github.com/cretueusebiu/laravel-vue-spa/blob/master/routes/web.php

Adding different links to a blade template based on the guard

I have set up custom guards for my app using the laravel Auth.
I already have a custom 404.blade.php in resources\views\errors.
Auth::guard('admin')->User() with home route as abc.com/admin
and
Auth::guard('portal')->User() with home route as abc.com/portal
I'm trying to set up 404 pages for them, or at least create a single 404 page with a link to 'home' which should take them to their homepage.
I'm currently on laravel 5.4
Try creating a single blade file for your 404 and put this code in it to redirect to your multiple home pages based on the guard:
#if(Auth::guard("admin")->check())
home
#elseif(Auth::guard('portal')->check())
home
#endif

Resources