Level 102
Ziggy just uses the url on the page for me. So can you show how you are using it ? I personally have installed this for the javascript instead of the one from /vendor https://www.npmjs.com/package/ziggy-js
2 likes
Feb 9, 2023
11
Level 3
Can't render correct routes with vite, laravel, ziggy and vue
Currently I have a new laravel app with vite, vue and ziggy, and the site loads correctly, but when I check the generated links, they don't include the port, so when I click on the links the site doesn't work.
I tried two ways of testing the site, one way was spinning up the local server with php artisan serve and npm run dev and I can enter the site with the port and enter the links manually but the links don't work because they are rendered like 127.0.0.1/register, but it works if I manually enter 127.0.0.1:8000/register and I can see the register form.
It also works if I put the route of the url manually without ziggy because the route end up being 127.0.0.1:8000/register, but where's the fun in that?
I also tried only running npm run dev and when I enter to localhost but it doesn't show anything, but it could be because I could be running xampp in the background. so I also tried shutting down the apache server and it also doesn't show anything.
any ideas of what I could be doing wrong?
Level 3
Hi @sinnbeck ,
this is an example of the code in the template in vue:
<Link
:href="route('auth.registerView')"
class="-ml-16 btn btn-danger"
>
Register now!
</Link>
And this is the code in the routes file:
Route::get('/usuario/registro', [UserRegisterController::class, 'index'])->name('auth.registerView');
btw, I also installed that package.
Also, how should I be running the local test server? is it ok to run php artisan serve and also npm run dev?
1 like
Level 102
Level 3
@Sinnbeck I'm looking at what @routes print and it shows the port:
const Ziggy = {"url":"http:\/\/127.0.0.1:8000","port":8000,"defaults":{},"routes":{"sanctum.csrf-cookie":{"uri":"sanctum\/csrf-cookie","methods":["GET","HEAD"]},"ignition.healthCheck":{"uri":"_ignition\/health-check","methods":["GET","HEAD"]},"ignition.executeSolution":{"uri":"_ignition\/execute-solution","methods":["POST"]},"ignition.updateConfig":{"uri":"_ignition\/update-config","methods":["POST"]},"landing.index":{"uri":"\/","methods":["GET","HEAD"]},"dashboard":{"uri":"admin\/panel","methods":["GET","HEAD"]},"menus.index":{"uri":"admin\/menus","methods":["GET","HEAD"]},"productos.index":{"uri":"admin\/productos","methods":["GET","HEAD"]},"auth.registerView":{"uri":"usuario\/registro","methods":["GET","HEAD"]},"auth.registerUser":{"uri":"usuario\/registro","methods":["POST"]},"logout":{"uri":"salir","methods":["POST"]},"empresa.createFirst":{"uri":"empresa\/registro","methods":["GET","HEAD"]}}};
but if the port number is there, then why the vue ziggy helper isn't showing the port?
1 like
Level 3
All right, found a work around, hope this helps anyone.
the problem is that when I use the Link component and the route function, the route generated doesn't show the port.
So I made a function in the Utils folder so I could add it as a mixin to make it globally available.
and the function is just a wrapper for the route function but now I made the route absolute.
this is the routeGenerator.js file in the utils folder:
import route from "ziggy-js";
function routeGenerator(routeName, params = {}, absolute = true, routeObject = route) {
return routeObject(routeName, params, absolute);
}
export {routeGenerator};
1 like
Level 63
@dru What APP_URL have you defined in the .env file ? I sometimes have a problem (not necessarily related to InertiaJS) where a URL is dynamically formed without the port.
And when I add the port in the .env file, it works.
APP_URL=http://localhost:8000
1 like
Level 3
Hi @vincent15000, the APP_URL=http://localhost:8000 was, so now it gets weirder I guess, hehe.
1 like
Level 102
@dru what if you just import ziggy directly in the file you need it and try it out?
import route from "ziggy-js";
console.log(route('some.route'))
1 like
Level 1
@vincent15000 it's work for me after i put -> APP_URL = http://localhost:8000 and run in the browser use localhost:8000 but if everyone access with this link -> 127.0.0.1:8000, u guys need to change APP_URL to 127.0.0.1:8000 and run php artisan ziggy:generate again.
but my another question is how about when i deploy to the server? is localhost:8000 still work? i host in share hosting?
1 like
Level 63
@kokleng This post is old. Please create a new post for this question.
1 like
Level 1
@vincent15000 Yes sir, thank you. here is the new question post -> https://laracasts.com/discuss/channels/inertia/cant-render-correct-routes-port-with-vite-laravel-ziggy-and-inertia-vue-js
Please or to participate in this conversation.