having difficulty reaching the globalProperties in vuejs v3

My latest project involves working with the Quasar framework in combination with vuejs 2

One of the key files in my project is located at /src/boot/gfunc.js

import Vue from 'vue'
Vue.prototype.$module = 'foo';

Within /quasar.conf.js

 boot: ['gfunc'],

And in /src/pages/Foo.vue

beforeCreate : function () {
    console.log(this.$module);
}

Everything is functioning as expected, and I can see foo in the console

Recently, I decided to upgrade to vuejs 3 while still using the Quasar framework. I discovered that Vue.prototype has been replaced by app.config.globalProperties [Doc]

Here are the changes I made:

Updating /src/boot/gfunc.js according to the [documentation]

import { createApp } from 'vue'
import Vue from 'vue'
const app = createApp({})
app.config.globalProperties.$module = 'foo';

And in /quasar.conf.js

 boot: ['gfunc'],

Also, in /src/pages/Foo.vue

beforeCreate : function () {
    console.log(this.$module);
}

However, this time it's not working as expected. The console is showing undefined

Answer №1

Encountering the same issue with axios in my project. Previously, in version 2, I accessed it like this:

this._vm.$http.get(url)

However, in version 3, I'm unsure of the correct approach.

=========================

Here is how I resolved my problem:

Within the file where I initialized the app and created a app.config.globalProperties.$http variable, I also placed the http instance inside the store, like so:

export default async ({ app, store }) => {
  // your logic

  app.config.globalProperties.$http = http
  store.$http = http
}

When using this._vm.$http in the file, I now use this.$http, removing the _vm part.

I hope this solution proves helpful to you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be the reason for ng-init failing to activate the $watch listener?

When I run the code in my application, there are instances where ng-init fails to trigger the $watch function. Any suggestions on how to fix this? HTML <div ng-controller="MyCtrl"> <p ng-init="stages = 'coco'">{{x}}</p> < ...

Delivering Background Videos with Node.JS

Apologies if my question seems off base or confusing, as I am not very knowledgeable in the world of nodejs. I have been comfortable using just plain PHP and Apache for a while until I discovered ZURB Foundation's stack with Handlebars and SASS, along ...

What is causing the lack of rendering in a React component after modifying the state?

Let me show you the compressed version of my code for a quick look const PropertiesList: FC = (estatesObject) => { const [estates, setEstates] = useState(Object.values(estatesObject)) const filterEstatesUp = () => { // sorting an arr ...

What causes a significant influx of packages each time I execute the command `npm install`?

https://i.sstatic.net/a3BxV.png https://i.sstatic.net/dcVXS.png Could this be related to my overall package.json file? ...

Using React.js to dynamically display or hide elements generated within a component

I'm currently working on a project where I need to dynamically generate form fields based on certain criteria. Specifically, I want to hide some fields and only show them when other specific conditions are met, a common requirement in form designs. Fo ...

Why don't I need to include an onload event to execute the setInterval() method within the script tag?

Hey there! I'm diving into the world of Javascript and I've come across this interesting code that changes an image every four seconds. Surprisingly, it's working perfectly fine even though I didn't include an onload event to execute th ...

Discover the `.next/server` feature on Vercel - a platform where it seamlessly operates unlike on Netlify

Having trouble accessing .next/server on Vercel when running the build:rss script: { "export": "next export", "build": "next build && npm run export && npm run build:rss", "build:rss": &q ...

Is the function failing to generate an input field?

Trying to implement a function that triggers an input field to appear upon clicking an element using the onclick event. Let's take a look at the code below. <!DOCTYPE html> <html> <body> <button onclick="createMessage()">New ...

Experimenting with altering the heights of two Views using GestureHandler in React Native

I am currently working on a project where I need to implement height adjustable Views using React Native. One particular aspect has been causing me some trouble. I'm trying to create two stacked Views with a draggable line in between them so that the ...

Leveraging batchWriteItem with dynamodb

I am trying to utilize batchWriteItem in my DynamoDB to add data to two tables: candidate table and user table. The formatted query is shown below: var user = { userid: usrid, role: 'candidate', password: vucrypt.encryptp ...

What is the best way to access a nested promise element in Protractor?

I've recently put together a function in protractor that I'd like to share: function findChildElementByText(parentElement, tagName, textToSearch) { return parentElement.all(by.tagName(tagName)) .then((items) => { items.map( item ...

What is the process for making a custom Radio-Button and Checkbox div mandatory?

I stumbled upon a creative way to design custom and accessible Radio- and Checkbox-Buttons by using divs and the aria role="radio" recommended by W3C. Check out the solution here <div role="radiogroup" aria-labelledby="group_label_1" id="rg1"> & ...

Guide on sending a PUT request using express.js

Currently delving into node.js and have a query regarding PUT requests I'm able to create an object and see it in the URL. However, I'm unsure of how to write a request to edit it - such as changing the price of a vehicle. Any guidance on writin ...

What is the best way to scale down my entire webpage to 65%?

Everything looks great on my 1920x1080 monitor, but when I switch to a 1024x768 monitor, the content on my webpage becomes too large. I've been manually resizing with CTRL+Scroll to reduce it to 65%, which works fine. Is there a code solution using CS ...

The rotation of Google Maps always returns to its default position when I open the map information window by clicking on it

I have successfully implemented a Google Map with tilt and heading functionality, allowing the map to rotate horizontally. However, I am facing an issue where clicking on a marker resets the map back to its original position. You can view the map by follo ...

When utilizing "Koa-Rewrite," an AssertionError occurs stating that app.use(rewrite) necessitates a generator function

I am currently working with Koa@1 and koa-rewrite@1 to implement a specific functionality. rewritelogic.js const rewrite = require('koa-rewrite'); function rewriteLogic(){ rewrite('/english/experience/dev1', '/english/experienc ...

Implementing a select all checkbox feature in VueJS using a loop

I have a situation where I am displaying data in a table through a loop. The code looks good, but I am encountering an error in my methods saying 'page is not defined'. Can anyone help me understand how to properly define it? Here is the table s ...

ES6 Promises have a curious ability to accurately retrieve values from custom JavaScript objects

I have developed a unique library that functions independently from the Promise API, yet achieves similar objectives. It utilizes window.requestAnimationFrame and fallbacks to setTimeout, having no similarities with Promises. Interestingly, it is compatibl ...

Fetching Dependencies with NPM from the package.json file

I am feeling a bit puzzled. While working on my laptop, dependencies were automatically added to my package.json file as I installed them for my project. This is how it appears: "main": "webpack.config.js", "dependencies": { "immutable": "^3.7.6", ...

Only bind the prop in VueJS if the data variable evaluates to true

Is there a way to conditionally bind a property based on the value of a variable? <template> <v-list-tile :class="{[$color]: isItemSelected, [$primaryText]: isItemSelected}" :href="route"> <v-list-tile-action> < ...