I have been working on a Laravel 8 Inertia and Vue.js project for a couple of weeks without this problem.
My files were residing in C:\Users[my_user]\laravel. I was using the artisan command serve where it was opening 127.0.0.1:8080 as the local development server -- everything was fine.
I decided that it was time to transfer the files to apache's http://localhost/laravel where I would use xampp to open the project instead of Laravel php artisan command serve.
I have inspected my routes, Controllers, passed the Inertia::render() command, reached app.js without any problem. but when I run the createInertiaApp() I get url part being duplicated I guess by Inertia and not vue.js
Here is the code I am having in my app.js
console.log('Still working well without duplicating url')
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => require(`./Pages/${name}.vue`),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.component('Link', Link)
.component('Head', Head)
.mixin({ methods: { route } })
.mount(el);
},
});
NB: when I comment the createInertiaApp code, the home url will be perfectly http://localhost/laravel, but when I run the createInertiaApp I get http://localhost/laravel/laravel/
I'm facing the same problem. I'm using Nginx, Laravel Jetstream with Inertia stack and I'm working on a local environment. What I get when I request a url e.g. 192.168.1.204:5500/helpdesk/public/login is 192.168.1.204:5500/helpdesk/public/helpdesk/public/login. Urls appear normal when I use php artisan serve. What I have noticed is that the issue lies on /vendor/inertiajs/inertia-laravel/src/Response.php toResponse() method and in particular in the following piece of code:
$page = [
'component' => $this->component,
'props' => $props,
//'url' => $request->getBaseUrl().$request->getRequestUri(),
'url' => $request->getRequestUri(),
'version' => $this->version,
];
If you replace $request->getBaseUrl().$request->getRequestUri() with $request->getRequestUri() the problem should go away.
But I think there must be a much better/cleaner way to do that. I hope someone else can provide more help on that.
Actually the above code was changed when support to Laravel 9 was added to inertia/laravel: https://github.com/inertiajs/inertia-laravel/pull/347/commits/bf059248ab73bcaccbea057d0a9fa11446fa0e20.
There is also an issue opened for this: https://github.com/inertiajs/inertia-laravel/pull/360.
Related
I want my test to visit any other pages of my website by giving it a direct link ( = Cypress.config().baseUrl + '/explore/search/models')
cy.url().then((url) => {
cy.visit('/explore/search/models');
});
It doesn't work for me. It gives 404 Not found error although any other website inside the current tests opens without any problems. What am I doing wrong?
visit() command is automatically prefixed with baseUrl, if you've configured.
cypress.config.js:-
const { defineConfig } = require('cypress')
module.exports = defineConfig({
e2e: {
baseUrl: 'http://localhost:3000/#/',
},
})
then,
cy.visit('dashboard') //Visits http://localhost:3000/#/dashboard
Refer: https://docs.cypress.io/api/commands/visit#Prefixes
Why the cy.url call? Just use cy.visit. Also, delete the slash at the beginning of your url.
This is not the Cypress issue. The problem was on the side of my application. So the code is correct, of course without slash.
Recently, I decided to use Laravel Sanctum to submit forms using Vue JS axios. I use Sanctum CSRF-Cookie to validate CSRF before every form submission.Unfortunately, after making this change and after setting up Laravel Sanctum now, all other forms my website such as sign out button (which is inside a form) doesn't work properly.For example, if I add one new person to database using axios to submit that form, after submission if I want to log out it redirects me to 419 page which says Page expired. In some sections of website, I used Vue JS components and Axios to submit forms without refreshing that page. I also don't use Sanctum SPA for authentication I just want to use it for CSRF validation for every form submission!There are some changes that I made and you may need to know but before that if there is any information that is missing in my question here, please let me know so I can update this thread as soon as possible. Also I found a similar question here but the guy who answered that question, hasn't used Vue JS as frontend and whatever he mentioned looked correct on my end and still, I cannot logout after submitting form using Vue JS component and Axios.If anybody here has any solution please answers below. Thank you.
I changed route middleware from API to WEB in RouteServiceProvider.php file like this:
public function boot() {
$this->configureRateLimiting();
$this->routes(function () {
Route::prefix('api')
->middleware('web')
->namespace($this->namespace)
->group(base_path('routes/api.php'));
Route::middleware('web')
->namespace($this->namespace)
->group(base_path('routes/web.php'));
});
}
I changed support_credentials to true in config\cors.php:
'paths' => ['api/*', 'sanctum/csrf-cookie'],
'supports_credentials' => true,
In config\sanctum.php file this is stateful value:
'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
'%s%s',
'localhost,localhost:3000,127.0.0.1,127.0.0.1:443,127.0.0.1:8000,::1',
env('APP_URL') ? ','.parse_url(env('APP_URL'), PHP_URL_HOST) : ''
))),
In .env file I don't actually know what should I set for subdomain because there is no subdomain. I just used 127.0.0.1 for SESSION_DOMAIN
SESSION_DRIVER=cookie
SESSION_LIFETIME=120
SESSION_DOMAIN=127.0.0.1
SANCTUM_STATEFUL_DOMAINS=127.0.0.1
SESSION_SECURE_COOKIE=true
Now in VUE JS component, I use this method to validate Sanctum CSRF before adding new contact:
async addNewContact ({commit})
{
await axios.get('/sanctum/csrf-cookie').then(() => {
axios.post(/api/new/contact/add, '', '')
.then(response => {
comit('newContactAlert', response.data.newContact)
})
.catch(err => {
console.log(err)
})
})
},
Lumen is sending response to the client side according to the order of requests. It is holding next response until previous response completes. I need to make it asynchronously
Laravel Lumen Routing Code:
$router->get('waist-xxxxxxx/v20/', ['uses' => 'DemoController#fnDemoFunction']);
$router->get('waist-xxxxxxx/v20/{serverSideRowUuid}', ['uses' => 'DemoController#fnDemoFunction']);
$router->post('waist-xxxxxxx/v20/', ['uses' => 'DemoController#create']);
$router->put('waist-xxxxxxx/v20/{serverSideRowUuid}', ['uses' => 'DemoController#update']);
$router->options('waist-xxxxxxx/v20', function () {
return response('OK', \Illuminate\Http\Response::HTTP_NO_CONTENT)
->header('Access-Control-Allow-Credentials', 'true')
->header('Connection', 'keep-alive');
});
$router->options('waist-xxxxxxx/v20/{serverSideRowUuid}', function () {
return response('OK', \Illuminate\Http\Response::HTTP_NO_CONTENT)
->header('Access-Control-Allow-Credentials', 'true')
->header('Connection', 'keep-alive');
});
Vue.js App code for API calling:
export default {
methods: {
async mxGetDataFromDb() {
/*
TODO: Need to restrict the load to current data
api is vuex-orm-axios plugin function
When using json-server backend the code is:
*/
console.log('reminders req sent')
const proRemsFromDB = await clientSideTable.api().get(clientSideTable.apiUrl)
console.log('reminders recd')
if (proRemsFromDB.ok) {
}
},
},
}
Here is a screenshot for better understanding: enter image description here
I suspect you're using php artisan serve to test with.
This command utilizes the built-in PHP development server. It's a great tool, but it can only handle one request at a time:
The web server runs only one single-threaded process, so PHP applications will stall if a request is blocked.
In general, while php artisan serve is great for quick testing, you'll want to set up something like Laravel Homestead or some other more robust development environment long-term.
I'm new to Laravel and PHP in general, but familiar with Vue and SPA's. I know how to create authentication with Bcrypt, for example. However, I used Laravel to run php artisan make:auth and to create several different endpoints for the backend.
I was trying to convert my app into a SPA using Vue, however using routing with Vue causes issues with the routes defined in the web.php. For example, I have my web.php like this, with several different routes.
<?php
Route::get('/{vue_capture?}', function () {
return view('app');
})->where('vue_capture', '^(?!storage).*$');
Route::get('/', function () {
return view('app');
});
Route::resource('Videos', 'VideoController')->middleware('auth','isAdmin');
Route::resource('Categories', 'CategoriesController')->middleware('auth');
Route::get('/search', 'VideoController#search')->middleware('auth');
Auth::routes();
Route::get('/settings/account', 'AccountsController#edit')->middleware('auth');
Route::get('/auth', 'AccountsController#get');
Route::put('/settings/account', 'AccountsController#update')->middleware('auth');
However, I also have a routes.js to have vue-router handle the routing with the following :
import Home from './components/Home.vue'
import Videos from './components/Videos.vue'
import Categories from './components/Categories.vue'
export default{
mode: 'history',
routes: [
{
path:'/',
component:Home
},
{
path:'/Videos',
component:Videos
},
{
path:'/Categories',
component:Categories
},
{
path:'/login',
component:login
},
{
path:'/register',
component:register
},
{
path:'/logout',
component:logout
}
]
}
I understand that Vue is supposed to take over the routing if you use a SPA, but is there any way to use both? I can't find anything that addresses this issue but I can't believe that Laravel would make you choose to either use their built-in commands like php artisan make:auth or have to scrap all of that and do it all manually if you want a SPA with routing.
I've tried going through different CRUD turorials on using Laravel and or Vue.
I've tried directing all of the routes to Vue to have vue-router handle the routing.
I've tried not giving all routing to vue-router and retaining the back-end routes that I had in web.php
Other semi-related problem is my routes aren't even appearning as links using router-link . It just appears as normal text. But for now my priority is the routing issue.
You can combine both vue route and Laravel route. But for the best result, I advise you use vue router since you are building an spa.
remove
Route::get('/', function () {
return view('app');
});
put all the backend route before the route that point to your vue.
Route::resource('Videos', 'VideoController')->middleware('auth','isAdmin');
Route::resource('Categories', 'CategoriesController')->middleware('auth');
Route::get('/search', 'VideoController#search')->middleware('auth');
Auth::routes();
Route::get('/settings/account', 'AccountsController#edit')->middleware('auth');
Route::get('/auth', 'AccountsController#get');
Route::put('/settings/account', 'AccountsController#update')->middleware('auth');
Route::get('/{vue_capture?}', function () {
return view('app');
})->where('vue_capture', '^(?!storage).*$');
Also, verify that you don't have conflicting routes on your backend (run php artisan route:list to see your laravel route list) and vue routes. I hope this helps.
The accepted answer is perfect (I upvoted but I have no rep yet for it to count) and worked well for me but only under the condition if I also created 'dummy' vue components and imported them to work with the routes. Hope this helps!
import Login from './auth/Login'
import Register from './auth/Register'
import Logout from './auth/Logout'
{ path:'/login', component:Login },
{ path:'/register', component:Register },
{ path:'/logout', component:Logout },
You can just use this instead
Route::get('/{vue_capture?}', function () {
return view('app');
})->where('vue_capture', '^(?!storage).*$')->middleware('auth');
I'm building a dashboard interface in Vue with Vue-router using history mode. Everything is working fine when you navigate to the individual routes cooresponding to the sections of the dashboard (e.g. '/employees/dashboard/main', '/employees/dashboard/orders/all'). I'm trying to set up some redirects in the web.php file using Route::redirect('/here', '/there'). I want everything to go to my dashboard landing page route: '/employees/dashboard/main'. Some routes properly redirect and some don't depending on if a '/' is at the end of the URI or not.
'/employees' redirects to '/dashboard/main' (incorrect)
'/employees/' redirects to '/employees/dashboard/main' (correct)
'/employees/dashboard' redirects to '/employees/dashboard/main' (correct)
'/employees/dashboard/' redirects to '/employees/dashboard/dashboard/main' (incorrect)
web.php (snippet)
//Employee Routes
//below route was also giving the same result but I left here to show that
//I've also tried it.
//Route::redirect('/employees', '/employees/dashboard/main');
Route::group(['prefix' => 'employees'], function() {
Route::redirect('', 'dashboard/main', 308);
Route::redirect('/', 'dashboard/main', 308);
Route::redirect('/dashboard', 'dashboard/main', 308);
//catch-all route so vue router routes don't throw 404
Route::get('/dashboard/{any}', 'EmployeeController#showDashboard')
->where('any', '.*')
->name('employee.dashboard');
});
employee-dashboard.js (snippet)
const router = new VueRouter({
mode: 'history',
linkActiveClass: 'active',
routes: [
{path: '/employees/dashboard/main', component: Main},
{
path: '/employees/dashboard/orders',
component: Orders,
redirect: '/employees/dashboard/orders/active',
children: [
{path: 'all', component: FilteredOrders},
{path: 'active', component: FilteredOrders},
{path: 'completed', component: FilteredOrders}
]
}
]
});
const dashboard = new Vue({
el: '#dashboard',
router
});
Then in dashboard.blade.php I have my router-links and router-view set up.
Any help will be greatly appreciated. Thanks.
Edit:
What's even more strange is when I comment out all of the Route::redirect entries in web.php, run php artisan route:clear, and restart php artisan serve, then go to /employees, it still redirects me to the wrong route (/dashboard/main).
I've found the cause of the bad redirects. The browser caches redirects and for some reason will use that rather than the updated redirect route in the routes/web.php file. To clear this cache in Firefox: Go into the history menu and right click on one of the pages from your laravel project, then click "Forget about this site". It will now use the updated redirect routes in your routes file.
I've also changed the redirect to: Route::redirect('/employees', '/employees/login'); since I'm using Laravel's Auth scaffolding and have it set up to redirect to the main page of my dashboard after logging in.
Here is where I found this solution:
https://superuser.com/questions/467999/clear-301-redirect-cache-in-firefox#661767