Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: 141-ways-of-using-vuemd #145

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 29 additions & 29 deletions src/guide/extras/ways-of-using-vue.md
Original file line number Diff line number Diff line change
@@ -1,59 +1,59 @@
# Ways of Using Vue {#ways-of-using-vue}
# Modi di utilizzare Vue {#ways-of-using-vue}

We believe there is no "one size fits all" story for the web. This is why Vue is designed to be flexible and incrementally adoptable. Depending on your use case, Vue can be used in different ways to strike the optimal balance between stack complexity, developer experience and end performance.
Noi crediamo alla storia che c'è un modo giusto in assoluto che vada per tutti nel mondo del web. Questo è il principale motivo per la quale abbiamo disegnato Vue per essere versatile e flessibile. A seconda del tuo caso d'uso, Vue può essere utilizzato in modi diversi per trovare l'equilibrio ottimale tra complessità dello stack, esperienza dello sviluppatore e performance.

## Standalone Script {#standalone-script}

Vue can be used as a standalone script file - no build step required! If you have a backend framework already rendering most of the HTML, or your frontend logic isn't complex enough to justify a build step, this is the easiest way to integrate Vue into your stack. You can think of Vue as a more declarative replacement of jQuery in such cases.
Vue può essere utilizzato con script file "standalone", ovvero senza necessità di build. Se hai un framework backend che già renderizza la maggior parte del HTML, o la tua logica di frontend non è complessa a tal punto da giustificare una build, questo è il modo più semplice per integrare Vue all'interno del vostro stack. In questi casi puoi pensare a Vue come un sostituto più dichiarativo di JQuery.

