Level 63
If you are using VueJS for the frontend, you have to manage the front routes with VueJS (vue-router) and not with the Laravel router.
1 like
Nov 21, 2023
15
Level 1
Merging laravel api with vue3 frontend
What is the right way of placing vue compiled files inside laravel project. Currently I have all vue files inside public folder except index.html - content of index.html is inside view.php. Alsow what would be .htaccess config. domain.com is working fine but domain.com/login trows 404.
Level 1
So there is no way to access domain.com/api/... calls?
1 like
Level 63
@belic_a Sure you can access the APIs. But domain.com/api/... is different from domain.com/login. Can you show the routes please ?
1 like
Level 1
GET|HEAD / .............................................................................................. POST _ignition/execute-solution ignition.executeSolution › Spatie\LaravelIgnition › ExecuteSolutionC… GET|HEAD _ignition/health-check ... ignition.healthCheck › Spatie\LaravelIgnition › HealthCheckController POST _ignition/update-config ignition.updateConfig › Spatie\LaravelIgnition › UpdateConfigController POST api/assign-card-to-user/{id} ................................... UserController@assignCardToUser GET|HEAD api/cards ................................................................. CardController@index POST api/cards ................................................................. CardController@store GET|HEAD api/cards/{id} ............................................................. CardController@show PUT api/cards/{id} ........................................................... CardController@update DELETE api/cards/{id} ........................................................... CardController@delete GET|HEAD api/cards{id} ...................................................... CardController@checkBalance GET|HEAD api/clients .......................................................... UserController@getClients POST api/create-account ...................................... AuthenticationController@createAccount POST api/create-first-user ................................. AuthenticationController@createFirstUser POST api/create-pi-user ....................................... AuthenticationController@createPiUser DELETE api/delete-pi-user ....................................... AuthenticationController@deletePiUser GET|HEAD api/doors .............................................................. DoorLogController@index POST api/doors .............................................................. DoorLogController@store GET|HEAD api/doors/{id} .......................................................... DoorLogController@show PUT api/doors/{id} ........................................................ DoorLogController@update DELETE api/doors/{id} ........................................................ DoorLogController@delete GET|HEAD api/get-card-by-number/{id} ................................. CardController@getCardByCardNumber GET|HEAD api/get-user-by-card-number/{id} ............................ UserController@getUserByCardNumber POST api/login ....................................................... AuthenticationController@login POST api/sign-out ................................................... AuthenticationController@logout POST api/sign-out-all ............................................ AuthenticationController@logoutAll GET|HEAD api/users ................................................................. UserController@index GET|HEAD api/users/{id} ............................................................. UserController@show PUT api/users/{id} ........................................................... UserController@update DELETE api/users/{id} ........................................................... UserController@delete GET|HEAD sanctum/csrf-cookie ................................ Laravel\Sanctum › CsrfCookieController@show
Those are laravel routes, here I have login route that im not using. Login is done with api/login with vue. Code works fine when im running vue development server, I just have problems with merging compiled code with laravel.
1 like
Level 75
- what exactly are you wanting to do?
- Who accesses this API?
It looks like it could be a regular web app with your front end.
Normally an api, you would have nothing to do with the front end. That would be up to the developer using the API.
I see so many "API's" being done here on the forum that should be regular web apps.
1 like
Level 63
@belic_a This is not readable, but what I see is that you don't have any login route, but an api/login one.
POST api/login ....................................................... AuthenticationController@login
1 like
Level 1
Yes, I made API in laravel and frontend in VUE i need to make all work together on same domain.
1 like
Level 75
i need to make all work together on same domain
Make it a regular website. Just suggestion.
1 like
Level 50
@belic_a Have a look at InertiaJS
Level 1
Thanks for your sugestion but it doesnt works for my needs.
1 like
Level 63
@belic_a What doesn't work ? Have you seen my last comment ?
Level 1
@vincent15000 Actualy I didn't. Yes those are laravel routes and all are api calls routes . There is no /login route. /login is defined in vue router as : { path: '/login', name: 'login', component: Login, meta: { layout: BlankLayout } }. Could it be the problem that I'm trying to access route directly rather than going to domain.com and handling it trough the app? When I try to access for example domain.com/clients which is alsow vue route it seems to work fine, but when i try login it trows 404 .
1 like
Level 63
@belic_a Ok so can you show the VueJS routes please ? (sorry from the beginning I didn't notice that it was a post about VueJS)
Level 1
@vincent15000 Yes of course `const routes = [ { path: '/', redirect: { name: 'clients' } }, { path: '/klijenti', name: 'clients', component: Clients, meta: { layout: DashboardLayout } }, { path: '/kartice', name: 'cards', component: Cards, meta: { layout: DashboardLayout } }, { path: '/pristup', name: 'logs', component: DoorLog, meta: { layout: DashboardLayout } }, { path: '/login', name: 'login', component: Login, meta: { layout: BlankLayout } }, { path: '/:notFound(.*)', redirect: '/' } ]
const router = createRouter({ history: createWebHistory(), routes })
router.beforeEach((to, _, next) => { if (to.name === 'login' && store.getters.isLoggedIn) { next({ name: 'clients' }) } else if (to.name !== 'login' && !store.getters.isLoggedIn) { next({ name: 'login' }) } else { next() } })`
1 like
Level 1
I found a solution, problem was in .htaccess file. Correct .htaccess setup is: <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^ index.html [QSA,L] RewriteCond %{REQUEST_URI} ^/api [NC] RewriteRule ^(.*)$ index.php [QSA,L] </IfModule>
2 likes
Please or to participate in this conversation.