How do you add global properties or config? | Interview Question

Q: How do you add global properties or config?

**Target Audience:** Vue developers setting up an app's entry file, or migrating `Vue.prototype` code from Vue 2. **Difficulty:** Medium > **How to read this doc:** Plain language first, then `📌 Interview term:` callouts. The runtime output below came from bundling the example (`main.js` plus three SFCs) with esbuild and running it in jsdom on Vue 3.5.44; the TypeScript errors came from `vue-tsc` 3.3.13 with `strict: true`. ## 1. Why This Even Matters — A Story First Think of an office building. Some things belong to everyone: the building address on the letterhead, the fire alarm, the front desk that takes every lost-property report. You do not want each team to print its own letterhead or run its own alarm. A Vue app has the same needs. A price formatter every template uses, the API base URL every request needs, and one place that hears about every crash. Vue 3 gives each app instance a small "building services" panel for this: `app.config`, `app.config.globalProperties` and `ap

The problem

Question presented to candidate: "We want a $formatPrice helper usable in every template, the API base URL available to every component, and one place that logs all uncaught component errors. How do you set up global properties and app-wide config in Vue 3, and how does that work with <script setup> and TypeScript?"

What a strong answer should cover:

app.config.globalProperties.$x = ... makes $x available as this.$x and in every template; it replaces Vue 2's Vue.prototype.$x.
In <script setup> there is no this, so script code should get shared values from app.provide() + inject(); reaching through getCurrentInstance() works but is discouraged.
A component's own data, props or methods shadow a global property of the same name.
Global properties need a TypeScript augmentation of ComponentCustomProperties in a module file (with export {}).
app.config also holds errorHandler, warnHandler (dev only), performance, idPrefix, throwUnhandledErrorInProduction and compilerOptions (runtime compiler builds only).
Everything is per app instance, set before mount(); in SSR it must be set per request.

Clarifying questions expected:

"Is the codebase Options API, <script setup>, or both? That decides between globalProperties and provide."
"Is there SSR? App config then has to be created per request."

Code / implementation expected: Yes — a main.ts that sets a global property, an app-level provide and an error handler, and a typed augmentation.

global-properties

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Vue developers setting up an app's entry file, or migrating Vue.prototype code from Vue 2. Difficulty: Medium

How to read this doc: Plain language first, then 📌 Interview term: callouts. The runtime output below came from bundling the example (main.js plus three SFCs) with esbuild and running it in jsdom on Vue 3.5.44; the TypeScript errors came from vue-tsc 3.3.13 with strict: true.

1. Why This Even Matters — A Story First

Think of an office building. Some things belong to everyone: the building address on the letterhead, the fire alarm, the front desk that takes every lost-property report. You do not want each team to print its own letterhead or run its own alarm.

A Vue app has the same needs. A price formatter every template uses, the API base URL every request needs, and one place that hears about every crash. Vue 3 gives each app inst

The solution is hidden so you can try first

9 min read · 10 sections

Read the code

App-wide setup: globalProperties, app.provide, errorHandler and warnHandler

import { createApp, h, nextTick } from "vue";
import OptionsCard from "./OptionsCard.vue";
import SetupCard from "./SetupCard.vue";
import Boom from "./Boom.vue";

const app = createApp({ render: () => [h(OptionsCard, { cents: 1250 }), h(SetupCard, { cents: 99 }), h(Boom)] });

// 1. Global properties: reachable as this.x and in every template.
app.config.globalProperties.$formatPrice = (cents) => `$${(cents / 100).toFixed(2)}`;
app.config.globalProperties.$appName = "Shop";
app.config.globalProperties.title = "global title"; // shadowed by the component data below

// 2. App-level provide: the Composition API friendly way to share config.
app.provide("currency", "USD");

// 3. Central error and warning hooks.
app.config.errorHandler = (err, instance, info) => {
  console.log(`[errorHandler] ${err.message} | info: ${info} | component: ${instance?.$options.__file}`);
};
app.config.warnHandler = (msg) => console.log(`[warnHandler] ${msg}`);

app.mount("#app");
await nextTick();
console.log("DOM:", document.querySelector("#app").textContent);
document.getElementById("boom").click();
await nextTick();

Typing a global property for templates and this (vue-tsc checked)

// global-properties.d.ts: the export {} makes this an augmentation, not a replacement of 'vue'
export {};

declare module "vue" {
  interface ComponentCustomProperties {
    $formatPrice: (cents: number) => string;
  }
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.