Cómo usar Laravel con Vue.js 3

Vue.js es uno de los frameworks de JavaScript más utilizados para crear interfaces web y aplicaciones de una sola página, junto con Laravel se convierte en una herramienta de desarrollo muy poderosa.

Para el desarrollo de aplicaciones web, una herramienta muy utilizada es vuejs, y en este artículo veremos cómo instalarlo y usarlo con Laravel. El marco Vue.js fue definito marco progresivo porque está especializado en la creación de vistas HTML y te permite integrarte fácilmente con componentes de otras bibliotecas y proyectos.

El éxito de Vue.js también se debe a la elección de laravel para sugerirlo como un marco frontend, lo que lleva al lanzamiento de la versión 2.0.

Creación de proyecto Laravel

El primer paso es, por supuesto, crear un nuevo proyecto en Laravel. Si tiene uno en su computadora, úselo o puede crear uno nuevo solo para este tutorial.

composer create-project laravel/laravel guide-laravel-vue

Una vez iniciado el proyecto, deberá instalar el npm adicciones Para hacer esto, ejecute el siguiente comando dentro del directorio de su proyecto:

npm install

Una vez que las dependencias estén instaladas, ejecuta el siguiente comando para construir los recursos y asegurarte de que todo funcione realmente:

npm run dev

El comando npm run dev realiza una variedad de verificaciones y compilaciones, en particular Laravel Mix compilar el archivo resources/js/app.js y el archivo resources/css/app.css en los archivos public/js/app.js e public/css/app.css.

Cuando termine, si todo funciona bien, verá algo como esto:

Instalación de Vue.js

Después de preparar el proyecto Laravel, podemos proceder a instalar Vue.js 3. Para hacer esto, ejecute el siguiente comando en el directorio de su proyecto:

npm install --save-dev vue

Esto instalará Vue.js como una de las dependencias de desarrollo. Después de compilar los activos, su archivo JavaScript de producción será independiente, por lo que solo necesita instalar Vue.js como una dependencia de desarrollo.

Para asegurarse de que Vue 3 se instaló correctamente, abra el archivo package.json (presente en la raíz del proyecto) y busque "vue" en el apartado "devDependencies":

// package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vue": "^3.2.37"
    }
}

Como puede ver, el número de versión indica que se ha instalado Vue.js 3. 

Primer intento de Vue.js

En su archivo welcome.blade.php ponga el siguiente código:

<div id="vue-app">
    {{ text }}
</div>
<script>
window.vueApp = new Vue({
  el: '#vue-app',
  data: {
    text: 'Hello World from Vue!'
  }
});
</script>

Como puedes ver hemos creado un elemento div con id "vue-app“. Dentro del elemento script hemos creado una instancia de Vue, donde le pasamos al constructor un objeto que nos permite defiTermina algunos parámetros de la aplicación, como datos y comportamientos, en nuestro caso:

• el: Referencia al elemento div defiterminado en el html
• fecha: conjunto de datos

Tan pronto como se crea el objeto, Vue adquiere el div con id vue-app y se encarga de reemplazar el marcador de posición {{ text }} con el valor contenido en el objeto de datos. Por supuesto, este objeto puede contener más de una propiedad, incluso de diferentes tipos: números, matrices y otros objetos anidados son válidos

Además de este reemplazo, Vue también ha activado su motor y ha hecho que la aplicación responda, es decir, cualquier cambio en la propiedad del texto provocará una actualización instantánea del elemento correspondiente en el HTML.

Segunda prueba de Vue.js

Para continuar con la segunda prueba, primero deberá crear una instancia de la aplicación para crear un nuevo componente. Abre resources/app.js (o resources/js/app.js) y actualizar su contenido de la siguiente manera:

// resources/app.js

require('./bootstrap');

import { createApp } from 'vue';
import HelloVue from '../components/HelloVue.vue';

createApp({
    components: {
        HelloVue,
    }
}).mount('#app');

En este archivo estamos creando una nueva instancia de Vue.js, y para ello necesitamos un componente de Vue al que hemos llamado HelloVue.vue. Para más información consulta los documentos oficiales . 

Crear un nuevo archivo resources/components/HelloVue.vue e ingrese el siguiente código:

// resources/components/HelloVue.vue

<template>
  <h1>Hello Vue!</h1>
</template>

<script>
export default {
    name: 'HelloVue'
}
</script>

El archivo que acabamos de crear es un componente básico de Vue.js que imprime Hello Vue! cómo header1 en la pagina. Finalmente, abra el webpack.mix.js archivo en la raíz del proyecto y actualice su contenido de la siguiente manera:

// webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .vue({
        version: 3,
    })
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

En este archivo, la llamada al método .vue() compilará cualquier código Vue.js y lo incluirá en el archivo JavaScript de producción. La función acepta un objeto donde puede defiFinalice la versión de Vue.js que está utilizando. 

Después de editar el archivo webpack.mix.js necesitas compilar el código javascript. Para ello, ejecutamos de nuevo el comando npm run dev.

Finalmente, para probar Vue operativamente, abra el archivo resources/views/welcome.blade.php e ingrese el siguiente código:

<!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>Laravel Vue</title>
    <script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
    <div id="app">
        <hello-vue />
    </div>
</body>
</html>

El código, junto con el componente creado anteriormente, producirá un mensaje de video Hola Vue!, debido a que la instancia de Vue.js se montó en un elemento HTML con id app.

Ejecute su aplicación usando php artisan servey ábralo en su navegador favorito.

Ercole Palmeri

Usted también puede estar interesado en ...

• Proveedores de Servicios en Laravel: qué son y cómo usar Proveedores de Servicios en Laravel
• Cómo instalar ChatGPT localmente en su computadora
• Cómo personalizar la impresión de proyectos de Gantt en Microsoft Project
• ¿Qué es un Framework en Ingeniería de Software? defidefinición y tipos de marcos
• Aquí viene el primer testamento digital con blockchain