Come utilizzare Laravel con Vue.js 3

Vue.js è uno dei framevork JavaScript più utilizzati per la realizzazione di interfacce web e single page application, insieme a Laravel diventa uno strumento di sviluppo molto potente.

Per lo sviluppo di app web, uno strumento molto utilizzato è vuejs, è in questo articolo vedremo come installarlo e usarlo con Laravel. Il framework Vue.js è stato definito framework progressivo perchè è specializzato nella realizzazione delle viste HTML, e permette di integrarsi facilmente con componenti di altre librerie e progetti.

Il successo di Vue.js è da collegare anche alla scelta di Laravel di suggerirlo come framework frontend, portando così al rilascio della versione 2.0.

Creazione progetto Laravel

Il primo passo è, ovviamente, creare un nuovo progetto in Laravel. Se ne hai uno sul tuo computer, usalo o puoi crearne uno nuovo solo per questo tutorial.

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

Dopo che il progetto è stato avviato, dovrai installare le npm dipendenze. Per fare ciò, esegui il seguente comando all’interno della directory del tuo progetto:

npm install

Al termine dell’installazione delle dipendenze, eseguire il seguente comando per compilare le risorse e assicurarsi che tutto funzioni davvero:

npm run dev

Il comando npm run dev esegue una serie di controlli e compilazioni, in particolare Laravel Mix compila il file resources/js/app.js e il file resources/css/app.css nei file public/js/app.js e public/css/app.css.

Al termine se tutto funziona correttamente, vedrai qualcosa come segue:

Installazione di Vue.js

Dopo aver preparato il progetto Laravel, possiamo procedere a installare Vue.js 3. Per fare ciò, esegui il seguente comando nella directory del tuo progetto:

npm install --save-dev vue

Questo installerà Vue.js come una delle dipendenze di sviluppo. Dopo aver compilato le risorse, il file JavaScript di produzione sarà autosufficiente, quindi è sufficiente installare Vue.js come dipendenza di sviluppo.

Per assicurarti che Vue 3 sia stato installato correttamente, apri il file package.json (presente in root di progetto) e cerca "vue" nella sezione "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"
    }
}

Come puoi vedere, il numero di versione indica che Vue.js 3 è stato installato. 

Prima prova di Vue.js

Nel tuo file welcome.blade.php inserisci il seguente codice:

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

Come puoi notare abbiamo creato un elemento div con id “vue-app“. All’interno dell’elemento script abbiamo creato una istanza di Vue, dove passiamo al costruttore un oggetto che ci permette di definire alcuni parametri dell’applicazione, come dati e comportamenti, nel nostro caso:

• el: riferimento all’elemento div definito nell’html
• data: set di dati

Appena l’oggetto viene creato, Vue acquisisce il div con id vue-app e si occupa di sostituire il placeholder {{ text }} con il valore contenuto all’interno dell’oggetto data. Ovviamente questo oggetto può contenere più di una proprietà anche di tipo diverso: sono validi numeri, array e altri oggetti annidiati

Oltre a questa sostituzione, Vue ha anche attivato il suo motore e ha reso l’applicazione reattiva, cioè qualsiasi cambiamento alla proprietà text, provocherà un aggiornamento istantaneo del corrispondente elemento nell’HTML.

Seconda prova di Vue.js

Per procedere alla seconda prova, dovrai prima creare un’istanza dell’app per creare un nuovo componente. Apri resources/app.js (o resources/js/app.js) e aggiorna il suo contenuto come segue:

// resources/app.js

require('./bootstrap');

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

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

In questo file stiamo creando una nuova istanza Vue.js, e per far questo abbiamo bisogno di un componente Vue che abbiamo chiamato HelloVue.vue. Per maggiori informazioni consulta i documenti ufficiali . 

Crea un nuovo file resources/components/HelloVue.vue e inserisci il seguente codice:

// resources/components/HelloVue.vue

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

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

Il file che abbiamo appena creato è un componente Vue.js di base che stampa Hello Vue! come header1 sulla pagina. Infine, apri il webpack.mix.js file nella root del progetto e aggiornane il contenuto come segue:

// 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', [
        //
    ]);

In questo file, la chiamata del metodo .vue() compilerà qualsiasi codice Vue.js e lo raggrupperà nel file JavaScript di produzione. La funzione accetta un oggetto in cui puoi definire la versione di Vue.js che stai utilizzando. 

In seguito alla modifica del file webpack.mix.js è necessario compilare il codice JavaScript. Per fare ciò, eseguiamo nuovamente il comando npm run dev.

Infine, per provare in modo operativo Vue, apri il file resources/views/welcome.blade.php e inserisci il seguente codice:

<!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>

Il codice, insieme al componente creato precedentemente, produrrà una scritta a video Hello Vue!, per effetto dell’istanza Vue.js che viene montata su un elemento HTML con id app.

Esegui la tua applicazione usando php artisan serve, e aprila nel tuo browser preferito.

Ercole Palmeri

Newsletter sull’Innovazione

Non perderti le notizie più importanti sull'Innovazione. Iscriviti per riceverle via e-mail.

Nome

Email*

Puoi cancellarti in ogni momento. Leggi la nostra Privacy Policy.