Com utilitzar Laravel amb Vue.js 3

Vue.js és un dels frameworks JavaScript més utilitzats per crear interfícies web i aplicacions d'una sola pàgina, juntament amb Laravel es converteix en una eina de desenvolupament molt potent.

Per al desenvolupament d'aplicacions web, una eina molt utilitzada és vuejs, i en aquest article veurem com instal·lar-lo i utilitzar-lo amb Laravel. El marc de Vue.js era definito marc progressiu perquè està especialitzat en la creació de vistes HTML, i permet integrar fàcilment amb components d'altres biblioteques i projectes.

L'èxit de Vue.js també es deu a l'elecció de laravel per suggerir-lo com a framework d'interfície, donant lloc així al llançament de la versió 2.0.

Creació del projecte Laravel

El primer pas és, per descomptat, crear un nou projecte a Laravel. Si en teniu un a l'ordinador, utilitzeu-lo o podeu crear-ne un de nou només per a aquest tutorial.

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

Un cop iniciat el projecte, haureu d'instal·lar el fitxer npm addiccions. Per fer-ho, executeu l'ordre següent dins del directori del vostre projecte:

npm install

Un cop instal·lades les dependències, executeu l'ordre següent per crear els recursos i assegurar-vos que tot funciona realment:

npm run dev

La comanda npm run dev realitza una varietat de comprovacions i construccions, en particular Laravel Mix compilar el fitxer resources/js/app.js i el fitxer resources/css/app.css en fitxers public/js/app.js e public/css/app.css.

Quan acabis, si tot funciona bé, veuràs alguna cosa com això:

Instal·lant Vue.js

Després de preparar el projecte Laravel, podem procedir a instal·lar Vue.js 3. Per fer-ho, executeu l'ordre següent al directori del vostre projecte:

npm install --save-dev vue

Això instal·larà Vue.js com una de les dependències de desenvolupament. Després de compilar els actius, el vostre fitxer JavaScript de producció serà autònom, de manera que només cal que instal·leu Vue.js com a dependència de desenvolupament.

Per assegurar-vos que Vue 3 s'ha instal·lat correctament, obriu el fitxer package.json (present a l'arrel del projecte) i cercar "vue" a la secció "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"
    }
}

Com podeu veure, el número de versió indica que Vue.js 3 s'ha instal·lat. 

Primer intent de Vue.js

Al fitxer welcome.blade.php poseu el codi següent:

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

Com podeu veure hem creat un element div amb id "vue-app“. Dins de l'element script hem creat una instància de Vue, on passem al constructor un objecte que ens permet defiacabar alguns paràmetres de l'aplicació, com ara dades i comportaments, en el nostre cas:

• el: Referència a l'element div defiacabat a l'html
• data: conjunt de dades

Tan bon punt es crea l'objecte, Vue adquireix el div amb id vue-app i s'encarrega de substituir el marcador de posició {{ text }} amb el valor contingut a l'objecte de dades. Per descomptat, aquest objecte pot contenir més d'una propietat, fins i tot de diferents tipus: són vàlids números, matrius i altres objectes imbricats.

A més d'aquesta substitució, Vue també ha activat el seu motor i ha fet que l'aplicació respongui, és a dir, qualsevol canvi a la propietat del text provocarà una actualització instantània de l'element corresponent a l'HTML.

Segona prova de Vue.js

Per passar a la segona prova, primer haureu d'instanciar l'aplicació per crear un component nou. Tu obris resources/app.js (o resources/js/app.js) i actualitzar-ne el contingut de la manera següent:

// resources/app.js

require('./bootstrap');

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

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

En aquest fitxer estem creant una nova instància Vue.js, i per fer-ho necessitem un component Vue que hem anomenat HelloVue.vue. Per a més informació consultar els documents oficials . 

Creeu un fitxer nou resources/components/HelloVue.vue i introduïu el codi següent:

// resources/components/HelloVue.vue

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

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

El fitxer que acabem de crear és un component bàsic de Vue.js que s'imprimeix Hello Vue! Venir header1 a la pàgina. Finalment, obriu el webpack.mix.js fitxer a l'arrel del projecte i actualitzeu-ne el contingut de la següent 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 aquest fitxer, la crida al mètode .vue() compilarà qualsevol codi Vue.js i l'agruparà al fitxer JavaScript de producció. La funció accepta un objecte on podeu defiacabeu la versió de Vue.js que feu servir. 

Després d'editar el fitxer webpack.mix.js heu de compilar el codi javascript. Per fer-ho, tornem a executar l'ordre npm run dev.

Finalment, per provar Vue de manera operativa, obriu el fitxer resources/views/welcome.blade.php i introduïu el codi següent:

<!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 codi, juntament amb el component creat anteriorment, produirà un missatge de vídeo Hola Vue!, a causa que la instància Vue.js està muntada en un element HTML amb id app.

Executeu la vostra aplicació utilitzant php artisan serve, i obriu-lo al vostre navegador preferit.

Ercole Palmeri

També us pot interessar ...

• Proveïdors de serveis a Laravel: què són i com utilitzar els proveïdors de serveis a Laravel
• Com instal·lar ChatGPT localment al vostre ordinador
• Com personalitzar la impressió del projecte Gantt al Microsoft Project
• Què és un marc en enginyeria del programari, defidefinició i tipus de marcs
• Aquí arriba el primer testament digital blockchain