[{"data":1,"prerenderedAt":142},["ShallowReactive",2],{"post-source-published-packages-it":3,"related-posts-source-published-packages-it":107,"related-categories-source-published-packages-it":132},{"id":4,"title":5,"author":6,"authorImageUrl":7,"authorUrl":8,"body":9,"categorySlug":83,"categoryText":84,"dateModified":85,"datePublished":85,"description":86,"extension":87,"faqs":88,"image":95,"language":96,"meta":97,"navigation":98,"path":99,"seo":100,"stem":101,"tags":102,"__hash__":106},"blog\u002Fit\u002Fblog\u002Fsource-published-packages.md","Pubblicare una libreria Vue senza passaggio di build","Bruma","\u002Fimages\u002Fauthors\u002Fbruma.jpg","https:\u002F\u002Fbrumaombra.com",{"type":10,"value":11,"toc":74},"minimark",[12,17,26,37,41,44,51,54,60,65,68,71],[13,14,16],"h2",{"id":15},"la-maggior-parte-delle-librerie-pubblica-una-seconda-copia-di-sé-stessa","La maggior parte delle librerie pubblica una seconda copia di sé stessa",[18,19,20,21,25],"p",{},"Una tipica libreria di componenti ha due versioni del proprio codice: il sorgente che modifichi e un bundle compilato in ",[22,23,24],"code",{},"dist\u002F"," che pubblichi. Tenerle allineate è un lavoro a sé, con la configurazione del bundler, i file di dichiarazione e qualche bug che esiste solo nella build.",[18,27,28,29,32,33,36],{},"UI Vintage salta la seconda copia. Il pacchetto npm contiene i file ",[22,30,31],{},".vue"," e ",[22,34,35],{},".ts"," così come sono scritti, e il modulo Nuxt dice a ogni app di compilarli come se fossero codice suo.",[13,38,40],{"id":39},"cosa-ottieni-gratis","Cosa ottieni gratis",[18,42,43],{},"Il vantaggio evidente è avere meno strumenti da gestire. Quello meno evidente è che la libreria si comporta esattamente come il codice dell'app, perché viene compilata dagli stessi strumenti con le stesse impostazioni.",[45,46],"flow",{":items":47,"description":48,"orientation":49,"title":50},"[\"npm install\",\"Il modulo si registra\",\"L'app compila il sorgente\",\"Pagina con tree-shaking\"]","La libreria non si compila mai da sola. Lo fa l'app, una volta, insieme a tutto il resto.","horizontal","Dall'installazione alla pagina",[18,52,53],{},"Tailwind analizza direttamente i template della libreria, quindi ogni classe di utilità usata da un componente finisce nel foglio di stile dell'app. Vite applica il tree-shaking per ogni sottopercorso importato, quindi una pagina che usa solo un pulsante non carica mai il selettore di date.",[55,56],"code-block",{"code":57,"language":58,"title":59},"npm install @brumaombra\u002Fui-vintage\nnpx nuxi module add @brumaombra\u002Fui-vintage\n","bash","Installare la libreria",[61,62,64],"h3",{"id":63},"i-compromessi-sono-reali","I compromessi sono reali",[18,66,67],{},"L'argomento più forte contro questo approccio è che lega la libreria al suo framework. Un bundle compilato potrebbe, in teoria, funzionare in qualsiasi app Vue. Un pacchetto sorgente ha bisogno degli strumenti per cui è stato scritto, che qui significa Nuxt.",[18,69,70],{},"C'è anche un contratto di versione da rispettare. Poiché le app compilano il sorgente, un aggiornamento della libreria può far emergere un errore di tipo nella build dell'app che un bundle precompilato avrebbe nascosto. Si può considerare una funzionalità, ma significa che ogni rilascio richiede un controllo dei tipi prima della pubblicazione.",[18,72,73],{},"Per una libreria usata solo da app Nuxt, il compromesso è facile da accettare. Il punto non è che i passaggi di build siano sbagliati. È che anche una build è codice, e il codice più economico da mantenere è quello di cui non hai bisogno.",{"title":75,"searchDepth":76,"depth":76,"links":77},"",2,[78,79],{"id":15,"depth":76,"text":16},{"id":39,"depth":76,"text":40,"children":80},[81],{"id":63,"depth":82,"text":64},3,"engineering","Sviluppo","2026-08-12T00:00:00Z","UI Vintage pubblica il proprio codice sorgente e lascia che ogni app Nuxt lo compili. Questa scelta elimina un'intera categoria di problemi e ne introduce un paio di nuovi.","md",[89,92],{"question":90,"answer":91},"Pubblicare il sorgente rende più lenta la build delle app?","Un po', perché l'app compila la libreria insieme al proprio codice. In pratica la differenza è piccola, e l'app compila solo i componenti che importa davvero.",{"question":93,"answer":94},"Un'app Vue senza Nuxt può usare il pacchetto?","Non direttamente. I componenti si basano su funzionalità di Nuxt come NuxtImg e sul modulo che inietta stili e traduzioni.","\u002Fimages\u002Fblog\u002Fsource-published-packages\u002Fcover.jpg","it",{},true,"\u002Fit\u002Fblog\u002Fsource-published-packages",{"title":5,"description":86},"it\u002Fblog\u002Fsource-published-packages",[103,104,105],"Nuxt","Component Libraries","Tooling","iRR8VadPdxG5Gby0ReSBCT_remSM9AXb4_6yFiuYdKU",[108,114,120,126],{"title":109,"description":110,"image":111,"categoryText":112,"path":113},"Pubblicare la migrazione del blog nella libreria","Una sintesi pratica di ciò che è cambiato quando l'implementazione originale del blog è stata spostata in una libreria di componenti compatibile con Nuxt.","\u002Fimages\u002Fblog\u002Fshipping-the-blog-migration\u002Fcover.jpg","Aggiornamenti prodotto","\u002Fit\u002Fblog\u002Fshipping-the-blog-migration",{"title":115,"description":116,"image":117,"categoryText":118,"path":119},"Perché le animazioni a molla sembrano più veloci di quanto siano","Una molla che supera di poco il bersaglio può durare più di una semplice dissolvenza e sembrare comunque più rapida. Ecco perché, e dove il trucco smette di funzionare.","\u002Fimages\u002Fblog\u002Fwhy-spring-animations-feel-faster\u002Fcover.jpg","Motion design","\u002Fit\u002Fblog\u002Fwhy-spring-animations-feel-faster",{"title":121,"description":122,"image":123,"categoryText":124,"path":125},"La modalità scura è un secondo design, non un filtro","Invertire i colori produce un tema scuro che funziona ma sembra leggermente sbagliato ovunque. I token semantici risolvono quasi tutto. Ombre e accenti richiedono più attenzione.","\u002Fimages\u002Fblog\u002Fdark-mode-is-a-second-design\u002Fcover.jpg","Sistemi di design","\u002Fit\u002Fblog\u002Fdark-mode-is-a-second-design",{"title":127,"description":128,"image":129,"categoryText":130,"path":131},"Progettare stati di focus che le persone notano davvero","Chi naviga con la tastiera si affida all'anello di focus per sapere dove si trova. Molti design lo nascondono o lo rendono sbiadito. Poche regole lo rendono visibile ed elegante.","\u002Fimages\u002Fblog\u002Ffocus-states-people-notice\u002Fcover.jpg","Accessibilità","\u002Fit\u002Fblog\u002Ffocus-states-people-notice",[133,136,138,140],{"name":130,"slug":134,"count":135,"image":129},"accessibility",1,{"name":118,"slug":137,"count":135,"image":117},"motion-design",{"name":124,"slug":139,"count":76,"image":123},"design-systems",{"name":112,"slug":141,"count":135,"image":111},"product-updates",1792259223199]