Laravel 12 + Vue.js 3 (2026): Connect Them and Build a Simple CRUD App (Beginner-Friendly Full Tutorial)

Author

Kritim Yantra

Jan 08, 2026

Laravel 12 + Vue.js 3 (2026): Connect Them and Build a Simple CRUD App (Beginner-Friendly Full Tutorial)

If you’re learning Laravel in 2026, there’s a very high chance this thought crossed your mind:

“Laravel works… Vue works… but how do I connect them properly without breaking everything?”

Most beginners try mixing Blade, Vue, random scripts, and outdated tutorials. The result?
White screens, console errors, and a lot of frustration.

I’ve been there. So in this guide, we’ll do this the clean, modern Laravel 12 way, step by step, and build a working CRUD app you can actually understand.

No magic. No skipped steps.

What We’re Building (Clear Goal)

We’ll create a simple Posts CRUD:

  • Create a post
  • Read (list) posts
  • Update a post
  • Delete a post

Tech stack

  • Laravel 12 (backend + API)
  • Vue.js 3 (frontend)
  • Vite (build tool)
  • Axios (API requests)

Real-world analogy

Laravel = the kitchen
Vue = the waiter
API = the order slip between them

Step 1: Install a Fresh Laravel 12 Project

Make sure you have:

  • PHP 8.3+
  • Composer
  • Node.js (18+ recommended)

Run:

composer create-project laravel/laravel laravel-vue-crud
cd laravel-vue-crud

Start the server:

php artisan serve

Step 2: Install Vue 3 (Laravel 12 Way)

Laravel 12 uses Vite by default, which makes Vue setup much easier.

Install Vue 3 and related packages:

npm install vue@3 axios

Install Vue plugin for Vite:

npm install -D @vitejs/plugin-vue

Update vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue(),
    ],
});

Step 3: Setup Vue Entry File

resources/js/app.js

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

Create Root Vue Component

resources/js/App.vue

<template>
  <div>
    <h1>Laravel 12 + Vue 3 CRUD</h1>
    <PostComponent />
  </div>
</template>

<script setup>
import PostComponent from './components/PostComponent.vue'
</script>

Add Blade File to Mount Vue

resources/views/app.blade.php

<!DOCTYPE html>
<html>
<head>
    @vite('resources/js/app.js')
</head>
<body>
    <div id="app"></div>
</body>
</html>

Route to Load Vue App

routes/web.php

Route::get('/', function () {
    return view('app');
});

Step 4: Create Database and Model

Create Post model + migration

php artisan make:model Post -m

Migration:

Schema::create('posts', function (Blueprint $table) {
    $table->id();
    $table->string('title');
    $table->text('body');
    $table->timestamps();
});

Run migration:

php artisan migrate

Step 5: Create API Controller

php artisan make:controller Api/PostController

app/Http/Controllers/Api/PostController.php

class PostController extends Controller
{
    public function index()
    {
        return Post::latest()->get();
    }

    public function store(Request $request)
    {
        return Post::create($request->validate([
            'title' => 'required',
            'body' => 'required',
        ]));
    }

    public function update(Request $request, Post $post)
    {
        $post->update($request->validate([
            'title' => 'required',
            'body' => 'required',
        ]));

        return $post;
    }

    public function destroy(Post $post)
    {
        $post->delete();
        return response()->noContent();
    }
}

Step 6: API Routes

routes/api.php

use App\Http\Controllers\Api\PostController;

Route::apiResource('posts', PostController::class);

Now Laravel is officially your API backend.

Step 7: Vue CRUD Component

resources/js/components/PostComponent.vue

<template>
  <div>
    <input v-model="form.title" placeholder="Title" />
    <textarea v-model="form.body" placeholder="Body"></textarea>
    <button @click="savePost">
      {{ editing ? 'Update' : 'Create' }}
    </button>

    <hr>

    <ul>
      <li v-for="post in posts" :key="post.id">
        <strong>{{ post.title }}</strong>
        <button @click="editPost(post)">Edit</button>
        <button @click="deletePost(post.id)">Delete</button>
      </li>
    </ul>
  </div>
</template>

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

const posts = ref([])
const editing = ref(false)
const currentId = ref(null)

const form = ref({
  title: '',
  body: '',
})

const loadPosts = async () => {
  posts.value = (await axios.get('/api/posts')).data
}

const savePost = async () => {
  if (editing.value) {
    await axios.put(`/api/posts/${currentId.value}`, form.value)
  } else {
    await axios.post('/api/posts', form.value)
  }

  form.value = { title: '', body: '' }
  editing.value = false
  loadPosts()
}

const editPost = (post) => {
  form.value = { title: post.title, body: post.body }
  editing.value = true
  currentId.value = post.id
}

const deletePost = async (id) => {
  await axios.delete(`/api/posts/${id}`)
  loadPosts()
}

onMounted(loadPosts)
</script>

Step 8: Run Everything

npm install
npm run dev
php artisan serve

Open:

http://localhost:8000

You now have a full Laravel 12 + Vue 3 CRUD app 🎉

Common Beginner Mistakes (Learned the Hard Way)

  • Forgetting to run npm run dev
  • Using Blade + Vue together randomly
  • Not separating API routes (api.php)
  • Trying to use old Vue 2 syntax

Pro Tip

If your Vue UI breaks:

  • Check browser console
  • Check Vite terminal
  • Restart npm run dev

Most issues come from Vite not running.

Quick Summary

  • Laravel 12 + Vue 3 works perfectly via Vite
  • Laravel handles data, Vue handles UI
  • Use API routes for clean separation
  • CRUD logic stays simple and readable

Once you understand this flow, you can build dashboards, admin panels, and SPAs confidently.

FAQ (Beginner Friendly)

1) Should I use Inertia instead?

If you want Vue without APIs, yes.
If you want clear frontend/backend separation, APIs are better.

2) Can I deploy this easily?

Yes. Just run npm run build on the server and deploy Laravel normally.

3) Can I add authentication later?

Absolutely. Laravel Sanctum works great with Vue APIs.

Tags

Laravel Vue
Sign in with Google 0 Likes

Comments

No comments yet. Be the first to comment!

Please log in to post a comment:

Sign in with Google

Related Posts

This One Laravel Mistake Is Costing Developers Jobs

Web Development

This One Laravel Mistake Is Costing Developers Jobs

#Laravel
Kritim Yantra

Kritim Yantra

Dec 30, 2025
Read

Laravel Middleware in Laravel 12 (2026): Explained Simply, the New Way (With Real-World Examples)

Web Development

Laravel Middleware in Laravel 12 (2026): Explained Simply, the New Way (With Real-World Examples)

#Laravel
Kritim Yantra

Kritim Yantra

Jan 08, 2026
Read

Laravel 12 (2026) + ReactJS Integration: The Ultimate Beginner-Friendly Guide

Web Development

Laravel 12 (2026) + ReactJS Integration: The Ultimate Beginner-Friendly Guide

#Laravel #React
Kritim Yantra

Kritim Yantra

Jan 08, 2026
Read