API dell'Applicazione

createApp()

Crea un'istanza dell'applicazione.

Tipo

function createApp(rootComponent: Component, rootProps?: object): App

Dettagli
Il primo argomento è il componente root. Il secondo argomento opzionale sono le props da passare al componente root.

Esempio

Con componente root inline:

import { createApp } from 'vue'

const app = createApp({
  /* opzioni del componente root */
})

Con componente importato:

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

Guarda anche Guida - Creare un'Applicazione Vue

createSSRApp()

Crea un'istanza dell'applicazione in modalità SSR Hydration. L'uso è esattamente lo stesso di createApp().

app.mount()

Monta l'istanza dell'applicazione in un elemento contenitore.

Tipo

interface App {
  mount(rootContainer: Element | string): ComponentPublicInstance
}

Dettagli
L'argomento può essere sia un vero elemento DOM sia un selettore CSS (verrà utilizzato il primo elemento corrispondente trovato). Restituisce l'istanza del componente radice.
Se il componente presenta un template o una render function, sostituirà eventuali nodi DOM esistenti all'interno dell'elemento contenitore. Altrimenti, se il compilatore a runtime è disponibile, l'innerHTML dell'elemento contenitore verrà utilizzato come template.
In modalità SSR hydration, farà un hydrate dei nodi DOM esistenti all'interno dell'elemento contenitore. Se ci sono delle incongruenze, i nodi DOM esistenti verranno modificati per farli coincidere con l'output previsto.
Per ogni istanza dell'app, mount() può essere chiamato solo una volta.

Esempio

import { createApp } from 'vue'
const app = createApp(/* ... */)

app.mount('#app')

Può anche essere montato su un vero elemento DOM:

app.mount(document.body.firstChild)

app.unmount()

Smonta un'istanza di un'applicazione montata, attivando gli hook del ciclo di vita di unmount per tutti i componenti presenti nell'albero dei componenti dell'applicazione.

Tipo
ts
```
interface App {
  unmount(): void
}
```

app.component()

Registra un componente globale se viene fornito sia un nome sotto forma di stringa che una definizione di componente, o ne recupera uno già registrato se viene passato solo il nome.

Tipo

interface App {
  component(name: string): Component | undefined
  component(name: string, component: Component): this
}

Esempio

import { createApp } from 'vue'

const app = createApp({})

// registra un oggetto con le option
app.component('my-component', {
  /* ... */
})

// recupera un componente registrato
const MyComponent = app.component('my-component')

Guarda anche Registrare un componente

app.directive()

Registra una direttiva personalizzata globale se viene fornito sia un nome sotto forma di stringa che una definizione di direttiva, o ne recupera una già registrata se viene passato solo il nome.

Tipo

interface App {
  directive(name: string): Directive | undefined
  directive(name: string, directive: Directive): this
}

Esempio

import { createApp } from 'vue'

const app = createApp({
  /* ... */
})

// registra la direttiva tramite un oggetto
app.directive('my-directive', {
  /* hook della direttiva personalizzata */
})

// registra la direttiva tramite una arrow function
app.directive('my-directive', () => {
  /* ... */
})

// recupera una direttiva registrata
const myDirective = app.directive('my-directive')

Guarda anche Le Direttive Personalizzate

app.use()

Installa un plugin.

Tipo

interface App {
  use(plugin: Plugin, ...options: any[]): this
}

Dettagli
Si aspetta il plugin come primo argomento e, se presenti, le opzioni del plugin come secondo argomento.
Il plugin può essere un oggetto con un metodo install(), oppure una semplice funzione che sarà utilizzata come metodo install(). Le opzioni (secondo argomento di app.use()) verranno passate al metodo install() del plugin.
Quando app.use() viene chiamato sullo stesso plugin più volte, il plugin verrà installato solo una volta.

Esempio

import { createApp } from 'vue'
import MyPlugin from './plugins/MyPlugin'

const app = createApp({
  /* ... */
})

app.use(MyPlugin)

Guarda anche I Plugin

app.mixin()

