Setup Laravel with Vue #

In this section, I will guide you through setting up a Laravel project with Vue.js and Inertia.js, both manually and using the Laravel Breeze Starter Kit. I will also explain the differences and benefits of each approach.

Note: This is a quick reference for experienced developers, on how to set up Laravel with Vue.js and Inertia. If you are new to Inertia.js, I highly recommend watching the Laracasts series on Inertia.js.

1. How to install Laravel, Vue.js, and Inertia #

1.1 Install Laravel #

I recommend installing Laravel via the Laravel installer. Remember to always re-run the installer after a new Laravel release, otherwise the installer will be outdated.

Alternatively, you can also run the Laravel installer via Docker:

docker run --rm -it \
    -u $(id -u):$(id -g) \
    -v "$(pwd)":/app \
    -w /app \
    composer sh -c "composer global require laravel/installer \
        && /tmp/vendor/bin/laravel new example-app"

This way, you don't have to install PHP and Composer on your machine.

The cleanest way to install Laravel is by setting it up with Docker. This avoids any PHP or Composer conflicts on your local machine.

1.2. Setup Sail #

After the installation, cd into the laravel directory and make sure to call php artisan sail:install. As you may not have PHP on your machine, you can do so with Docker like this:

docker run --rm -it -u $(id -u):$(id -g) -v "$(pwd)":/app -w /app \
    -e "DB_CONNECTION=sqlite" \
    php:8.3-cli php artisan sail:install

This will start an installation wizard for sail where you can pick your configuration.

Navigate into your project and start Sail:

cd example-app
./vendor/bin/sail up -d
./vendor/bin/sail npm install
./vendor/bin/sail npm run dev

The application is now available at localhost.

Running Multiple Laravel Projects #

If you want to run multiple Sail projects at the same time, you can set the APP_PORT environment variable in your .env file for each application. For example:

APP_PORT=8081
VITE_PORT=5178
FORWARD_DB_PORT=3307

And then start Sail:

./vendor/bin/sail up -d

Your application will now be available at localhost:8081. This way, you can run multiple applications simultaneously.

To keep your container running after a restart, add the flag in docker-compose.yml:

services:
  laravel.test:
    restart: unless-stopped

This will ensure the container automatically restarts after a reboot or Docker restart.

2. Running an Existing Sail Laravel Application Locally #

If you already have an existing Laravel application that was set up with Sail, you may notice that the vendor/bin/sail file is missing. This is because the vendor folder is usually not versioned in Git. To get Sail up and running, you need to install the dependencies manually:

# Enter your project directory
cd your-project

# Install Composer dependencies inside Docker
docker run --rm \
    -v "$(pwd)":/opt \
    -w /opt \
    --user "$(id -u):$(id -g)" \
    laravelsail/php84-composer:latest \
    composer install --ignore-platform-reqs

This will install all the dependencies inside Docker, avoiding local PHP version issues. Make sure to adjust the php version to your requirements like 85 etc.

After that, you can run:

./vendor/bin/sail up -d
./vendor/bin/sail npm install
./vendor/bin/sail npm run dev

The application should be available at localhost.

📝 Using Legacy Laravel Versions #

If you are working with an older Laravel application that doesn't use Sail, you can still use Docker. I have a minimal Docker setup available that is a very minimalistic version of Sail but is designed for legacy versions:

GitHub Repository - Laravel Docker Setup

This setup provides:

• PHP-FPM
• MySQL
• Nginx

To use it, simply clone the repository and follow the instructions in the README.