DEV Community

Cover image for Laravel + Vue 3: The Perfect Stack for Modern Web Apps
J-Sandaruwan
J-Sandaruwan

Posted on

Laravel + Vue 3: The Perfect Stack for Modern Web Apps

#laravel #vue #backend #webdev

Developers today look for frameworks that combine stability, speed, and flexibility. That’s why Laravel and Vue 3 have become the dream duo, Laravel handling secure, structured APIs and Vue 3 offering a reactive, modern frontend. The best part? You can separate both projects for cleaner architecture, better scalability, and easier deployment.

Why Use Separate Projects?

Separating Laravel and Vue 3 projects creates a decoupled architecture:

  • Laravel focuses solely on API development and backend logic.
  • Vue handles user interaction and view rendering.
  • Teams can develop and deploy each independently without breaking others.
  • Better scalability for microservice or multi-frontend ecosystems.

This approach mirrors modern best practices in API-driven development creating isolated, versioned services that are reusable across multiple frontends.

Step-by-Step Integration Example

1. Set Up Laravel API

Create a new Laravel backend:

composer create-project laravel/laravel laravel-api
cd laravel-api
php artisan serve
Enter fullscreen mode Exit fullscreen mode

Now, define a simple route in
routes/api.php:

use Illuminate\Support\Facades\Route;

Route::get('/posts', function () {
    return response()->json([
        ['id' => 1, 'title' => 'Hello Vue!'],
        ['id' => 2, 'title' => 'Powered by Laravel API!'],
    ]);
});
Enter fullscreen mode Exit fullscreen mode

Run your backend at http://localhost:8000/api/posts.
Your Laravel app now acts as a pure API backend serving JSON responses.

2. Create a Vue 3 Project

In a separate directory:

npm init vue@latest vue-frontend
cd vue-frontend
npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

Then install Axios for API consumption:

npm install axios
Enter fullscreen mode Exit fullscreen mode

Create a component src/components/PostList.vue:

<template>
  <div>
    <h2>Latest Posts</h2>
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const posts = ref([])

onMounted(async () => {
  const res = await axios.get('http://localhost:8000/api/posts')
  posts.value = res.data
})
</script>
Enter fullscreen mode Exit fullscreen mode

Now mount this component in src/App.vue:

<template>
  <main>
    <PostList />
  </main>
</template>

<script setup>
import PostList from './components/PostList.vue'
</script>
Enter fullscreen mode Exit fullscreen mode

Your Vue frontend will run on http://localhost:5173 or similar.
Accessing it will fetch data dynamically from the Laravel API.

Best Practices for Laravel + Vue Integration

1. Use API-First Design

Design your Laravel routes solely for API consumption. Never mix Blade templates in this setup. Follow REST conventions (e.g., /api/posts, /api/users/{id}).

Then add in app/Http/Kernel.php and configure config/cors.php.

2. Use Axios or Fetch for Client API Calls

Keep all HTTP requests centralized in a services/ folder in your Vue project.
Example: services/api.js

import axios from 'axios'
export const api = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL || 'http://localhost:8000/api',
})
Enter fullscreen mode Exit fullscreen mode

3. Secure Routes with Sanctum or Passport

Use Laravel Sanctum for SPA token authentication lightweight, secure, and easy to integrate.

4. Modularize and Version APIs

For large projects, prefix routes with API versions:
/api/v1/posts, /api/v2/posts ensuring backward compatibility.

5. Use .env for URL Management

In Vue, store the API base URL in .env:

VITE_API_URL=http://localhost:8000/api
Enter fullscreen mode Exit fullscreen mode

Then reference it via:

import.meta.env.VITE_API_URL
Enter fullscreen mode Exit fullscreen mode

Pros of a Decoupled Setup

Aspect Benefit Example
Scalability Backend and frontend can scale independently Deploy Laravel API on AWS, Vue on Netlify
Team Workflow Separate backend/frontend teams Parallel development without merge conflicts
Performance Lighter payloads via JSON APIs Faster SPA loading with Vue 3
Maintainability Clear separation of logic Easier upgrades (Laravel v12 / Vue v3+)

Final Thoughts

Laravel and Vue 3 represent the perfect mix of elegance and power for modern applications. Running them as two separate projects helps maintain scalability and clarity while enabling rapid development.

If you’re starting a full-stack product today*use Laravel for APIs, Vue 3 for the interface*, and you’ll have a stack that’s clean, async-friendly, and future-ready.

Thank you,
Janith Sandaruwan.
linkedin

Top comments (0)