En las próximas semanas sale la versión definitiva de Laravel 10, y en la siguiente guía te mostramos como instalar Vue 3 en un nuevo proyecto de Laravel desde 0. Por lo general se suele instalar Laravel 10 en conjunto con Laravel Breeze o Jetstream, pero muchas veces lo necesitamos solo sin tantas funciones predeterminadas.
¿Se puede instalar Vue 3 en Laravel 9?
Si esta guía también te va a servir tanto para versiones de Laravel 10 como versiones de Laravel 9.
Crear un nuevo proyecto de Laravel 10
Empecemos por lo primero, instalar un nuevo proyecto de Laravel con el Installer de ellos:
laravel new laravel-vue –-devEn el caso de que estés leyendo esta guía luego del lanzamiento oficial de Laravel 10, deberás ejecutar el comando sin la etiqueta –-dev:
laravel new laravel-vue¿Cómo agregar Vue 3 al proyecto de Laravel?
Una vez que finaliza la instalación de Laravel, accedemos a ella mediante el comando:
cd laravel-vueY luego instalamos la versión final de Vue 3 en Laravel:
npm install vue -–save-devAdemás de instalar Vue 3, vamos a necesitar el plugin de vitejs para poder utilizar componentes:
npm install @vitejs/plugin-vueListo, ya tenemos instaladas todas las dependencias necesarias para correr Vue 3 con Laravel 10. Ahora pasemos a la configuración de Vite para poder compilar la aplicación.
Abrimos el archivo vite.config.js y agregamos el plugin y los parámetros para que Laravel pueda compilar nuestro js y componentes vue. No hay que olvidarse de poner el alias para que no nos de error en la consola que debemos configurar alias “vue”.
Nuestro archivo tiene que quedar de la siguiente manera:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
resolve: {
alias: {
'vue': 'vue/dist/vue.esm-bundler.js'
},
},
});
Ahora modificamos resourses/app.js para que cree una nueva instancia para la aplicación de Vue 3:
import './bootstrap'
import { createApp } from 'vue'
import HelloWorld from '@/components/HelloWorld.vue'
window.app = createApp({
setup() {
return {
message: 'Welcome to Your Vue.js App',
};
},
components: {
HelloWorld
},
}).mount('#app');Agregamos un Nuevo componente de prueba para testear que todo funcione bien. Dentro de Resources, creamos una carpeta llamada components y dentro HelloWorld.vue con el siguiente código de ejemplo:
<template>
<div>
Hello World
</div>
</template>
<script>
export default {
name: 'HelloWorld'
}
</script>
Ahora si creamos el contenedor de nuestra aplicación Vue 3 con Laravel 10, en layouts o el template que usen para mostrar su index (por ejemplo welcome.blade.php) y agregamos el componente de HelloWorld para ver que esté funcionando todo bien. Luego, compilamos con npm y artisan para levantar un servidor en localhost:8000.
<body class="antialiased">
<div id="app">
Vue 3 + Vite + Laravel 10
<hello-world></hello-world>
</div>
...npm run devphp artisan serveListo,
Si todo salio bien, ya tenemos funcionando nuestra aplicación de Laravel 10 con Vue 3.