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:

Vue.js logo over a dark, textured purple background. The article discusses using defineExpose and in Vue 3 to enhance component interaction and enable dynamic theming.

defineExpose and <style vars> in Vue 3 for component interaction and theming

Simplify component interaction and dynamic theming in Vue 3 with defineExpose and for better control and flexibility.

Clara Ekekenta
Nov 7, 2024 ⋅ 8 min read
How to set up TypeScript with Node.js and Express

How to set up TypeScript with Node.js and Express

Explore how to integrate TypeScript into a Node.js and Express application, leveraging ts-node, nodemon, and TypeScript path aliases.

Aman Mittal
Nov 7, 2024 ⋅ 10 min read
Cover image for es-toolkit, a Lodash alternative

es-toolkit, a Lodash alternative

es-toolkit is a lightweight, efficient JavaScript utility library, ideal as a modern Lodash alternative for smaller bundles.

Rishi Purwar
Nov 6, 2024 ⋅ 5 min read
JS Logo Over Blue Background

The ResizeObserver API: A tutorial with examples

The use cases for the ResizeObserver API may not be immediately obvious, so let’s take a look at a few practical examples.

Kevin Drum
Nov 5, 2024 ⋅ 9 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