Global Properties

It's possible to add global properties to your Vue app in both Vue 2 and Vue 3:

// Vue 3
const app = createApp({});
app.config.globalProperties.$myGlobal = 'globalpropertiesftw';

// Vue 2
Vue.prototype.$myGlobal = 'globalpropertiesftw';

I would recommend prefixing any global properties with a $.

This helps prevent naming conflicts with other variables, and it's a standard convention that makes it easy to spot when a value is global.

This global property can be accessed directly off of any component when using the Options API:

computed: {
  getGlobalProperty() {
    return this.$myGlobal;
  },
},

Why can't this be used with the composition API?

Because the composition API is designed to be context-free and has no access to this.

Instead, you can create a simple composable to access your globals:

<script setup>
import useGlobals from './useGlobals';
const { $myGlobal } = useGlobals();
</script>

// useGlobals.js
export default () => ({
  $myGlobal: 'globalpropertiesftw',
});