CRUD Operations Using Laravel 12 and Vue.js 3 –

Introduction

Building a modern web application requires a dynamic and interactive frontend along with a robust backend. Laravel 12, with its powerful backend features, and Vue.js 3, a reactive frontend framework, make a perfect combination for seamless CRUD (Create, Read, Update, Delete) operations.

If you’re new to Laravel or Vue.js, don’t worry. This guide (CRUD Operations in Laravel 12 and Vue.js 3) will walk you through step-by-step, making it super easy to build a CRUD system.

Let’s get started.

Setting Up Laravel 12

Before diving into Vue.js, let’s set up our Laravel backend.

1. Install Laravel 12

First, make sure you have Composer installed. Run the following command to install Laravel 12:

composer create-project --prefer-dist laravel/laravel laravel-vue-crud

Move into your Laravel project directory:

cd laravel-vue-crud

Now, start the Laravel server:

php artisan serve

Your Laravel project is now set up.

2. Configure the Database

Open your .env file and update the database credentials:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_vue_crud
DB_USERNAME=root
DB_PASSWORD=

Run database migrations:

php artisan migrate

3. Create the Model, Migration, and Controller

Run the following command to generate a model, migration, and controller for the Post entity:

php artisan make:model Post -mcr

Now, update the migration file (database/migrations/xxxx_xx_xx_xxxxxx_create_posts_table.php) with the following schema:

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

Run the migration:

php artisan migrate

4. Define Routes in API.php

Open routes/api.php and add the following routes:

use App\Http\Controllers\PostController;

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

5. Implement CRUD in the Controller

Modify the PostController.php (app/Http/Controllers/PostController.php) as follows:

namespace App\Http\Controllers;

use App\Models\Post;
use Illuminate\Http\Request;

class PostController extends Controller
{
    public function index()
    {
        return Post::all();
    }

    public function store(Request $request)
    {
        $request->validate([
            'title' => 'required',
            'content' => 'required',
        ]);

        return Post::create($request->all());
    }

    public function show(Post $post)
    {
        return $post;
    }

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

        $post->update($request->all());
        return $post;
    }

    public function destroy(Post $post)
    {
        $post->delete();
        return response()->json(['message' => 'Post deleted successfully']);
    }
}

Setting Up Vue.js 3

Now that our Laravel backend is ready, let’s integrate Vue.js for the frontend.

1. Install Vue.js and Dependencies

Inside your Laravel project, run the following command to install Vue.js 3 and other dependencies:

npm install vue@next vue-router@4 axios

2. Set Up Vue Components

Inside the resources/js directory, create a new folder named components.

Now, create a new component called PostComponent.vue inside it:

<template>
  <div>
    <h2>Posts</h2>
    <input v-model="newPost.title" placeholder="Title" />
    <textarea v-model="newPost.content" placeholder="Content"></textarea>
    <button @click="createPost">Add Post</button>

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

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

export default {
  setup() {
    const posts = ref([]);
    const newPost = ref({ title: '', content: '' });

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

    const createPost = async () => {
      await axios.post('/api/posts', newPost.value);
      newPost.value = { title: '', content: '' };
      fetchPosts();
    };

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

    onMounted(fetchPosts);

    return { posts, newPost, createPost, deletePost };
  },
};
</script>

3. Register the Component in App.vue

Open resources/js/App.vue and replace the content with:

<template>
  <div>
    <PostComponent />
  </div>
</template>

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

export default {
  components: {
    PostComponent
  }
};
</script>

4. Compile Assets and Start the App

Run the following commands:

npm run dev

Now, open http://127.0.0.1:8000 and test the CRUD functionality.

Congratulations! You’ve successfully built a CRUD application using Laravel 12 and Vue.js 3. This setup provides a solid foundation for building dynamic, scalable applications with modern technology.

If you’re looking for expert web development solutions, CodeHunger can help you build high-performance applications tailored to your needs.