Vue Academy · Lesson

Global Properties and provide/inject in Plugins

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

Lesson 2 of 413 steps

Global Properties and provide/inject in Plugins is a free Vue Academy lesson on CoddyKit. This is lesson 2 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, and your progress syncs across the web and the CoddyKit app. The Vue Academy course includes 4 lessons in total.

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.

Answer it in the interactive lesson

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

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 42
Lessons: 156

Start learning free View the full course

Frequently Asked Questions

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

Yes — any 3 lessons of the Vue Academy learning path, including “Global Properties and provide/inject in Plugins”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Vue Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.

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