Configurar un proyecto en Laravel 9 o 10 con Vue 3 en Mix y Vite.js

Laravel es un framework para el desarrollo de aplicaciones web en PHP, que facilita la creación de aplicaciones robustas y escalables utilizando una sintaxis clara y expresiva. Es uno de los frameworks más populares y avanzados en el ecosistema de PHP y se utiliza ampliamente en el desarrollo de aplicaciones web y móviles. Laravel proporciona una amplia gama de herramientas y funcionalidades que permiten a los desarrolladores construir aplicaciones seguras y escalables de manera rápida y eficiente. Una de las grandes ventajas que tenemos al momento de desarrollar en Laravel es que podemos usar Node, por lo tanto, podemos usar Node con cualquier tecnología en el cliente y Laravel en el servidor; entre estos plugins famosos para Laravel se encuentra Laravel Mix y Vite como empaquetadores de la aplicacion, ya a partir de Laravel 9.x, Laravel usa Vite.js en su lugar por el simple hecho de ser mucho más rapido en realizar el empaquetado, por lo tanto, debes de usar la implementación que corresponda según la versión de Laravel que estes usando

Laravel Mix

Si estas usando Laravel Mix en tu proyecto en Laravel, estos son los pasos que tienes que realizar; vamos a configurar Vue 3 en un proyecto en Laravel 9, primero, vamos a instalar las dependencias:

Instalamos Vue y dependencias

npm install --save vue@next
npm install vue-loader

Vue next hace referencia a Vue 3.
Vue Loader es el que permite traducir los archivos Vue a JavaScript.

Crear la instancia de Vue 3

Lo siguiente que vamos a hacer es, crear un archivo con la instancia de Vue 3, con la cual, podremos crear componentes y demas:

resources/js/vue/main.js:

import { createApp } from "vue";
import App from "./App.vue"
const app = createApp(App)
app.mount("#app")
Creamos el componente principal, el llamado App.vue:
resources/js/vue/App.vue:
<template>
    <div>
        <h1>Principal</h1>
        <list/>
    </div>
</template>
<script>
import List from "./componets/List";
export default {
    components:{
        List
    }
}
</script>

Y un componente de ejemplo, el de listado:

resources/js/vue/components/List.vue:

<template>
  <div>
    <h1>Listado de Post</h1>
  </div>
</template>

Y lo registramos en el webpack.mix:

webpack.mix.js:

mix
.js('resources/js/app.js', 'public/js')
.js('resources/js/vue/main.js', 'public/js')
.vue()
.postCss('resources/css/app.css', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
]);

Y con esto, ya tenemos instalado y configurado Vue en un proyecto en Laravel; lo siguiente que vamos a hacer, es crear una página desde blade, para consumir la aplicación en Vue:

Tambien fijate, que usamos la función .vue que permite hacer el transpilado de los archivos .vue a un archivo js; ya con esto; lo siguiente que necesitamos es crear una página que podamos emplear para mostrar la aplicación en Vue:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue</title>
</head>
<body>    
    <div id="app"></div>
    <script src="{{ asset('js/main.js') }}"></script>
</body>
</html>
Y su ruta:
// web.php
Route::get('/vue', function () {
    return view('vue');
});

Agregar Vue 3 al proyecto en Laravel (con Laravel Vite)

Estos pasos los tienes que seguir si estás desarrollando un proyecto en Laravel que cuente con el archivo de vite.config.js.

Vamos a agregar las dependencias de Vue 3 en el proyecto en Laravel:

$ npm install --save vue@next
$ npm install vue-loader

El vue@next es el paquete actual para instalar vue 3, y el vue-loader no es más que el paquete que permite procesar los archivos .vue y generar un archivo de salida que pueda entender el navegador.

vue-loader es el loader para webpack que permite procesar los componentes de Vue.

Adicional a los paquetes anteriores, tenemos que instalar el plugin de Vue con Vite:

$ npm install @vitejs/plugin-vue

Y en el archivo de configuración de Vite, agregamos a Vue:

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [
        vue(),
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

Ahora, ya tenemos las dependencias listas, vamos a configurar el proyecto; para esto, vamos a crear los archivos necesarios, son básicamente los mismos que existen en un proyecto generado con la Vue Cli.

Crearemos unos archivos en la carpeta resources cuya estructura y funcionalidad señalamos a continuación.

Este primer archivo seria para construir la instancia principal de Vue; recuerda que es la que también usamos para configurar cualquier otro plugin.

resources/js/vue/main.js:

import { createApp } from "vue";

import App from "./App.vue"
const app = createApp(App)
app.mount("#app")

Ya con esto; al ingresar en la mencionada ruta tenemos:

Todo este contenido forma parte tanto de mi libro en Laravel como de mi curso completo.

05-04-2022 - Andrés Cruz

In english

Vue Laravel

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy