Laravel 10 Vue js 3 with Vite Full Stack

Introduction

This tutorial will guide you through building a simple student management system using Laravel 10 as the backend and Vue.js 3 with Vite as the frontend. By following these steps, you'll learn how to set up a full-stack application that allows you to create, read, update, and delete student records.

Step 1: Set Up Laravel Project

1. Create a New Laravel Project

   • Open your terminal and run the following command:

     composer create-project laravel/laravel lbs
     

   • This command creates a new Laravel project named "lbs".

2. Configure Database Connection

   • Open the project in your preferred code editor (e.g., VS Code).
   • Navigate to the .env file and update the database settings:

     DB_DATABASE=lbs
     DB_USERNAME=root
     DB_PASSWORD=
     

3. Create and Migrate Database

   • Create the database in your MySQL server.
   • Run the migration command to create the necessary tables:

     php artisan migrate
     

Step 2: Create Student Model and Controller

1. Generate Student Model

   • Run the following command to create the model:

     php artisan make:model Student -m
     

   • This command creates a Student model and a migration file.

2. Define Migration Structure

   • Open the migration file located in database/migrations/ and define the columns:

     public function up()
     {
         Schema::create('students', function (Blueprint $table) {
             $table->id();
             $table->string('name');
             $table->string('address');
             $table->string('phone');
             $table->timestamps();
         });
     }
     

   • Run the migration again:

     php artisan migrate
     

3. Create API Controller

   • Generate a new API controller:

     php artisan make:controller Api/StudentController --resource
     

   • This command creates a resource controller for handling API requests.

Step 3: Add Routes

1. Define API Routes
   • Open routes/api.php and add the following code to register the routes:

     Route::apiResource('students', App\Http\Controllers\Api\StudentController::class);
     

Step 4: Implement Controller Methods

1. Add CRUD Functionality in StudentController
   • Open the StudentController.php and implement the following methods:

     use App\Models\Student;
     
     public function index()
     {
         return Student::all();
     }
     
     public function store(Request $request)
     {
         return Student::create($request->all());
     }
     
     public function show($id)
     {
         return Student::find($id);
     }
     
     public function update(Request $request, $id)
     {
         $student = Student::find($id);
         $student->update($request->all());
         return $student;
     }
     
     public function destroy($id)
     {
         return Student::destroy($id);
     }
     

Step 5: Set Up Vue.js with Vite

1. Create Vue.js Project

   • Install Vue.js using Vite:

     npm create vite@latest my-vue-app -- --template vue
     cd my-vue-app
     npm install
     

2. Run the Development Server

   • Start the Vite server:

     npm run dev
     

3. Create Student Component

   • In the src/components folder, create a new file named Student.vue and define the template with input fields for name, address, and phone.

4. Implement API Calls in the Component

   • Use Axios to handle API requests. Install Axios:

     npm install axios
     

   • In Student.vue, implement methods to handle create, read, update, and delete actions.

Conclusion

You've successfully built a full-stack student management system using Laravel and Vue.js. You can add, edit, view, and delete student records through a user-friendly interface. Next steps could involve deploying the application or enhancing its features, such as adding authentication or styling the frontend. Happy coding!