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.

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.

Acepto recibir anuncios de interes sobre este Blog.

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

| 👤 Andrés Cruz

🇺🇸 In english
🏷️Vue 🏷️Laravel

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