Step-by-Step Guide: Installing Laravel 10 with Inertia.js and Vue.js 3

In this tutorial we are going to learn on how to Installing Laravel 10 with Inertia.js and Vue.js 3 step by step.

Laravel is a popular PHP framework that simplifies the process of web application development by providing elegant syntax and built-in features.

Inertia.js is a cutting-edge library that allows developers to create single-page applications (SPAs) using classic server-driven web applications, while Vue.js is a widely-used JavaScript framework for building user interfaces.

Together, these technologies can help developers create powerful, modern web applications with ease.

In this comprehensive guide, we will walk you through the process of installing Laravel 10 with Inertia.js and Vue.js 3 to create a full-stack web application.

This tutorial is perfect for developers who are looking to combine the power of Laravel with the flexibility and performance of Vue.js and Inertia.js.

Table of Contents:

1. Prerequisites
2. Installing Laravel 10
3. Configuring Database
4. Setting Up Inertia.js and Vue.js 3
5. Running Laravel with Vite
6. Conclusion

Prerequisites

Before we get started, ensure you have the following tools installed on your system:

• PHP 8.1.0 Required – Laravel 10 now requires PHP 8.1.0 or greater.
• Composer (latest version)
• Node.js (version 12.x or higher)
• npm (version 6.x or higher)

Installing Laravel 10

First, open your terminal or command prompt and run the following command to install Laravel via Composer:

composer global require laravel/installer

This command installs the Laravel installer globally on your system, allowing you to create new Laravel projects easily.

Next, create a new Laravel project using the following command:

laravel new inertia-vue-app

Replace inertia-vue-app with the name you prefer for your project. This command creates a new Laravel 10 application in a directory with the specified name.

Configuring Database

In this section, we will walk you through the process of configuring the database for your Laravel 10, Inertia.js, and Vue.js 3 application.

Open the .env file in the root directory of your project and update the database-related variables with the correct information for your chosen database system:

For MySQL:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database_name
DB_USERNAME=your_username
DB_PASSWORD=your_password

Setting Up Inertia.js and Vue.js 3

Once Laravel is installed, navigate to the project’s root directory using the following command:

cd inertia-vue-app

Now, let’s install Inertia.js and Vue.js 3 by running the following commands:

composer require inertiajs/inertia-laravel
npm install @inertiajs/inertia @inertiajs/inertia-vue3 vue@next --save

These commands install the necessary packages for both Inertia.js and Vue.js 3.

Next, create a new app.js file in the resources/js directory and add the following code:

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';

createInertiaApp({
  resolve: (name) => require(`./Pages/${name}`),
  setup({ el, app, props, plugin }) {
    createApp({ render: () => h(app, props) })
      .use(plugin)
      .mount(el);
  },
});

This code initializes a new Vue.js application using Inertia.js.

Running Laravel with Vite

Vite development server, run the following command in your terminal:

npm run dev

This will start the Vite development server.

In a separate terminal, navigate to your project’s root directory and start the Laravel backend server:

php artisan serve

This will start the Laravel development server on port 8000 by default.

Conclusion

In this comprehensive guide, we walked you through the process of installing Laravel 10 and setting up Inertia.js and Vue.js 3 to create a full-stack web application. We also covered how to configure the database and run the Laravel application with Vite for an enhanced development experience.

By combining Laravel with Inertia.js, Vue.js 3, and Vite, you can build powerful, modern web applications that offer excellent performance and a seamless user experience. These technologies provide a perfect combination of server-side processing with the flexibility and speed of client-side rendering.

We hope this guide has been helpful in getting you started with Laravel 10, Inertia.js, Vue.js 3, and Vite. We encourage you to explore these tools further and leverage their full potential in your next web application project. Happy coding!