Laravel Vue

Ultimate Guide To Laravel 5.8 CRUD With Vue.js For Beginners

Laravel 5.8 CRUD With Vue: Do you want to learn Laravel for developing a robust, scalable, and flexible web application? If yes, but you are not sure where and how to start, then this place is right for you where you will learn basic Laravel CRUD operations in straightforward steps.

Laravel is the fastest growing framework of PHP Language, which is used as a back-end, and Vue.js is used as a front-end. But, using togetherness makes an application more scalable and flexible because of Vue.js give more capability to act faster without refreshing page.

Here, you can see a live demo on Laravel 5.8 CRUD With Vue.js

We will show Laravel CRUD with vue in step by step for beginners.

Laravel fulfills the best supports for Vue. So, you do not need to make a separate application for vue.js.

You will learn basic steps to create, read, edit, and delete operation with Vue.js and Laravel 5.8 API after completion of this tutorial.

Ultimate Guide to Laravel 5.8 CRUD with Example

First, Install the composer because it is used for managing Laravel dependencies and creating a new

Laravel Project.

Let us install the composer using the command.

#1: Install Composer

To install the composer, open your terminal and run the below commands in your terminal.

If you have already installed the composer then skip this step.

#2: Install Laravel 5.8

Create a fresh Laravel 5.8 Project. First, install Laravel Installer by typing the following command in your terminal.

After Laravel Installer, You can create a new fresh Laravel 5.8 Project by executing one of the following commands in your root directory.

OR Using Composer

laravel vue crud

Now, After installing Laravel 5.8, go to your project directory and run the below command to install npm packages for Vue.js.

Make sure you have already installed node.js, in your machine. If you don’t have node.js then click here to install node.js.

installing npm

#3: Change Database Configuration

Now, Next step is to configure a database, which is an essential step to store user’s data. So, you have to create a database first using PHP MyAdmin or Sequel Pro or any database tool.

After creating the database, You need to change some configuration in your .env file to use the database. You can find the .env file located in your project root folder.

Here, you need to change the database name which you have given during database creation and also change username and password according to your MySql configuration.

After successful configuration, you will be able to connect with your database.

Once the configuration is done, you need to run following command to view Laravel default and your manually created tables in the database.

laravel vue crud database

#4: Create table and related model and controller

Here, We are creating a Laravel 5.8 CRUD application for an article. So, We are going to create the model with the schema for articles table through PHP artisan command.

Now, using the above command new migration for the article model will be generated under the database folder of your project. You can add fields according to your requirement in the migration like this.

Then, run following command again

After migration adds below code to Article.php model to prevent some mass assignment exception during creating a record.

Now, Create a controller through below command.

#5: Install Some Vue.js dependencies

First of all, you will need to install some Vue dependencies such as axios, vue-router, v-toaster, vue-axios, vue-sweetalert2 through NPM which you installed previously in step-2.

To install vue-axios and axios dependencies. Run the below command.

After installing Vue dependencies you need to import and use the packages inside the app.js file which is located in resources >> js folder.

If you want to add additional CSS and Scripting files then you can add it in welcome.blade file located inside resources folder.

After changing the app.js file. Run the following command to recompile assets with a new code.

Define Vue Routers and navigation bar

Write below code into your app.js file.

In the above code, We have imported four components and related routes for navigating from one to another component.

Now, add one more App.vue file under resources >> js folder which will render the component according to router URL then Add the following code in your App.vue file.

#6: Create CRUD Operation with Laravel 5.8 and Vue.js

Make a component folder if not exists under resources >> js folder. Then make Vue component files you want inside the component folder.

#7: Create Components

Here, We are going to make CreateComponent.vue file. We have used Materialize CSS form to create article template.

We have defined two fields Article Title and Article Description and also defined one method called submit() which is executed after a user submits the form.

For valid input, we have also added some serverside validation for each field. So, you will get a valid and proper data from users.

After you can see the form like this:

laravel vue crud homepage

Now, We need to build Laravel API for Vue-axios request to process on user’s data. To, make Laravel API add the following code to api.php file inside routes folder.

In Above code, We defined a route which goes to saveArticle() method of ArticleController which created before. Write the following Laravel 5.8 code to store user’s data into the database.

Now, add other API routes under same api.php file.

Now, Create functions for view the article, edit the article and delete the article inside same Article Controller.

#8: View Component

Create a ViewComponent.vue file inside the same folder components to fetch and view user’s stored from the database. Write below code in ViewComponents file.

#9: Edit Component

We have seen how to store and fetch user’s data using Vue-axios and Laravel API. Now, We are going to create an edit component.

We need to fetch user’s existing data to display in the edit component article title and description field when Edit component is loaded. So, in the above code, We have implemented a method under created() of Vue.js method.

Here, We have put one more method update() which is executed after editing the data and the user hits the update button. It will call the related Laravel API route and its relevance method to impact the database with new data.

#10: Delete Component

We have created a method called deletePost() which will take id of the current article and pass to the relevant controller’s method to delete the article from the database.

Finally, We have completed our

Ultimate Laravel 5.8 crud with Vue.js

in pretty and straightforward steps. I hope you learned from this article. You can download the source code or clone into your local machine and see the output. Thanks for reading.


About the author

Parth Vakil

Full Stack Developer at Artixun Softwares. My specialty is web development with Laravel/Node development, using JS libraries such as JQuery, Angular, Vue, React and Ionic

Leave a Comment