#1 Vue Blog with Laravel Rest API Project Tutorial For Beginners

In this tutorial, we will be creating a blog application using the Vue.js framework for the frontend and Laravel’s Rest API for the backend.

Project Setup

To get started, make sure you have Vue.js and Laravel installed on your machine. You can install Vue using npm:


npm install -g @vue/cli


For Laravel, you can use Composer to install it:


composer global require laravel/installer


Next, create a new Laravel project by running the following command:


laravel new vue-blog


Once your Laravel project is set up, navigate to the project directory and run the following command to create a new Vue.js project:


vue create frontend


This will create a new Vue project called “frontend” within your Laravel project directory.

Next, you’ll need to set up a Laravel Rest API to communicate with your Vue frontend. You can create a new controller to handle API requests by running the following command:


php artisan make:controller PostController


After creating the controller, define your API routes in the routes/api.php file:


Route::get('posts', 'PostController@index');
Route::post('posts', 'PostController@store');


You can now start building out your Vue frontend to consume the API endpoints created in Laravel. Remember to configure your Axios instance to make API requests from your Vue components.

That’s it! You now have a basic setup for a Vue blog application with a Laravel Rest API. Stay tuned for the next parts of this tutorial series where we will be adding more features to the application.