# Bootstrap-italia problema con Vite e Vue

**URL:** <https://forum.italia.it/t/bootstrap-italia-problema-con-vite-e-vue/45424>\
**Category:** Progettare siti e servizi pubblici digitali\
**Created:** [9 Luglio 2025, 4:59pm UTC](https://forum.italia.it/t/bootstrap-italia-problema-con-vite-e-vue/45424 "2025-07-09T16:59:29Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Matteo\_Agostoni](https://forum.italia.it/user_avatar/forum.italia.it/matteo_agostoni/32/13140_2.png) [@Matteo\_Agostoni](https://forum.italia.it/u/Matteo_Agostoni)\
**Post date:** [9 Luglio 2025, 4:59pm UTC](https://forum.italia.it/t/bootstrap-italia-problema-con-vite-e-vue/45424/1 "2025-07-09T16:59:30Z")

</div>

Buongiorno a tutti,  
ho utilizzato la libreria Bootstrap-italia all’interno di una SPA realizzata in Vue js.

Ho un problema con alcuni comportamenti che dipendono, presumo, dalla parte javascript di bootstrap-italia.  
Faccio un esempio (pagina di login) di cui riporto di seguito un piccolo estratto:

```auto
                    <input
                        type="password"
                        v-model="form.password"
                        data-bs-input
                        class="form-control input-password"
                        id="exampleInputPassword"
                        placeholder="inserisci la tua password"
                    />
                    <span class="password-icon" aria-hidden="true">
                        <svg class="password-icon-visible icon icon-sm">
                            <use
                                href="/bootstrap-italia/dist/svg/sprites.svg#it-password-visible"
                            ></use>
                        </svg>
                        <svg
                            class="password-icon-invisible icon icon-sm d-none"
                        >
                            <use
                                href="/bootstrap-italia/dist/svg/sprites.svg#it-password-invisible"
                            ></use>
                        </svg>
                    </span>

```

nella pagina di login ho il classico input box per inserire la password dove il comportamento atteso è il seguente: normalmente i caratteri sono oscurati (pallini) e se clicco sull’icona dell’occhio mi vengono mostrati.

Se mando in esecuzione il progetto in modalità development in locale

> npm run dev

ottengo quanto sperato e tutto funziona correttamente.  
Se invece compilo mandando in esecuzione

> npm run build

e vado ad eseguire poi la versione compilata, se scrivo la password e poi clicco sull’icona dell’occhio, non succede nulla, i caratteri continuano ad essere “oscurati” e non ricevo comunque nessun tipo di errore o segnalazione in console nel browser.

Di seguito la configurazione del compilatore Vite (vite.config.js)

```auto
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    server: {
        hmr: {
            host: 'localhost',
        },
    },
    build: {
    manifest: true,
    rollupOptions: {
      external: [
        'node_modules/bootstrap-italia/dist/js/bootstrap-italia.bundle.min.js'
      ],
    },
  },
});

```

ho provato togliendo e mettendo anche la sezione build con i riferimenti al file js di bootstrap-italia ma non ho ottenuto risultati.

Qualcuno ha riscontrato una problematica simile con framework come Vue o equivalenti?