Create a project in Laravel 9 with Vue.

It’s possible that you may see some previous posts on this website that use Laravel UI for installing Vue or React. However, starting from Laravel 9, we won’t be doing that anymore, and that’s why this section is about creating a project in Laravel 9 with Vue.

Let’s start by creating our Laravel project by running laravel new in the console.

laravel new VUELaravel

Wait for it to finish all the steps it needs to perform and we’re done, we have a Laravel 9 project started called (VUELaravel).

Now I will install Breeze

composer require laravel/breeze --dev

php artisan breeze:install vue

Before continuing, we must create our database according to how it is specified in the .env file. You can do this with phpMyAdmin if you have it installed, or directly through a command depending on the DBMS you use, usually MySQL.

Then, we can perform our migration

php artisan migrate

We perform the npm installation and then run it

npm install
npm run dev

And just like that, our project with Vue would be ready without any issues. Now, our last step would be to configure Vite for Vue

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
 
export default defineConfig({
    plugins: [
        laravel(['resources/js/app.js']),
        vue({
            template: {
                transformAssetUrls: {
                    // The Vue plugin will re-write asset URLs, when referenced
                    // in Single File Components, to point to the Laravel web
                    // server. Setting this to `null` allows the Laravel plugin
                    // to instead re-write asset URLs to point to the Vite
                    // server instead.
                    base: null,
 
                    // The Vue plugin will parse absolute URLs and treat them
                    // as absolute paths to files on disk. Setting this to
                    // `false` will leave absolute URLs un-touched so they can
                    // reference assets in the public directory as expected.
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

It’s time to take a look at what was generated from all these commands

Inertia

The first thing we’ll notice changed is our routes, as we’ll see that they use Inertia instead of the classic way. Why? Because Inertia is what will allow us to communicate our routes with the Vue or React add-ons (in case of using React).

<?php

use Illuminate\Foundation\Application;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,
    ]);
});

Route::get('/dashboard', function () {
    return Inertia::render('Dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');

require __DIR__.'/auth.php';

As you can see in the code, I’m getting the Welcome and Dashboard components. These two are the components that are in the resource/js/components/Pages directory. Therefore, the components you want to render should be created in that folder

Extra

Please note that to run our program, we must run php artisan serve and npm run dev when we are in the development phase.

Firstly, to run our Laravel server and npm run dev to run the Vite server that will process our Vue files. If you don’t want to run npm run dev, you can run npm run build to create the different JS files from the .vue files, and you can run php artisan serve without worrying about the .vue files.