¿Alguien sabe cómo agregar una variable global en Vue 3?

en Vue 2 usamos esto en el main.js archivo:

Vue.prototype.$myGlobalVariable = globalVariable

El reemplazo más directo es app.config.globalProperties. Ver:

https://vuejs.org/api/application.html#app-config-globalproperties

Entonces:

Vue.prototype.$myGlobalVariable = globalVariable

se convierte en:

const app = createApp(RootComponent)
app.config.globalProperties.$myGlobalVariable = globalVariable

Esto está enfocado a una aplicación particular en lugar de ser global como lo fue con Vue.prototype. Esto es por diseño, todas las opciones de configuración ‘globales’ ahora están en el ámbito de una aplicación.

El RFC relevante está aquí:

https://github.com/vuejs/rfcs/blob/master/active-rfcs/0009-global-api-change.md

Propiedades añadidas a globalProperties estará disponible a través de la instancia del componente para todos los componentes dentro de la aplicación. Entonces, si está utilizando la API de opciones, podrá acceder a ellas usando this.$myGlobalVariableal igual que podrías con Vue.prototype. También estarán disponibles en la plantilla sin la this.p.ej {{ $myGlobalVariable }}.

Si está utilizando la API de composición, aún podrá usar estas propiedades dentro de la plantilla, pero no tendrá acceso a la instancia del componente dentro setuppor lo que no se podrá acceder a estas propiedades allí.

Mientras que los hacks que involucran getCurrentInstance() se puede utilizar para acceder globalProperties dentro setupesos hacks implican el uso de API no documentadas y no son el enfoque recomendado.

En cambio, a nivel de aplicación provide/inject (también discutido en ese RFC) se puede utilizar como una alternativa a Vue.prototype:

const app = createApp(RootComponent)
app.provide('myGlobalVariable', globalVariable)

En el componente descendiente, se puede acceder a esto usando inject. por ejemplo, con <script setup>:

<script setup>
import { inject } from 'vue'
const myGlobalVariable = inject('myGlobalVariable')
</script>

O con un explícito setup función:

import { inject } from 'vue'

export default {
  setup() {
    const myGlobalVariable = inject('myGlobalVariable')

    // Expose it to the template, if required
    return {
      myGlobalVariable
    }
  }
}

O con la API de Opciones:

export default {
  inject: ['myGlobalVariable']
}

Documentos: https://vuejs.org/api/application.html#app-provide

La idea aquí es que el componente pueda declarar explícitamente la propiedad en lugar de heredarla por arte de magia. Eso evita problemas como colisiones de nombres, por lo que no es necesario utilizar un $ prefijo. También puede ayudar a aclarar de dónde proviene exactamente una propiedad.

Es común para el inject función para ser envuelto en un componible. por ejemplo, el useRoute componible expuesto por Vue Router es solo un envoltorio inject.

Además de globalProperties y provide/injecthay varias otras técnicas que podrían usarse para resolver los mismos problemas que Vue.prototype. Por ejemplo, módulos ES, tiendas o incluso mixins globales. Estas no son necesariamente respuestas directas a la pregunta específica publicada aquí, pero he entrado en más detalles describiendo los diversos enfoques en:

https://skirtles-code.github.io/vue-examples/patterns/global-properties.html

El enfoque que prefiera dependerá de sus circunstancias.

Cómo agregar una variable global usando Vue 3 y vue-cli (o Vite)

Nota: Puede soltar el signo de dólar de su $globalVariable y solo usa globalVariableal igual que en la documentación.

Inicialmente, su archivo main.js se parece a esto (agregando enrutador para un caso de uso común):

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

createApp(App).use(router).mount('#app')

Para usar agregar la variable global usando Vue 3 y el vue-cli o Vite:

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

// 1. Assign app to a variable
let app = createApp(App)

// 2. Assign the global variable before mounting
app.config.globalProperties.globalVar="globalVar"

// 3. Use router and mount app
app.use(router).mount('#app')

Luego, para acceder a las variables en componentes como este:

<script>
export default {
    data() {
        return {
            myVar: this.globalVar
        }
    }
}
</script>

como en la plantilla como esta:

<template>
  <h1>{{ globalVar }}</h1>
</template>

Y eso es. ¡Feliz codificación!

Acerca de las variables globales y la API de composición

De acuerdo con la muy parte inferior de la respuesta de samayo en este postlas variables globales solo están disponibles en la API de opciones.

Citando la parte inferior de su respuesta:

Nota: Esto es solo para la API de opciones. Evan You (creador de Vue) dice: “config.globalProperties está pensada como una vía de escape para replicar el comportamiento de Vue.prototype. En las funciones de configuración, simplemente importe lo que necesita o use explícitamente proporcionar/inyectar para exponer las propiedades en la aplicación.

recomiendo usar provide/inject enfoque de la siguiente manera:

en principal.js:

import {createApp} from 'vue'

let app=createApp({
  provide:{
    globalVariable:123
  }

}).$mount('#app')

en algún componente hijo o nieto hacer:

export default{
 name:'some-compo',
 inject:['globalVariable'],
 //then access this.globalVariable as property in you component
...
}

para la composición de la API y la configuración del script:

 import { inject } from 'vue'
 
 let globalVar=inject('globalVariable')

Si es posible, debe usar importaciones o proporcionar/inyectar. Otra forma de definir variables/funciones globales y usarlas sería usando globalProperties (aunque esto parece considerarse más como un antipatrón). Pero si una biblioteca que usa usa globalProperties, entonces puede usarla así. Esto también funciona con funciones globales.

const app = Vue.createApp({})
app.config.globalProperties.$http = () => {} // global function
app.config.globalProperties.$globalVariable="Jimmy" // global variable

1. Uso de la API de opciones

mounted() {
  console.log(this.$globalVariable)
}

2. Usando el método de configuración

<script setup>
    import { getCurrentInstance } from 'vue'

    const app = getCurrentInstance()
    const progressBar = app.appContext.config.globalProperties.$globalVariable

    console.log(this.$globalVariable)
</script>

Para aquellos de ustedes que están confundidos acerca de cómo acceder globalProperties en el setup() método, puede utilizar getCurrentInstance() como en la siguiente documentación.

https://v3.vuejs.org/api/composition-api.html#getcurrentinstance

Vista 3:

import { getCurrentInstance } from "vue";

const { proxy } = getCurrentInstance();

“proxy” contendrá el valor de globalProperties. Por ejemplo:

app.config.globalProperties.$toast = {...}

y luego:

proxy.$toast.success()

En mi caso, tuve que crear una var global y obtener los datos de un script.
Se utiliza proporcionar e inyectar:

En main.js:

    import { createApp } from 'vue'
    import App from './App.vue'
    const app = createApp(App);
    app.provide('message',document.querySelector('script[name="nameSCRIPT"]').innerHTML.split('=').slice(1).join('=').slice(1,-1));
    app.mount('#app')

En index.html:

 <script name="nameSCRIPT">nameSCRIPT="HELLO"</script>

En componente hijo:

    inject:['message'],
    mounted(){
    console.log(this.message)
  },