Applica un mixin globale (limitato all'applicazione). Un mixin globale applica le options che contiene a ogni istanza di componente nell'applicazione.

Non raccomandato

I mixin sono supportati in Vue 3 principalmente per retro-compatibilità, a causa del loro uso diffuso nelle librerie dell'ecosistema. L'uso dei mixin, specialmente dei mixin globali, dovrebbe essere evitato nel codice dell'applicazione.

Per il riutilizzo della logica, al loro posto usare I Composables.

Tipo

interface App {
  mixin(mixin: ComponentOptions): this
}

app.provide()

Fornisce un valore che può essere iniettato in tutti i componenti discendenti all'interno dell'applicazione.

Tipo

interface App {
  provide<T>(key: InjectionKey<T> | symbol | string, value: T): this
}

Dettagli
Si aspetta una chiave per l'injection come primo argomento e il valore fornito come secondo. Restituisce l'istanza dell'applicazione stessa.

Esempio

import { createApp } from 'vue'

const app = createApp(/* ... */)

app.provide('message', 'ciao')

All'interno di un componente nell'applicazione:

import { inject } from 'vue'

export default {
  setup() {
    console.log(inject('message')) // 'ciao'
  }
}

export default {
  inject: ['message'],
  created() {
    console.log(this.message) // 'ciao'
  }
}

Guarda anche

app.runWithContext()

Esegue una callback con l'attuale app come context di injection.

Tipo

interface App {
  runWithContext<T>(fn: () => T): T
}

Dettagli
Si aspetta una funzione di callback e la esegue immediatamente. Durante la chiamata sincrona della callback, le chiamate a inject() sono in grado di cercare injection dai valori forniti dall'app attuale, anche quando non c'è un'istanza di componente attiva. Verrà restituito anche il valore proveniente dalla callback.

Esempio

import { inject } from 'vue'

app.provide('id', 1)

const injected = app.runWithContext(() => {
  return inject('id')
})

console.log(injected) // 1

app.version

Fornisce la versione di Vue con cui è stata creata l'applicazione. Questo è utile all'interno dei plugin, dove potresti aver bisogno di logica condizionale basata su diverse versioni di Vue.

Tipo
ts
```
interface App {
  version: string
}
```

Esempio

Esecuzione di un controllo sulla versione all'interno di un plugin:

export default {
  install(app) {
    const version = Number(app.version.split('.')[0])
    if (version < 3) {
      console.warn('Questo plugin richiede Vue 3')
    }
  }
}

Guarda anche API Globali - version

app.config

Ogni istanza dell'applicazione espone un oggetto config che contiene le impostazioni di configurazione per quell'applicazione. Puoi modificare le sue proprietà (documentate di seguito) prima di montare la tua applicazione.

import { createApp } from 'vue'

const app = createApp(/* ... */)

console.log(app.config)

app.config.errorHandler

Assegna un handler globale per gli errori non intercettati che si propagano dall'interno dell'applicazione.

Tipo

interface AppConfig {
  errorHandler?: (
    err: unknown,
    instance: ComponentPublicInstance | null,
    // `info` è una specifica informazione di errore di Vue,
    // ad esempio, in quale hook del ciclo di vita è stato generato l'errore
    info: string
  ) => void
}

Dettagli
Il gestore (handler) degli errori riceve tre argomenti: l'errore, l'istanza del componente che ha generato l'errore e una stringa di informazione che specifica il type della fonte dell'errore.
Può catturare errori dalle seguenti fonti:
- Rendering dei componenti
- Gestori di eventi (Event handlers)
- Hook del ciclo di vita
- Funzione setup()
- Watchers
- Hook delle direttive personalizzate
- Hook delle transizioni

Esempio

app.config.errorHandler = (err, instance, info) => {
  // gestisci l'errore, ad es. segnalalo a un servizio
}

app.config.warnHandler

Assegna un handler personalizzato per gli avvisi a runtime di Vue.

Tipo

interface AppConfig {
  warnHandler?: (
    msg: string,
    instance: ComponentPublicInstance | null,
    trace: string
  ) => void
}

Dettagli
Il gestore (handler) degli avvisi riceve il messaggio di avviso come primo argomento, l'istanza del componente di origine come secondo argomento e una stringa di trace del componente come terzo.
Può essere utilizzato per filtrare avvisi specifici per ridurre la verbosità della console. Tutti gli avvisi di Vue dovrebbero essere gestiti durante lo sviluppo, l'uso è consigliato solo durante le sessioni di debug per concentrarsi su avvisi specifici tra i tanti e dovrebbe essere rimosso una volta terminato il debug.
TIP
Gli avvisi funzionano solo durante lo sviluppo, questa configurazione, quindi, viene ignorata in modalità produzione.

Esempio

app.config.warnHandler = (msg, instance, trace) => {
  // `trace` è la traccia della gerarchia dei componenti
}

app.config.performance

Imposta questo valore su true per abilitare il tracing delle prestazioni di init, compile, rendering e patch del componente nel pannello performance/timeline degli strumenti per sviluppatori del browser. Funziona solo in modalità di sviluppo e nei browser che supportano l'API performance.mark.

Type: boolean
Guarda anche Guida - Performance

app.config.compilerOptions

Configura le opzioni del compilatore a runtime. I valori impostati su questo oggetto saranno passati al compilatore di template nel browser e influenzeranno ogni componente nell'app configurata. Nota che puoi anche sovrascrivere queste opzioni su base componente utilizzando l'opzione compilerOptions.

Importante

Questa opzione di configurazione viene rispettata solo quando si utilizza la build completa (cioè la vue.js standalone che può compilare i template nel browser). Se, invece, stai usando la build solo per il runtime con un setup di build, le opzioni del compilatore devono essere passate a @vue/compiler-dom tramite le configurazioni degli strumenti di build.

Per vue-loader: passa dalle opzioni del loader compilerOptions. Vedi anche come configurarlo in vue-cli.
Per vite: passa dalle opzioni di @vitejs/plugin-vue.

app.config.compilerOptions.isCustomElement

Specifica un metodo di controllo per riconoscere gli elementi personalizzati nativi (native custom elements).

Type: (tag: string) => boolean
Dettagli
Dovrebbe restituire true se il tag deve essere trattato come un elemento personalizzato nativo. Se trova un tag corrispondente, Vue lo renderizzerà come un elemento nativo invece di tentare di risolverlo come un componente Vue.
Non c'è bisogno di verificare i tag nativi HTML e SVG tramite questa funzione - il parser di Vue li riconosce automaticamente.

Esempio

// tratta tutti i tag che iniziano con 'ion-' come elementi personalizzati
app.config.compilerOptions.isCustomElement = (tag) => {
  return tag.startsWith('ion-')
}

Guarda anche Vue e i Web Components

app.config.compilerOptions.whitespace

Adegua il comportamento della gestione degli spazi bianchi nel template.

Type: 'condense' | 'preserve'
Default: 'condense'
Dettagli
Vue rimuove/condensa i caratteri degli spazi bianchi nei template per produrre un output compilato più efficiente. La strategia predefinita è "condense", con il seguente comportamento:
1. I caratteri di spazio bianco iniziali/finali all'interno di un elemento sono condensati in un singolo spazio.
2. I caratteri di spazio bianco tra gli elementi che contengono nuove righe vengono rimossi.
3. I caratteri di spazio bianco consecutivi nei nodi di testo sono condensati in un singolo spazio.
Impostare questa opzione su 'preserve' disabiliterà (2) e (3).

Esempio

app.config.compilerOptions.whitespace = 'preserve'

app.config.compilerOptions.delimiters

Modifica i delimitatori utilizzati per l'interpolazione del testo all'interno del template.

Type: [string, string]
Default: ['{{', '}}']
Dettagli
Tipicamente viene utilizzato per evitare conflitti con framework server side che utilizzano anche essi la sintassi mustache.

Esempio

// Delimitatori modificati nello stile delle template string di ES6
app.config.compilerOptions.delimiters = ['${', '}']

app.config.compilerOptions.comments

Modifica il trattamento dei commenti HTML nei template.

Type: boolean
Default: false
Dettagli
Di default, Vue rimuoverà i commenti in produzione. Impostare questa opzione su true, costringerà Vue a conservare i commenti anche in produzione. I commenti sono sempre conservati durante lo sviluppo. Questa opzione viene utilizzata tipicamente quando Vue viene usato con altre librerie che si basano sui commenti HTML.

Esempio

app.config.compilerOptions.comments = true

app.config.globalProperties

Un oggetto che può essere utilizzato per registrare proprietà globali accessibili su qualsiasi istanza di componente all'interno dell'applicazione.

Tipo

interface AppConfig {
  globalProperties: Record<string, any>
}

Dettagli
Questo sostituisce il Vue.prototype di Vue 2, che non è più presente in Vue 3. Come per qualsiasi cosa globale, dovrebbe essere utilizzato con parsimonia.
Se una proprietà globale entra in conflitto con una proprietà di un componente, la proprietà del componente avrà la priorità.
Usage
js
```
app.config.globalProperties.msg = 'ciao'
```
Ciò rende msg disponibile all'interno di qualsiasi template di componente nell'applicazione, e anche su this di qualsiasi istanza di componente:
js
```
export default {
  mounted() {
    console.log(this.msg) // 'ciao'
  }
}
```
Guarda anche Guida - Augmenting Global Properties

app.config.optionMergeStrategies

Un oggetto per definire strategie di merging delle opzioni dei componenti personalizzati.

Tipo

interface AppConfig {
  optionMergeStrategies: Record<string, OptionMergeFunction>
}

type OptionMergeFunction = (to: unknown, from: unknown) => any

Dettagli
Alcuni plugin / librerie aggiungono il supporto per le opzioni dei componenti personalizzati (iniettando dei mixin globali). Queste opzioni potrebbero richiedere una speciale logica di merging quando la stessa opzione deve essere "unita" usando molteplici fonti (ad es. mixin o ereditarietà del componente).
Una funzione per una strategia di merge può essere registrata per una custom option assegnandola all'oggetto app.config.optionMergeStrategies utilizzando il nome dell'opzione come chiave.
La funzione per il merge riceve il valore di quell'opzione definito sulle istanze padre e figlio come primo e secondo argomento, rispettivamente.

Esempio

const app = createApp({
  // opzione del componente (from self)
  msg: 'Vue',
  // opzione da un mixin
  mixins: [
    {
      msg: 'Ciao '
    }
  ],
  mounted() {
    // opzioni unite ed esposte su this.$options
    console.log(this.$options.msg)
  }
})

// definisce una strategia di merge personalizzata per `msg`
app.config.optionMergeStrategies.msg = (parent, child) => {
  return (parent || '') + (child || '')
}

app.mount('#app')
// logga 'Ciao Vue'

Guarda anche Istanza del Componente - $options

Modifica questa pagina su GitHub

API dell'Applicazione ​

createApp() ​

createSSRApp() ​

app.mount() ​

app.unmount() ​

app.component() ​

app.directive() ​

app.use() ​

app.mixin() ​

app.provide() ​

app.runWithContext() ​

app.version ​

app.config ​

app.config.errorHandler ​

app.config.warnHandler ​

app.config.performance ​

app.config.compilerOptions ​

app.config.compilerOptions.isCustomElement ​

app.config.compilerOptions.whitespace ​

app.config.compilerOptions.delimiters ​

app.config.compilerOptions.comments ​

app.config.globalProperties ​

app.config.optionMergeStrategies ​

API dell'Applicazione

createApp()

createSSRApp()

app.mount()

app.unmount()

app.component()

app.directive()

app.use()

app.mixin()

app.provide()

app.runWithContext()

app.version

app.config

app.config.errorHandler

app.config.warnHandler

app.config.performance

app.config.compilerOptions

app.config.compilerOptions.isCustomElement

app.config.compilerOptions.whitespace

app.config.compilerOptions.delimiters

app.config.compilerOptions.comments

app.config.globalProperties

app.config.optionMergeStrategies