Tutorial for Building a Complete Vue JS CRUD Application with Laravel API from Scratch | Vue CRUD Operations | Vue 3

Vue JS CRUD – Complete Vue.CRUD using Laravel API from Scratch Tutorial | Vue CRUD Operation | Vue 3

Vue.js is a popular JavaScript framework that is widely used for building user interfaces. Its simplicity and flexibility make it a favored choice among developers. In this article, we will learn how to perform CRUD (Create, Read, Update, Delete) operations using Vue.js and Laravel API.

To start with, we need to have a basic understanding of Vue.js and Laravel. Vue.js is a progressive JavaScript framework that allows developers to build user interfaces. Laravel, on the other hand, is a PHP framework that provides a solid foundation for building web applications. Combining both Vue.js and Laravel, we can create a powerful and efficient web application.

First, let’s set up our Laravel API. Open your terminal and navigate to the desired directory where you want to create your project. Run the following command to create a new Laravel project:

“`
composer create-project –prefer-dist laravel/laravel laravel-vue-crud
“`

Once the installation is complete, navigate to the project directory using the `cd` command and run the following command to start the Laravel development server:

“`
php artisan serve
“`

Now, let’s create a database for our project. Open your `.env` file and update the following lines with your database credentials:

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

Now, let’s create a migration file for our database table. Run the following command in the terminal:

“`
php artisan make:migration create_items_table
“`

This will create a new migration file in the `database/migrations` directory. Open the file and update it with the following code:

“`php
id();
$table->string(‘name’);
$table->text(‘description’);
$table->timestamps();
});
}

/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists(‘items’);
}
}
“`

Now, let’s run the migration command to create the actual database table:

“`
php artisan migrate
“`

Now that we have our Laravel API set up, let’s move on to the Vue.js part of our project. In your project directory, run the following command to create a new Vue project:

“`
vue create vue-crud
“`

Choose the default preset and wait for the installation to finish. Once done, navigate to the project directory using the `cd` command and run the following command to start the development server:

“`
npm run serve
“`

Next, let’s install the `axios` library, which will be used to make API requests. Run the following command:

“`
npm install axios
“`

Once the installation is complete, open the `src/App.vue` file and update it with the following code:

“`vue

“`

In the `script` section, we import the `axios` library and define a `data` function that initializes an empty `items` array. We also have four methods: `getItems`, `createItem`, `updateItem`, and `deleteItem`. These methods use the `axios` library to make the respective API requests to the Laravel backend.

Now that we have completed the frontend part, let’s test our application. Make sure both the Laravel development server and Vue development server are running. Open your web browser and navigate to `http://localhost:8080`.

You should see a button labeled “Add Item” at the top of the page. Clicking this button will add a new item to the list. Each item has an input field for the name, a textarea for the description, and a “Delete Item” button. Updating the name or description and clicking outside the input field or textarea will trigger an API call to update the item. Clicking the “Delete Item” button will remove the item from the list.

Congratulations! You have successfully completed the Vue.js CRUD operation using a Laravel API from scratch. You can now further enhance the application by adding validation, pagination, or any other required features.

In conclusion, Vue.js and Laravel provide a powerful combination for building web applications with ease. By following this tutorial, you have learned how to perform CRUD operations using Vue.js and Laravel API. This knowledge will help you create efficient and dynamic web applications in the future.