VueJS blank page [closed]

Question

Closed. This question needs debugging details. It is not currently accepting answers.

Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.

Closed 4 days ago.

The community is reviewing whether to reopen this question as of 2 days ago.

Improve this question

I'm working with Laravel 12 (with Breeze), VueJS, Debugbar, all in their newest versions. My server is running locally on my MacBook, and developing on this MacBook works fine. The app works correctly on the MacBook when I access it via:

http://localhost:8888
http://192.168.1.32:8888

However, when I go to http://192.168.1.32:8888 from a different MacBook on the same network, I get a blank page.

It used to work fine when I used Laravel blades in the past. I do see the Debugbar on the other MacBook, so I would also expect the page working as expected.

I searched online, but I’ve only been working with VueJS for the last few months and I could not find a solution.

Can anyone give me pointers on what it could be? I am at a loss.

Help is greatly appreciated, thanks in advance.

rozsazoltan · Accepted Answer · 2025-11-26 12:21:20Z

2

when I go to http://192.168.1.32:8888 from a different MacBook on the same network, I get a blank page

Port 8888 only gives access to the Laravel app; Vite runs separately.

You're serving the styles (frontend app; JS and CSS files) on a different port by Vite. Share the Vite port as well, or make Vite reference your network IP address instead of localhost. You can check for 404 (Not Found) and 403 (Forbidden) errors for JS and CSS files in DevTools.

References:

edited Nov 26 at 12:21

answered Nov 26 at 12:02

rozsazoltan

18.5k8 gold badges50 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Dave33 Nov 26 at 13:32

I am reading through your links, but i must say that i'm still struggling.... My vite.config.js file looks like this: import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins: [ laravel({ input: 'resources/js/app.js', refresh: true, }), vue({ template: { transformAssetUrls: { base: null, includeAbsolute: false, }, }, })

Dave33 Nov 26 at 13:32

What would i need to change to have it working? I understand what you mention about the ports. But how to proceed from here, that's the question...

Dave33 Nov 26 at 13:55

Using your ideas i googled and this time found something that seems to work. npm run dev -- --host 192.168.1.32. Now it works via my ip. Now to find out if i can host it permanently via this ip by changing some settings (have to find out which ones and where though)

rozsazoltan Nov 26 at 14:03

I set VITE_URL for server.origin and APP_URL for server.cors.origin. I store these in the .env file, and in JS I can reference them using process.env.{envKey}, e.g., process.env.APP_URL.

rozsazoltan Nov 27 at 16:29

Unless you're using a service that can handle both (e.g. github.com/novnc/websockify) the HTTP and WS protocols on the same port, it's best to broadcast your WebSocket connection on a separate port, e.g., port 6000. This way the two processes won't interfere with each other.

|

Collectives™ on Stack Overflow

VueJS blank page [closed]

1 Answer 1

9 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Related