Starting a Laravel & Vue.js project using Inertia.js

Starting a Laravel & Vue.js project using Inertia.js

Starting a Laravel project can seem daunting, especially if you're new to the framework. However, with the introduction of Laravel Breeze, a simple scaffolding tool, it's now easier than ever to get started. In this article, we'll be walking through the process of setting up a Laravel project from scratch that uses Laravel Breeze to install Vue.js and Inertia.js.

Install Laravel

The first step in creating a Laravel project is to install Laravel itself. To do this, you'll need to have Composer installed on your machine. If you don't have Composer installed, you can download it from the official website.

Once you have Composer installed, you can use the following command to install Laravel globally:

composer global require laravel/installer

Create a Laravel Project

With Laravel installed, you can now create a new Laravel project by running the following command in your terminal:

laravel new my-project

Or

composer creat-project laravel/laravel my-project

Replace "my-project" with the name you want to give your project. This command will create a new Laravel project in a directory with the same name as the project.

Generate Scaffolding

Now that you have Laravel Breeze installed, you can generate the scaffolding for your project. To do this, run the following command:

php artisan breeze:install vue

This command will create a series of files and directories in your project, including controllers, views, and routes. It will also install the required JavaScript dependencies, including Vue.js and Inertia.js.

Configure Inertia.js

By default, Laravel Breeze sets up Inertia.js to work with your Laravel project, but you may need to make some additional configuration changes.

To configure Inertia.js, open the resources/js/app.js file in your project. This file contains the main JavaScript for your project, including the configuration for Inertia.js.

Start the Development Server

Now that you have your project set up, you can start the development server and see your project in action. To do this, run the following command in your project's root directory:

npm run dev

And

php artisan serve

This command will start a development server at http://localhost:8000. Open your web browser and navigate to this URL to see your project in action.

In conclusion, starting a Laravel project doesn't have to be intimidating, especially with the help of Laravel Breeze. As a simple scaffolding tool, it makes it easier for developers to get started with a new project. With these tools in place, you're now equipped with everything you need to begin building your next project.