Articoli

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

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

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

Potrebbe interessarti anche…

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

Articoli recenti

Apprendimento automatico: confronto tra Random Forest e albero decisionale

Nel mondo del machine learning, sia gli algoritmi random forest che decision tree svolgono un ruolo fondamentale nella categorizzazione e…

17 Maggio 2024

Come migliorare le presentazioni Power Point, consigli utili

Esistono molti suggerimenti e trucchi per fare ottime presentazioni. L'obiettivo di queste regola è di migliorare l'efficacia, la scorrevolezza di…

16 Maggio 2024

È ancora la velocità la leva nello sviluppo dei prodotti, secondo il report di Protolabs

Pubblicato il rapporto "Protolabs Product Development Outlook". Esamina le modalità in cui oggi vengono portati i nuovi prodotti sul mercato.…

16 Maggio 2024

I quattro pilastri della Sostenibilità

Il termine sostenibilità è oramai molto usato per indicare programmi, iniziative e azioni finalizzate alla preservazione di una particolare risorsa.…

15 Maggio 2024

Come consolidare i dati in Excel

Una qualsiasi operazione aziendale produce moltissimi dati, anche in forme diverse. Inserire manualmente questi dati da un foglio Excel a…

14 Maggio 2024

Analisi trimestrale Cisco Talos: mail aziendali nel mirino dei criminali Manifatturiero, Istruzione e Sanità i settori più colpiti

La compromissione delle mail aziendali sono aumentate nei primi tre mesi del 2024 più del doppio rispetto all’ultimo trimestre del…

14 Maggio 2024

Principio di segregazione dell’interfaccia (ISP), quarto principio S.O.L.I.D.

Il principio di segregazione dell'interfaccia è uno dei cinque principi SOLID della progettazione orientata agli oggetti. Una classe dovrebbe avere…

14 Maggio 2024

Come organizzare al meglio i dati e le formule in Excel, per un’analisi ben fatta

Microsoft Excel è lo strumento di riferimento per l'analisi dei dati, perchè offre molte funzionalità per organizzare set di dati,…

14 Maggio 2024

Leggi Innovazione nella tua Lingua

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

Seguici