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
Related
I'm working with vue-router on a laravel project but I need to use laravel router for the api, so I'm wondering on how to pass from vue-router to laravel router when the url contains /api/.
My current web.php look look likes this :
Route::get('/{vue_capture?}', [HomeController::class, 'index'])->where('vue_capture', '[\/\w\.-]*');
I've resolved this by putting my api routes before the vuejs route declaration
I have a very small software and I use laravel and vue.js. I would like to know the difference between routing though api.php and web.php in routes folder. Can somebody explain me the difference in these two cases?
You can define the routes in either web.php or api.php. However, routes in api.php have certain advantages
routes get automatically prefixed with '/api/'
routes use api-middleware and auth. This can add certain additional security by throttling API-requests.
You should use api.php for all your api needs or any routes that will be called through ajax.
:
Any help would be really appropriated on how to achieve this.
I have currently three separate applications, two front-ends running with vue.js and one backend app, with laravel tenancy, only serving API's, no front-end.
The main base URL or the backend url is set to example.com, this is the tenancy application. It auto-generate URL subdomain.example.com for tenants & databases, as the tenancy package works.
Another domain setup for secure.example.com that points to the another vue application, where we register. Works perfectly well.
Now I have a third application on vue.js, for the tenant's, that points to anything to *.example.com,
and the way the tenancy works, is that wildcards & directory must be set to the main application where tenancy is installed, for the tenancy to work with subdomains.
I cannot create *.example.com & point it to the vue application, as the API calls, then go to vue application not to the back-end, as the sub-domain *.example points to vue application
The whole point is to separate the Tenant UI entirely using a frontend framework like vue.js from the back-end.
Im using Quasar separated from the Laravel Api, with the Hyn Multitenant package..
brightmind-erp.com
demo.brightmind-erp.com
In public/panel from Laravel public folder I'm inserting the dist assets from Quasar, and redirecting '/' calls to that route where Vue Router enters in action:
Route::get('/', function() {
return redirect()->route('frontend');
});
// Route everything else to Vue
Route::get('panel/{any?}', function () {
return file_get_contents(public_path().'/panel/index.html');
})->where('any', '.*')->name('frontend');
If you're using Webpack you have to configure it to find the Vue assets from (in this case) '/panel' folder....
I fought with a lot of tutorials to configure .htaccess file or nginx config to make the api work in '/api' route and vue in '/' but I couldn't
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.
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').