Integrare Vue.js in una pagina di un sito web

  • Vue.js
  • Gabriele Romanato

In questo articolo vedremo come rendere dinamica una sezione di una pagina di un sito web integrando al suo interno Vue.js. Si tratta di una soluzione che ci permette di sfruttare le potenzialità di Vue in un sito esistente.

Per poter procedere abbiamo bisogno di tre elementi fondamentali:

  1. Un elemento del DOM su cui andrà ad operare Vue.
  2. Lo script principale di Vue della CDN.
  3. Il nostro codice.

Ecco una struttura base:

<div id="app"></div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="script.js"></script>

Per inizializzare Vue.js sull'elemento #app possiamo usare il metodo createApp() e poi invocare il metodo mount() dell'istanza sull'elemento del DOM scelto:

// script.js
const { createApp } = Vue;

const app = createApp({});

app.mount('#app');

Per creare il nostro primo componente, possiamo procedere in questo modo:

app.component('AppHeader', {
    template: `
        <header class="app-header">
            <img src="logo.png" class="app-logo" alt="Vue.js" />
            <h1>Vue.js App</h1>
        </header>
    `
});

app.mount('#app');

Una volta definito il componente, possiamo includerlo nel codice HTML della pagina:

<div id="app">
    <app-header></app-header>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="script.js"></script>

Quando inseriamo un componente dobbiamo convertire la notazione Pascal-case in quella che ha un trattino come separatore tra le parole. Inoltre è da ricordare che la sintassi deve sempre specificare l'elemento di chiusura.

I componenti sono quelli standard che conosciamo, comprendenti lo stato, i metodi, il binding eccetera. Ad esempio:

app.component('AppMain', {
    data() {
        return {
            todo: '',
            todos: []
        }
    },
    methods: {
        addToDo() {
            if(!this.todos.includes(this.todo)) {
                this.todos.push(this.todo);
            }
            this.todo = '';
        },
        removeToDo(value) {
            this.todos = this.todos.filter(t => t !== value);
        }
    },
    template: `
        <div class="app-main">
            <form>
                <div>
                    <input type="text" name="todo" v-model="todo" />
                    <button @click="addToDo" type="button">Add To Do</button>
                </div>
            </form>
            <ul class="app-list" v-if="todos.length > 0">
                <li v-for="td in todos" :key="td">{{ td }} <button @click="removeToDo(td)">Remove</button></li>
            </ul>

        </div>
    `
})

app.mount('#app');

In questo caso andiamo a creare una todo list dinamica che permette di aggiungere e rimuovere voci e che mostra l'elenco delle voci aggiunte. Nell'HTML della pagina avremo:

<div id="app">
    <app-header></app-header>
    <app-main></app-main>
</div>

Demo

Vue.js App on a page

Conclusione

Se abbiamo delle pagine di un sito che hanno bisogno di essere dinamiche e reattive, usare Vue.js si rivela essere un'ottima soluzione, considerando che la procedura per includere Vue è molto semplice.

Torna su