Vue Academy · Lesson

Global Properties and provide/inject in Plugins

app.config.globalProperties.$myPlugin, app.provide() for injection, TypeScript augmentation.

Global Properties and provide/inject in Plugins is a free Vue Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Two Ways to Expose Services

Plugins can share functionality two ways: global properties (the classic Options API style, accessed via this.$x) and provide/inject (the Composition API style). Modern code favors provide/inject; global properties remain useful for Options API codebases.

app.config.globalProperties

app.config.globalProperties.$http = client makes this.$http available in every Options API component. The convention is to prefix with $ to avoid clashing with component data.

import axios from 'axios'

export default {
  install(app, options) {
    const http = axios.create({ baseURL: options.baseURL })
    app.config.globalProperties.$http = http
  }
}

Using $http in Options API

Inside an Options API component, the global property is reachable through this.

export default {
  async created() {
    const res = await this.$http.get('/users')
    this.users = res.data
  },
  data() {
    return { users: [] }
  }
}

Why Composition API Cannot Use this

In <script setup> there is no this bound to the component instance. So this.$http does not work. Composition API instead reads injected values, which is the recommended approach.

<script setup>
// this is undefined here, so this.$http is NOT available
// use inject() instead
</script>

Provide in the Plugin

To support Composition API, the plugin should also app.provide the same service under a key. Provide both: global property for Options API, provide for Composition API.

export const httpKey = Symbol('http')

export default {
  install(app, options) {
    const http = createHttp(options)
    app.config.globalProperties.$http = http // Options API
    app.provide(httpKey, http)               // Composition API
  }
}

Inject in Composition API

Components read the service with inject(httpKey). Using the exported Symbol key avoids string typos and enables typing.

<script setup>
import { inject } from 'vue'
import { httpKey } from './plugins/http'

const http = inject(httpKey)
const res = await http.get('/profile')
</script>

Typed Injection Keys with InjectionKey

For full type safety, type the key with InjectionKey<T>. Then inject infers the correct value type automatically.

import type { InjectionKey } from 'vue'
import type { AxiosInstance } from 'axios'

export const httpKey: InjectionKey<AxiosInstance> =
  Symbol('http')

// inject(httpKey) is now typed as AxiosInstance | undefined

Typing $http with Module Augmentation

To make this.$http type-safe, augment Vue's ComponentCustomProperties interface in a .d.ts file. TypeScript then knows the type of this.$http everywhere.

// shims.d.ts
import type { AxiosInstance } from 'axios'

declare module 'vue' {
  interface ComponentCustomProperties {
    $http: AxiosInstance
  }
}

export {}

Where the Augmentation Lives

The augmentation must be a module (note the trailing export {}) and included by your tsconfig.json. Place it next to your plugin so the types travel with it when published.

// tsconfig.json (excerpt)
{
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
}

Global Properties: Use Sparingly

Global properties are convenient but hidden dependencies — they make components harder to test and reason about. Prefer provide/inject (explicit and tree-scoped). Reserve global properties for truly app-wide, Options-API-friendly utilities.

Supporting Both Worlds

A polished plugin supports both Options and Composition APIs: set a global property AND provide the value, and ship type augmentation for both the global property and a typed injection key. Consumers pick whichever fits their component style.

install(app, options) {
  const service = build(options)
  app.config.globalProperties.$service = service
  app.provide(serviceKey, service)
}

Quick Check

Test your understanding of global properties and provide/inject in plugins.

Recap

You learned exposing plugin services:

app.config.globalProperties.$http powers Options API this.$http
Composition API has no this; it uses inject instead
Provide both a global property and a provided value for full coverage
Type this.$http by augmenting ComponentCustomProperties
Use typed InjectionKey for the inject path

Frequently asked questions

Is the “Global Properties and provide/inject in Plugins” lesson free?

Yes — the full text of “Global Properties and provide/inject in Plugins” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “Global Properties and provide/inject in Plugins”?

app.config.globalProperties.$myPlugin, app.provide() for injection, TypeScript augmentation. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Global Properties and provide/inject in Plugins” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

Plugin Architecture and app.use()
Global Properties and provide/inject in Plugins
Notification and Toast Plugin Example
Publishing and Typing Vue Plugins

← Back to Vue Academy