articuli

Cumu aduprà Laravel cù Vue.js 3

Vue.js hè unu di i framevorks JavaScript più utilizati per creà interfacce web è applicazioni di una sola pagina, inseme cù Laravel diventa un strumentu di sviluppu assai putente.

Per u sviluppu di l'applicazioni web, un strumentu assai utilizatu hè vuejs, è in questu articulu vedemu cumu stallà è aduprà cù Laravel. U quadru di Vue.js era definitu quadru prugressivu perchè hè specializatu in a creazione di viste HTML, è vi permette di integrà facilmente cù cumpunenti di altre biblioteche è prughjetti.

U successu di Vue.js hè dinù duvuta à a scelta di Laravel per suggerisce cum'è un framework di frontend, purtendu cusì à a liberazione di a versione 2.0.

Table of contents

Creazione di prughjettu Laravel

U primu passu hè, sicuru, di creà un novu prughjettu in Laravel. Sì avete unu in u vostru urdinatore, aduprate o pudete creà un novu solu per stu tutoriale.

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

Dopu à u prugettu hà principiatu, vi tuccherà à stallà les npm addictions. Per fà questu, eseguite u cumandimu seguitu in u vostru cartulare di prughjettu:

npm install

Una volta installate e dipendenze, eseguite u cumandimu seguitu per custruisce e risorse è assicuratevi chì tuttu funziona veramente:

npm run dev

U cumandamentu npm run dev esegue una varietà di cuntrolli è costruzioni, in particulare Laravel Mix compilà u schedariu resources/js/app.js è u schedariu resources/css/app.css in i schedari public/js/app.js e public/css/app.css.

Quandu hè finitu, se tuttu funziona bè, vi vede qualcosa cum'è questu:

Stallà Vue.js

Dopu avè preparatu u prughjettu Laravel, pudemu avvià à installà Vue.js 3. Per fà questu, eseguite u cumandimu seguitu in u vostru cartulare di u prugettu:

npm install --save-dev vue

Questu installerà Vue.js cum'è una di e dependenze di sviluppu. Dopu a compilazione di l'assi, u vostru schedariu JavaScript di produzzione serà autonomu, cusì avete bisognu di installà Vue.js cum'è una dependenza di sviluppu.

Per assicurà chì Vue 3 hè stata installata currettamente, apre u schedariu package.json (presente in a radica di u prughjettu) è cercate "vue" in a sizzioni "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"
    }
}

Comu pudete vede, u numeru di versione indica chì Vue.js 3 hè stata stallata.

Prima prova di Vue.js

In u vostru schedariu welcome.blade.php mette u seguente codice:

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

Comu pudete vede, avemu creatu un elementu div Con id "vue-app". Dentru l'elementu di script avemu creatu una istanza di Vue, induve passemu à u custruttore un ughjettu chì ci permette di defifinisce certi paràmetri di l'applicazione, cum'è dati è cumpurtamenti, in u nostru casu:

el: Riferimentu à l'elementu div defifinitu in u html
data: dataset

Appena l'ughjettu hè creatu, Vue acquista u div Con id vue-app è cura di rimpiazzà u placeholder {{ text }} cù u valore cuntenutu in l'ughjettu di dati. Di sicuru, questu ughjettu pò cuntene più di una pruprietà, ancu di diversi tipi: numeri, array è altri oggetti anidificati sò validi.

In più di sta sustituzione, Vue hà ancu attivatu u so mutore è hà fattu l'applicazione responsive, vale à dì ogni cambiamentu di a pruprietà di testu pruvucarà una aghjurnazione immediata di l'elementu currispundenti in HTML.

Seconda prova di Vue.js

Per viaghjà à a seconda prova, avete prima bisognu di istanziate l'app per creà un novu cumpunente. Tu apre resources/app.js (o resources/js/app.js) è aghjurnà u so cuntenutu cusì:

// resources/app.js

require('./bootstrap');

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

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

In questu schedariu avemu criatu una nova istanza Vue.js, è per fà questu avemu bisognu di un cumpunente Vue chì avemu chjamatu HelloVue.vue. Per più infurmazione cunsultà i ducumenti ufficiali .

Crea un novu schedariu resources/components/HelloVue.vue è entre u codice seguente:

// resources/components/HelloVue.vue

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

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

U schedariu chì avemu appena creatu hè un cumpunente di basa Vue.js chì stampa Hello Vue! ghjuntu header1 nantu à a pagina. Infine, apre u webpack.mix.js file in a radica di u prughjettu è aghjurnà u so cuntenutu cum'è seguente:

// 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 questu schedariu, u metudu chjama .vue() compilerà ogni codice Vue.js è bundle in u schedariu JavaScript di produzzione. A funzione accetta un oggettu induve pudete defifinisce a versione di Vue.js chì site aduprate.

Dopu à edità u schedariu webpack.mix.js avete bisognu di cumpilà u codice javascript. Per fà questu, eseguimu u cumandamentu novu npm run dev.

Infine, à pruvà Vue operationally, apre u schedariu resources/views/welcome.blade.php è entre u codice seguente:

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

U codice, inseme cù u cumpunente creatu prima, pruducerà un missaghju video Ciao Vue!, per via di l'istanza Vue.js chì hè muntatu nantu à un elementu HTML cù id app.

Eseguite a vostra applicazione utilizendu php artisan serve, è apre lu in u vostru navigatore preferitu.

Ercole Palmeri

Puderia ancu esse interessatu à ...