How to Deploy Laravel 12 with Vue 3 (Vite) on Shared Hosting — Beginner’s Guide - Kritimyantra

Deploying a Laravel 12 project with a Vue 3 frontend (using Vite) on shared hosting might feel like launching a rocket — confusing buttons, too many wires. But don’t worry! In this guide, we’ll make this mission super simple.

By the end, your Laravel + Vue 3 app will be live on shared hosting — working beautifully with Vite assets, SPA routing, and all.

🧰 Prerequisites

Before diving in, make sure you have:

✅ Laravel 12 + Vue 3 app with Vite configured
✅ A shared hosting account (like Hostinger, Namecheap, GoDaddy, etc.)
✅ Access to cPanel or FTP
✅ PHP 8.2+ support (Recommended for Laravel 12)

🎯 Step-by-Step Deployment

🛠️ 1. Build the Vue 3 App for Production

Let’s start by compiling the Vue 3 frontend using Vite.

Run this in your Laravel project root:

npm run build

This will generate a dist/ folder (or whatever path you’ve set) under resources/js or resources/vue.

Let’s say you’ve configured the Vite build output to go to public/vue.

You’ll see a structure like this:

public/
├── vue/
│   ├── index.html
│   ├── assets/
│   └── js/

🪄 2. Setup Laravel to Serve Vue SPA Routes

Add this fallback route in your routes/web.php:

use Illuminate\Support\Facades\Route;

Route::get('/{vue_capture?}', function () {
    return file_get_contents(public_path('vue/index.html'));
})->where('vue_capture', '.*');

📌 What this does: It tells Laravel to serve vue/index.html for any route not matched earlier — allowing Vue Router to take over. Perfect for SPAs.

📁 3. Upload Your Project to Shared Hosting

Here’s how to structure your files on shared hosting:

🧱 Directory Setup

Shared hosting usually serves files from the public_html/ folder.

Here's how to place your files:

public_html/            <-- Laravel's "public" folder contents go here
├── index.php
├── vue/
├── js/
├── css/
...
your-laravel-project/   <-- All other Laravel files
├── app/
├── bootstrap/
├── routes/
├── vendor/

✨ Smart Tip:

If you can’t place Laravel root outside public_html, move everything inside public_html/laravel and keep only public files in root.

Then, edit index.php in public_html/ like this:

require __DIR__.'/laravel/vendor/autoload.php';
$app = require_once __DIR__.'/laravel/bootstrap/app.php';

⚙️ 4. Environment and Storage Setup

✅ Upload your .env file and configure it:

APP_ENV=production
APP_KEY=your-key-here
APP_DEBUG=false
APP_URL=https://yourdomain.com

✅ Give correct permissions (use File Manager or SSH):

storage/ and bootstrap/cache/ should be writable.

✅ Don’t forget to run:

php artisan config:cache
php artisan route:cache
php artisan view:cache

🌐 5. Update `.htaccess` for Pretty URLs

If your shared hosting uses Apache (most do), ensure your .htaccess inside public_html/ contains:

<IfModule mod_rewrite.c>
    RewriteEngine On

    # Redirect to index.php
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^ index.php [L]
</IfModule>

This ensures both Laravel and Vue routes work nicely without 404 errors.

🎨 Bonus: Vue Index.html Example for Refresh

This is how your public/vue/index.html might look:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Vue 3 SPA</title>
    <link rel="stylesheet" href="/vue/assets/app.css">
    <script type="module" src="/vue/assets/app.js"></script>
  </head>
  <body>
    <noscript>Please enable JavaScript to run this app.</noscript>
    <div id="app"></div>
  </body>
</html>

✅ Make sure asset paths are relative (/vue/assets/...) or absolute to prevent 404 on refresh.

🔍 Real-World Analogy

Think of Laravel as your backend engine, and Vue as your car’s dashboard. Laravel powers everything under the hood, while Vue makes it look modern and interactive.

When deployed properly, your users will see a smooth dashboard (Vue), and your Laravel engine will handle the business logic — fast and silent in the background.

✅ Final Checklist

Before calling it a day, double-check:

Task	Done
`npm run build` done for Vue	✅
Route fallback to `vue/index.html`	✅
Laravel files uploaded	✅
`public/` content placed in `public_html/`	✅
`.env` configured	✅
`storage/` permissions set	✅
`.htaccess` for clean URLs	✅

🎉 Conclusion

Deploying Laravel 12 with Vue 3 (Vite) on shared hosting is not as scary as it sounds.

With a clear structure and proper routing setup, you can enjoy the power of a full-stack SPA app — even on budget hosting.

Now go ahead and launch your Laravel + Vue rocket 🚀 into the internet sky.

How to Deploy Laravel 12 with Vue 3 (Vite) on Shared Hosting — Beginner’s Guide

🧰 Prerequisites

🎯 Step-by-Step Deployment

🛠️ 1. Build the Vue 3 App for Production

🪄 2. Setup Laravel to Serve Vue SPA Routes

📁 3. Upload Your Project to Shared Hosting

🧱 Directory Setup

✨ Smart Tip:

⚙️ 4. Environment and Storage Setup

🌐 5. Update `.htaccess` for Pretty URLs

🎨 Bonus: Vue Index.html Example for Refresh

🔍 Real-World Analogy

✅ Final Checklist

🎉 Conclusion

Laravel Mastery
Coaching Class Program

Daily Sessions

Real Projects

Best Practices

Career Support

Enrollment Closes In

Join the Program

Application Submitted!

What happens next?

Tags

Comments

Related Posts

How to Deploy Laravel 12 with Vue 3 (Vite) on Shared Hosting — Beginner’s Guide

🧰 Prerequisites

🎯 Step-by-Step Deployment

🛠️ 1. Build the Vue 3 App for Production

🪄 2. Setup Laravel to Serve Vue SPA Routes

📁 3. Upload Your Project to Shared Hosting

🧱 Directory Setup

✨ Smart Tip:

⚙️ 4. Environment and Storage Setup

🌐 5. Update .htaccess for Pretty URLs

🎨 Bonus: Vue Index.html Example for Refresh

🔍 Real-World Analogy

✅ Final Checklist

🎉 Conclusion

Laravel Mastery Coaching Class Program

Daily Sessions

Real Projects

Best Practices

Career Support

Enrollment Closes In

Join the Program

Application Submitted!

What happens next?

Tags

Comments

Related Posts

🌐 5. Update `.htaccess` for Pretty URLs

Laravel Mastery
Coaching Class Program