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:

Articoli correlati
  • 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

Nasce Nim, l’Osservatorio del Nord-Est sull’economia dell’innovazione

Nasce l’Osservatorio del Nordest sull’economia dell’Innovazione Nim, (Numbers Innovation Motion) è un progetto di Galileo Visionary District realizzato in collaborazione…

7 Dicembre 2023

Innovazione del Content Marketing con Memory e Personality

ASKtoAI lancia le innovative funzionalità Memory e Personality, strumenti d'avanguardia per la creazione di contenuti digitali che promettono di migliorare…

6 Dicembre 2023

Discuss apre una nuova era di ricerca qualitativa con GenAI ampliata e innovazione asincrona

Discuss , la piattaforma leader appositamente creata per trasformare le esperienze in insight, ha potenziato le sue capacità di scalare la…

6 Dicembre 2023

Unwrapping Innovation: Blue Lake Packaging annuncia un’alternativa a base di fibra e priva di plastica al nastro e ai dispenser tradizionali

Con le festività che si avvicinano rapidamente, Blue Lake Packaging è entusiasta di offrire un'alternativa ecologica al nastro da imballaggio…

6 Dicembre 2023

Riepilogo del Netlogistik Innovation Day: trasformazione digitale della catena del freddo, innovazioni nel riciclaggio e leadership nella supply chain

Netlogistik , leader in potenti servizi che guidano le aziende verso la trasformazione digitale della catena di fornitura, ha recentemente tenuto…

6 Dicembre 2023

Lattice collabora con NVIDIA per accelerare l’IA edge

Annuncia una soluzione integrata che combina FPGA di Lattice a bassa potenza e bassa latenza con la piattaforma NVIDIA Orin…

6 Dicembre 2023

Evoluzione del tessile: il progetto TEPP della Taiwan Textile Federation ispira l’innovazione sostenibile oltre il 2023

Con un successo clamoroso, il Textile Export Promotion Project (TEPP), guidato dalla Taiwan Textile Federation nel 2023, ha messo in…

5 Dicembre 2023

Lattice continua la rapida espansione del portafoglio di prodotti che rende possibile la prossima era dell’innovazione

Lattice presenta i nuovi FPGA mid-range Lattice Avant-G e Lattice Avant-X, stack di soluzioni specifiche per le applicazioni ampliate e…

5 Dicembre 2023

Scopri di più sulla gestione della conoscenza e sull’innovazione per gli studi legali con un nuovo trattato scritto da esperti

Innovazione per i professionisti della gestione della conoscenza e dell'innovazione (KM&I). Nel settore legale è ora disponibile un riferimento completo…

5 Dicembre 2023

La Fondazione Eclipse lancia il gruppo di lavoro Eclipse Dataspace per promuovere l’innovazione globale nella condivisione affidabile dei dati

La Eclipse Foundation , una delle più grandi fondazioni di software open source al mondo, ha annunciato oggi la formazione dell'Eclipse…

5 Dicembre 2023