Saltar a contenido

Vue.js

Vue (pronunciado /vjuː/, como view) es un framework progresivo para construir interfaces de usuario. A diferencia de otros frameworks monolíticos, Vue está diseñado desde cero para ser utilizado incrementalmente. La librería central está enfocada solo en la capa de visualización, y es fácil de utilizar e integrar con otras librerías o proyectos existentes. Por otro lado, Vue también es perfectamente capaz de impulsar sofisticadas Single-Page Applications cuando se utiliza en combinación con herramientas modernas y librerías de apoyo.

Una de las características que diferencian a Vue es su discreto sistema de reactividad. Los modelos simplemente son objetos de JavaScript. Cuando los modifique, se actualizará la vista. Esto hace que el gestor de estados sea simple e intuitivo, pero también es importante entender como funciona para prevenir algunos errores comunes.

Aplicación Reactiva

Instalar y configurar Vue

Como en cualquier proyecto web, necesitamos instalar una serie de paquetes para poder incluir Vue. Como ya vivos, Laravel tiene integrado Node.js, por lo que hace más sencillo la instalación. Para ello deberemos usar los comandos para su instalación:

npm install vue
npm install vue-loader

El primero instala vue 3 y el segundo el paquete que permite procesar los ficheros .vue para que el navegador pueda interpretarlos.

Adicionalmente, tenemos que instalar el plugin de Vue con Vite:

npm install @vitejs/plugin-vue

Y en el archivo de Vite (vite.config.js) de nuestro proyecto, agregamos Vue:

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

Recordatorio

Llegados a este punto, deberemos ver si nuestro proyecto tiene las rutas correctas para su funcionamiento. Como ya has ido observando, es necesario ver que el fichero routes\web.php tenga las rutas correctamente configurada. Esto puede ser interesante si queremos que en un solo proyecto convivan el motor blade de Laravel con una aplicación reactiva, en este caso, sobre Vue.

Actividad

  • 🧪 PR 904. (RA9 / CE9b CE9h / IC2 / 5p) - Para este bloque final, tu CTO te ha pedido la creación de proyecto reactivo para entregar las notas de los alumnos. A lo largo de la UT vas a ir gestionando las diferentes partes. Ahora, te solicita que lo inicialices. Documenta el proceso de creación.