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:
<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)
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?