2023-04-26
1763
#vue
Nwose Lotanna
4801
Apr 26, 2023 ⋅ 6 min read

Accessing Vue.js properties globally with globalProperties

Nwose Lotanna Web Developer and Writer

Recent posts:

Frontend Devs Aren't Lazy, They're Burnt Out

Frontend developers are burned out, not lazy

Shipping modern frontends is harder than it looks. Learn the hidden taxes of today’s stacks and practical ways to reduce churn and avoid burnout.

Shalitha Suranga
Sep 15, 2025 ⋅ 4 min read

Can native web APIs replace custom components in 2025?

Learn how native web APIs such as dialog, details, and Popover bring accessibility, performance, and simplicity without custom components.

Daniel Schwarz
Sep 12, 2025 ⋅ 9 min read
too many tools: How to manage frontend tool overload

Too many tools: How to manage frontend tool overload

Read about how the growth of frontend development created so many tools, and how to manage tool overload within your team.

Shalitha Suranga
Sep 11, 2025 ⋅ 12 min read
shruti kapoor the modern ai stack

What you actually need to build and ship AI-powered apps in 2025

Discover what you actually need to build and ship AI-powered apps in 2025, with tips for which tools to choose and how to implement them.

Shruti Kapoor
Sep 10, 2025 ⋅ 10 min read
View all posts

4 Replies to "Accessing Vue.js properties globally with <code>globalProperties</code>"

  1. The prototype member is not provided by Vue, it’s a basic JS language pattern. What this post suggests is generally called “monkey patching”. It’s quite convenient, but might break future implementations of the Vue object.

    If you really needed this you could consider namespacing: Extend the prototype by an object with a unique name which is unlikely to get implemented by others. Then add your extensions inside that object.

  2. Fully agree with this. Rather than saturating vue’s prototype with a heap of clutter, choose a single $ prefixed namespace and then dump all your extensions under that.

    EG:
    vue.prototype.$myextension = {}
    vue.prototype.$myextension.$axios = …
    etc

    Otherwise, even with namespacing if you saturate the top level of the prototype, you’re bound to run into a collision eventually.

  3. Hi, this is very interesting. I have a question. I am developing dynamic content via templates at runtime.

    What this does is to receive any template, however those with bindings don’t work as it gives a ref error. How can I make this be able to see the ‘global’ state in the ‘$data’ attribute. For example my template might have {{ number }}, currently im getting number undefined. So I just want the component to have access to the global state to pick this up.

    Vue.component(“renderstring”, {
    props: {
    string: {
    required: true,
    type: String
    }
    },
    render(h) {
    const self = this
    console.log(this.$data)
    const render = {
    template: “” + this.string + “”,
    }
    return h(render)
    }
    })

    Thanks a lot. #FoundThisCodeOnTheNet

Leave a Reply