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

Video thumbnail
▶

Índice de contenido

Laravel y Vue.js son una de las combinaciones más poderosas en el desarrollo web moderno. Laravel, como framework backend en PHP, ofrece robustez y estructura; mientras que Vue, desde el frontend, aporta dinamismo y una arquitectura reactiva que mejora la experiencia del usuario. Integrar ambos no solo es posible, sino también sencillo si entiendes cómo conectan sus capas.

Justamente el esquema que vimos antes de Manejar Preferencias de Usuario desde un campo JSON es ideal para cuando usamos Vue, al usar internamente JavaScript, el JSON es el mejor aliado.

En este artículo te mostraré cómo integrar Vue 3 en Laravel usando Vite (el estándar actual) y también Laravel Mix, para quienes trabajen con versiones anteriores. Además, compartiré cómo modularicé mis componentes en un proyecto real para mantenerlos reutilizables y escalables.

¿Por qué usar Vue con Laravel?

Vue.js y Laravel se complementan de forma natural. Laravel usa Node.js para la compilación de assets, lo que permite incorporar frameworks modernos del lado del cliente sin complicaciones. Vue se integra perfectamente gracias a su sencillez y a herramientas como Laravel Vite Plugin o Laravel Mix.

En mi caso, esta integración me permitió construir aplicaciones más interactivas sin abandonar el ecosistema PHP. Por ejemplo, logré reutilizar el mismo componente Vue en varias secciones de mi aplicación (cursos, libros y packs) sin duplicar código.

Requisitos previos e instalación

Antes de comenzar, asegúrate de contar con:

  • Laravel 9.x o superior
  • Node.js y npm instalados.
  • Un entorno de desarrollo con PHP 8+.

Laravel Mix o Vite

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.

A partir de Laravel 9.x, el framework usa Vite por defecto, pero si trabajas con versiones anteriores, Laravel Mix sigue siendo válido.

Vue 3 se instala con vue@next, y vue-loader es el encargado de traducir los componentes .vue a JavaScript nativo.

Configuración del archivo webpack.mix.js (mix)

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'),
]);

Estructura base del proyecto y punto de montaje

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

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 usa la directiva @vite en Blade:

@vite('resources/js/vue/main.js')
<div id="app"></div>

Y un componente de ejemplo, el de listado:

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

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

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 fíjate, 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:

App en vue
App en vue

 

Modularizar componentes y buenas prácticas

Video thumbnail
▶

Aquí viene la parte que marca la diferencia. Integrar Vue es fácil; hacerlo escalable y reutilizable es lo que distingue a un proyecto profesional.

Uso de props y rutas dinámicas

En mi experiencia, modularizar los componentes mediante props y rutas configurables es clave. Así pude usar un mismo componente de pago para distintos recursos (cursos, libros o packs) simplemente cambiando los parámetros de entrada.
Por ejemplo:

<PaymentPlugin 
 :slug="slug" 
 :price="price" 
 :redirect="redirectRoute" 
/>

Relaciones polimórficas y componentes reutilizables

Del lado del backend, aproveché las relaciones polimórficas de Laravel para gestionar modelos distintos con la misma estructura de pagos. Esto me permitió mantener la lógica de negocio común sin duplicar código.

En la base de datos, el mismo modelo Payment puede pertenecer a un curso, un libro o un pack gracias a las relaciones morphTo de Laravel. De esta forma, Vue solo necesita saber qué tipo de recurso maneja, y el backend se encarga del resto.

Ejemplo real: componente de pago adaptable

Este enfoque me permitió construir un plugin de pago reutilizable que:

  • Valida si el usuario está autenticado.
  • Aplica cupones dinámicos.
  • Gestiona pagos con PayPal (y próximamente Stripe).
  • Ofrece funciones adicionales como “regalar curso” o “ver gratis”.
  • Cada comportamiento se activa o desactiva según las props recibidas, sin tocar el código base del componente.

Mostrar componentes Vue desde Blade

Laravel y Vue conviven perfectamente. Basta con crear una vista Blade que actúe como punto de entrada:

// routes/web.php
Route::get('/vue', function () {
 return view('vue');
});

Y dentro de resources/views/vue.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue App</title>
</head>
<body>
 <div id="app"></div>
 @vite('resources/js/vue/main.js')
</body>
</html>

Errores comunes al integrar Vue y cómo resolverlos

  • ❌ El componente no se monta: revisa que el id del div coincida con el de app.mount("#app").
  • ⚙️ Problemas con dependencias: asegúrate de usar vue@next para Vue 3.
  • ⚡ Hot reload no funciona: verifica que refresh: true esté activo en vite.config.js.
  • Confusión entre Mix y Vite: usa Vite para Laravel 9+ y Mix solo si mantienes proyectos anteriores.

