Access Your Laravel + Vue.js (Vite) App from Mobile on Local Network

Introduction

During web development, we often run Laravel and Vue.js locally at http://127.0.0.1:8000 or http://localhost:5173.
But when we want to test the website on a mobile device — especially for responsive design or component behavior — it doesn’t load.

In this guide, you’ll learn how to make your Laravel + Vue (Vite) project accessible from your mobile over your local Wi-Fi network.

Requirements

• Laravel 10+ (or later)
• Vue.js (with Vite)
• Composer & Node.js installed
• PC and Mobile connected to the same Wi-Fi network

Step 1: Find your Local IP Address

Open a terminal on your computer and type:

hostname -I

hostname -I

or

ip addr show

ip addr show

Example output:

192.168.1.110

This is your computer’s local IP on the Wi-Fi network.

Step 2: Configure Vite for Mobile Access

Open your project’s vite.config.js file and add this server configuration:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    server: {
        host: '0.0.0.0',    // allows access from other devices
        port: 5173,
        hmr: {
            host: '192.168.1.110',  // your PC IP address
        },
    },
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    server: {
        host: '0.0.0.0',    // allows access from other devices
        port: 5173,
        hmr: {
            host: '192.168.1.110',  // your PC IP address
        },
    },
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

📘 Note: Replace 192.168.1.110 with your actual local IP address.

Step 3: Update the .env File

Open your .env file and set your app URL to your IP and port:

APP_URL=http://192.168.1.110:8000

APP_URL=http://192.168.1.110:8000

Then clear the cache to apply changes:

php artisan optimize:clear

php artisan optimize:clear

Step 4: Run Your Servers

Open two terminals.

🖥️ Terminal 1 (for Vite)

composer run dev

composer run dev

Output will show something like:

➜  Local:   http://localhost:5173/
➜  Network: http://192.168.1.110:5173/

➜  Local:   http://localhost:5173/
➜  Network: http://192.168.1.110:5173/

⚙️ Terminal 2 (for Laravel backend)

php artisan serve --host=192.168.1.110 --port=8000

php artisan serve --host=192.168.1.110 --port=8000

Step 5: Access from Your Mobile

Now, from your mobile browser (connected to the same Wi-Fi), open:

http://192.168.1.110:8000

http://192.168.1.110:8000

🎉 Your Laravel + Vue.js app should now be fully functional —
including Vue components, CSS, and hot-reload features.

Troubleshooting Tips

If the page doesn’t load, disable the firewall temporarily:

sudo ufw disable

sudo ufw disable

Make sure both PC and mobile are connected to the same Wi-Fi network.

Always use your local IP, not localhost or 127.0.0.1.

Conclusion

With this simple configuration, you can now preview your Laravel + Vue.js app directly on your mobile device while developing.
This makes it easier to check responsive layouts, touch interactions, and real-world performance before deployment.

Happy coding! 🚀