Vue also provides an alternative distribution called [petite-vue](https://github.com/vuejs/petite-vue) that is specifically optimized for progressively enhancing existing HTML. It has a smaller feature set, but is extremely lightweight and uses an implementation that is more efficient in no-build-step scenarios.
Inoltre Vue dispone di una distribuzione alternativa chiamata [petite-vue](https://github.com/vuejs/petite-vue) che è specificatamente ottimizzata per migliorare progressivamente il codice HTML esistente. Ha un set di funzionalità più limitato ma estremamente leggero ed è molto efficace soprattutto negli scenari senza step di build.

## Embedded Web Components {#embedded-web-components}
## Utilizzare Web Components {#embedded-web-components}

You can use Vue to [build standard Web Components](/guide/extras/web-components) that can be embedded in any HTML page, regardless of how they are rendered. This option allows you to leverage Vue in a completely consumer-agnostic fashion: the resulting web components can be embedded in legacy applications, static HTML, or even applications built with other frameworks.
Puoi usare Vue per [creare Web Components nativi](/guide/extras/web-components) che potrai embeddare in ogni pagina HTML, indipendentemente da come quest'ultime vengano renderizzate. Questa opzione ti consente di sfruttare Vue in modo completamente indipendente da chi lo integra: i web components creati potranno essere incorporati in applicazioni legacy, HTML statico o persino applicazioni create con altri framework.

## Single-Page Application (SPA) {#single-page-application-spa}

Some applications require rich interactivity, deep session depth, and non-trivial stateful logic on the frontend. The best way to build such applications is to use an architecture where Vue not only controls the entire page, but also handles data updates and navigation without having to reload the page. This type of application is typically referred to as a Single-Page Application (SPA).
Molte delle applicazioni richiedono molta interattività, gestione della sessione, e una logica stateful complessa lato frontend. Il modo migliore per creare applicazioni è di usare un architettura dove Vue non controlla solamente l'intera pagina, ma controlla anche l'aggiornamento dei dati e navigazione senza necessità di ricaricare la pagina. Questo tipo di applicazione è tipicamente chiamata come Single-Page Application (SPA).

Vue provides core libraries and [comprehensive tooling support](/guide/scaling-up/tooling) with amazing developer experience for building modern SPAs, including:
Per rendere ancora più piacevole l'esperienza di sviluppo, Vue dispone di librerie core e [strumenti di supporto completo](/guide/scaling-up/tooling) che includono:

- Client-side router
- Blazing fast build tool chain
- IDE support
- Client-side router
- Blazing fast build tool chain (Strumenti di costruzione delle applicazioni incredibilmente veloce)
- Supporto agli IDE
- Browser devtools
- TypeScript integrations
- Testing utilities
- Integrazioni per TypeScript
- Utility per i test

SPAs typically require the backend to expose API endpoints - but you can also pair Vue with solutions like [Inertia.js](https://inertiajs.com) to get the SPA benefits while retaining a server-centric development model.
Tipicamente le SPA richiedono un backend che espone API, ma soluzioni come [Inertia.js](https://inertiajs.com) possono essere abbinate a Vue per avere i vantaggi di una SPA ma mantenere il modello di sviluppo lato server.

## Fullstack / SSR {#fullstack-ssr}

Pure client-side SPAs are problematic when the app is sensitive to SEO and time-to-content. This is because the browser will receive a largely empty HTML page, and has to wait until the JavaScript is loaded before rendering anything.
Le SPA "pure" sono limitate quando le applicazioni devono essere soggette a pratiche SEO e time-to-content. Questo perché il browser riceverà una pagina HTML gran parte vuota, e deve aspettare fino a che il Javascript verrà caricato prima di renderizzare qualsiasi cosa.

Vue provides first-class APIs to "render" a Vue app into HTML strings on the server. This allows the server to send back already-rendered HTML, allowing end users to see the content immediately while the JavaScript is being downloaded. Vue will then "hydrate" the application on the client side to make it interactive. This is called [Server-Side Rendering (SSR)](/guide/scaling-up/ssr) and it greatly improves Core Web Vital metrics such as [Largest Contentful Paint (LCP)](https://web.dev/lcp/).
Vue dispone di API di prima categoria per "renderizzare" lato Sever una Vue app in stringhe HTML. Questo fa si che il server risponda con il codice HTML già renderizzato, così che l'utente finale veda il contenuto immediatamente anche se il Javascript è ancora in caricamento. Quando il caricamento di quest'ultimo sarà finito, Vue "sostituirà" l'applicazione visualizzata server side con una client side per renderla interattiva. Questa modalità è chiamata [Server-Side Rendering (SSR)](/guide/scaling-up/ssr) e migliora notevolmente le "Core Web Vital metrics" come [Largest Contentful Paint (LCP)](https://web.dev/lcp/).

There are higher-level Vue-based frameworks built on top of this paradigm, such as [Nuxt](https://nuxt.com/), which allow you to develop a fullstack application using Vue and JavaScript.
Esistono Framework che si basano su Vue costruiti su questo paradigma, come [Nuxt](https://nuxt.com/), che fa si che tu possa sviluppare una fullstack application utilizzando Vue e Javascript.

## JAMStack / SSG {#jamstack-ssg}

Server-side rendering can be done ahead of time if the required data is static. This means we can pre-render an entire application into HTML and serve them as static files. This improves site performance and makes deployment a lot simpler since we no longer need to dynamically render pages on each request. Vue can still hydrate such applications to provide rich interactivity on the client. This technique is commonly referred to as Static-Site Generation (SSG), also known as [JAMStack](https://jamstack.org/what-is-jamstack/).
Il rendering lato server può essere eseguito in anticipo se i dati sono statici. Questo significa che noi possiamo pre-renderizzare un intera applicazione in HTML e distribuirla come file statici. Questo migliora le performance dei siti e semplifica visto che non sempre abbiamo bisogno di renderizzare la pagina dinamicamente. Vue può sempre rendere interattive applicazioni mediante il processo di "hydration". Questa tecnica è comunemente chiamata Static-Site Generation (SSG), anche conosciuta come [JAMStack](https://jamstack.org/what-is-jamstack/).

There are two flavors of SSG: single-page and multi-page. Both flavors pre-render the site into static HTML, the difference is that:
Ci sono due tipi di SSG: single-page e multi-page.Tutte e due le tipologie pre-renderizzano il sito in HTML statico, la differenza è la seguente:

- After the initial page load, a single-page SSG "hydrates" the page into an SPA. This requires more upfront JS payload and hydration cost, but subsequent navigations will be faster, since it only needs to partially update the page content instead of reloading the entire page.
- Dopo che la pagina iniziale è caricata , una single-page SSG verrà sostituita con una SPA. Questo richiede un costo in termini di tempo di caricamento e di "hydration", ma dopo di questo le navigazioni successive saranno molto veloci,poiché l'applicazione avrà solo bisogno di aggiornare parzialmente il contenuto della pagina invece di ricaricarla interamente.

- A multi-page SSG loads a new page on every navigation. The upside is that it can ship minimal JS - or no JS at all if the page requires no interaction! Some multi-page SSG frameworks such as [Astro](https://astro.build/) also support "partial hydration" - which allows you to use Vue components to create interactive "islands" inside static HTML.
- Una multi-page SSG caricherà una nuova pagina ogni navigazione. Il lato positivo è che verrà caricato il solo JS necessario - o potrebbe non caricare JS se tutte le pagine caricate non hanno interazioni! Multi framework per la creazione di multi-page SSG come [Astro](https://astro.build/) possiedono il supporto per un "partial hydration" (sostituzione parziale) - questo permette di creare con le componenti Vue delle "zone" interattive all'interno del HTML statico.

Single-page SSGs are better suited if you expect non-trivial interactivity, deep session lengths, or persisted elements / state across navigations. Otherwise, multi-page SSG would be the better choice.
Le applicazioni Single-page SSG è la migliore soluzione se ti aspetti un interazione significativa, gestione della sessione o elementi persistenti / stato applicativo cross navigazione. Altrimenti, le applicazioni multi-page SSG saranno la scelta migliore.

The Vue team also maintains a static-site generator called [VitePress](https://vitepress.dev/), which powers this website you are reading right now! VitePress supports both flavors of SSG. [Nuxt](https://nuxt.com/) also supports SSG. You can even mix SSR and SSG for different routes in the same Nuxt app.
Il team di Vue mantiene anche uno static-site generator chiamato [VitePress](https://vitepress.dev/), su cui è costruito questo sito Web che stai leggendo in questo momento! VitePress supporto tutte e due le tipologie. Anche [Nuxt](https://nuxt.com/) le supporta entrambe. Ogni applicazione Nuxt consente per ogni rotta configurata di decidere quale delle due tipologie utilizzare, SSR e SSG.

## Beyond the Web {#beyond-the-web}
## Oltre al web {#beyond-the-web}

Although Vue is primarily designed for building web applications, it is by no means limited to just the browser. You can:
Sebbene Vue sia progettato principalmente per la creazione di applicazioni web, non è limitato ad esso. Puoi:

- Build desktop apps with [Electron](https://www.electronjs.org/) or [Tauri](https://tauri.studio/en/)
- Build mobile apps with [Ionic Vue](https://ionicframework.com/docs/vue/overview)
- Build desktop and mobile apps from the same codebase with [Quasar](https://quasar.dev/)
- Use Vue's [Custom Renderer API](/api/custom-renderer) to build custom renderers targeting [WebGL](https://troisjs.github.io/) or even [the terminal](https://github.com/vue-terminal/vue-termui)!
- Creare applicazioni desktop con [Electron](https://www.electronjs.org/) o [Tauri](https://tauri.studio/en/)
- Creare applicazioni mobile con [Ionic Vue](https://ionicframework.com/docs/vue/overview)
- Creare applicazioni desktop e mobile dallo stesso codice sorgente con [Quasar](https://quasar.dev/)
- Utilizzare Vue come [Custom Renderer API](/api/custom-renderer) per creare targeting renderer personalizzati [WebGL](https://troisjs.github.io/) o anche per [il terminale](https://github.com/vue-terminal/vue-termui)!