Lo Mejor de Laravel - Su integración Nativa con Node

Lo Mejor de Laravel - Su integración Nativa con Node
Video thumbnail
▶

Una de las características que más me gusta de Laravel es que por defecto viene integrado con Node.js. Esto significa que, en un solo proyecto, podemos tener:

  • Un excelente framework del lado del servidor (Laravel).
  • Node.js, que usualmente se emplea del lado del cliente (frontend).

Esto es especialmente útil en proyectos con Laravel + Inertia, donde podemos ver varios archivos clave:

  • package.json: archivos de Node.js que se generan al crear cualquier proyecto con Node.
  • composer.json: archivos de PHP manejados por Laravel, que controlan las dependencias del backend.

Si lo comparamos con otros frameworks web, como Django, Flask, FastAPI o CodeIgniter, todos son excelentes, pero no ofrecen esta integración nativa con Node.js.

Node y Laravel: la mejor combinación

Supongamos que quieres crear un proyecto completo con backend y frontend:

  • En frameworks como Django o Flask, necesitarías crear dos proyectos independientes:
    • El backend para la parte administrativa.
    • Un proyecto frontend en Vue, React o similar, que consuma la API del backend.

Esto implica mantener dos proyectos separados y comunicarlos mediante REST APIs o tecnologías similares.

Con Laravel + Node.js, puedes evitar esto, ya que ambos conviven en un solo proyecto, facilitando el desarrollo y la integración.

CDN: opción para pruebas

También existe la opción de usar la CDN de Vue o React, pero perderías muchas ventajas del ecosistema de Node, como:

  • Gestión de dependencias con NPM o Yarn.
  • Compilación y optimización de assets.
  • Uso de herramientas modernas de desarrollo frontend.

Por lo tanto, la CDN suele usarse solo para pruebas rápidas, no en proyectos serios.

Inertia.js: integración perfecta

Laravel ofrece integraciones como Inertia.js, que funciona como un envoltorio para usar Vue o React directamente desde Laravel. Esto permite:

  • Fusionar backend y frontend en un solo proyecto.
  • Evitar la necesidad de crear dos proyectos independientes.
  • Mantener la lógica del backend en Laravel y trabajar el frontend con Vue o React de manera natural.

Según mi experiencia, esta integración ha ganado fuerza a partir de Laravel 12, donde al crear un proyecto se pregunta si quieres usar:

  • Una instalación limpia de Laravel.
  • Laravel + React.
  • Laravel + Vue (con Inertia.js).

Con Inertia.js, se logra una integración perfecta, aunque también puedes optar por el enfoque tradicional con REST API, donde el backend y el frontend siguen proyectos separados pero comunicados mediante endpoints de API.

Ejemplo de integración

Con Inertia.js: Laravel devuelve un componente de Vue directamente desde el servidor usando Inertia::render().

En enfoque clásico: Laravel actúa como API, y Vue se consume mediante llamadas a los endpoints definidos en controladores agrupados, por ejemplo, en una carpeta API.

Esto demuestra la flexibilidad de Laravel: puedes elegir entre una integración completa en un solo proyecto o mantener un backend y frontend separados según tus necesidades.

Conclusión y próximos pasos

Integrar Vue 3 en Laravel es más sencillo de lo que parece, pero hacerlo bien implica ir más allá del tutorial básico.
En mi caso, modularizar cada componente y apoyarme en las relaciones polimórficas de Laravel me permitió escalar mi aplicación sin dolores de cabeza, reutilizando código y manteniendo la coherencia del proyecto.

Si ya lograste integrar Vue en tu entorno, el siguiente paso es aplicar estas buenas prácticas para mantener un código limpio, reutilizable y escalable.

FAQs

¿Cuál es mejor: Laravel Mix o Vite para Vue?
Vite es el estándar actual desde Laravel 9. Es más rápido y moderno que Mix.

¿Puedo usar Vue 2 en Laravel?
Sí, pero se recomienda migrar a Vue 3 por compatibilidad con Vite y soporte a largo plazo.

¿Cómo renderizo un componente Vue dentro de Blade?
Solo necesitas crear el div con id="app" y montar Vue sobre él con createApp(App).mount("#app").

El siguiente paso es conocer, como emplear las páginas de errores personalizadas.

Vamos a configurar Vue 3 en un proyecto en Laravel mediante Node y con esto, aprovechar todo el ecosistema de Node junto con Laravel.

Acepto recibir anuncios de interes sobre este Blog.

Andrés Cruz

EN In english
Vue Laravel

Su experiencia en este sitio será mejorada con el uso de cookies.