Crear un proyecto en Laravel 9 con VUE

Es probable que vea algunos post anteriores en esta web que, utilizan laravel ui para la instalación de vue o react. Eso a partir de Laravel 9 no lo haremos más y por eso esta sección de Crear un proyecto en Laravel 9 y VUE.

Comencemos por crear nuestro proyecto de Laravel, haciendo un laravel new en consola.

laravel new VUELaravel

Espera a que termine todos los pasos que deba realizar y listo tenemos un proyecto en laravel 9 empezado llamado (VUELaravel).

Ahora instalare breeze

composer require laravel/breeze --dev

php artisan breeze:install vue

Antes de seguir deberemos crear nuestra base de datos según como esté especificada en el archivo .env. Puede hacer esto con phpmyadmin si es que lo tienes instalado o directamente vía comando según el DBMS que uses, usualmente este es MySQL.

Luego podemos hacer nuestra migración

php artisan migrate

Realizamos la instalacion de npm y luego la corremos

npm install
npm run dev

Y así de manera fácil nos quedaría nuestro proyecto con Vue sin problemas. Ahora nuestro ultimo paso seria configurar vite para 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,
                },
            },
        }),
    ],
});

Es hora de echar un vistazo a lo generado a partir de tanto comando.

Inertia

Lo primero que veremos cambiado es nuestras rutas, ya que veremos que estas usan inertia en vez de lo clásico ¿Porque? Es que si, inertia es quien nos permitirá comunicar nuestras rutas con los complementos de vue o react(caso de usar 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';

Como puede ver en el código estoy obteniendo los componentes Welcome y Dashbord estos 2 son loas componentes que están en resource/js/components/Pages. Y, por tanto, los componentes que quieras renderizar deberías de crearlos en dicha carpeta.

Extra

Tenga en cuenta que para correr nuestro programa deberemos correr php artisan serve y npm run dev cuando estemos en fase de desarrollo.

Primero para correr nuestro server laravel y npm run dev para correr el server vite que procesara nuestros archivos vue, en caso de no querer correr npm run dev puede correr npm run build para crerar los diferentes archivos js a partir de los archivos .vue y podra correr php artisan serve sin preocuparnos de los archivos .vue