Injecting custom js lib into Vue instance

SeRiusRod

This is an ssr app, and I’m consuming an API service library, that is not axios. I wrote a small js wrapper for it and I’m trying to inject that wrapper as normal in a new boot file. But it doesn’t work.

/* src/myWrapper.js */
import service from "apiService";
export default {
  login (username, password) { ... },
  logout () { ...}
}

/* src/boot/myWrapperInit.js */
import myWrapper from "../myWrapper"
import filesystem from "../filesystem";

export default ({ Vue, redirect, urlPath }) => {

  // Check if auth is already configured
  if (!urlPath.startsWith('/login')) {
    const existsToken = filesystem.exists('data/.token');
    console.log('Token: ', existsToken);

    // If the token is not saved, redirect to login screen
    if (!existsToken)
      redirect({ path: '/login'});
  }


  Vue.prototype.$myWrapper = myWrapper;
}

/* quasar.conf.js */
...
    boot: [
      { path: "myWrapperInit", client: false },
    ...
    ],
...

In the login page, after the login button click I’m trying to call the login function in my wrapper like:

/* src/pages/login.vue */
  methods: {
    doLogin () {
      //TODO: Validations
      this.$myWrapper.login(this.email, this.password);
    }
  }

But all I get is an undefined error.
“TypeError: Cannot read property ‘login’ of undefined”

dobbel

@beets any idea?

suleiman_as

@seriusrod You are clicking the btn on the client side, at that time the method 'll be working on the client only. while in the boot file you’re injecting $myWrapper to the server instance it’s another instance

SeRiusRod

@suleiman_as said in Injecting custom js lib into Vue instance:

@seriusrod You are clicking the btn on the client side, at that time the method 'll be working on the client only. while in the boot file you’re injecting $myWrapper to the server instance it’s another instance

I’ve also tried to execute the boot on both server and client by removing “client: false” and I get the same result.

Should I implement it as a store object? Store modules do exist on server and client.

suleiman_as

@seriusrod It should work if you remove client:false, but I don’t know whats (apiService & …/filesystem)

The login and logout functions should be universal functions that call your API.

Your idea should work without vuex

SeRiusRod

@suleiman_as said in Injecting custom js lib into Vue instance:

@seriusrod It should work if you remove client:false, but I don’t know whats (apiService & …/filesystem)

The login and logout functions should be universal functions that call your API.

Your idea should work without vuex

For some reason, removing client only execution doesn’t work.

…/filesystem is just a wrapper to fs.js. The only thing I do in it’s functions is normalize the path before calling fs.
I will confess, the library I’m trying to use is teslajs. I’m trying to build a web app to control my car charges. In the end, that library gets data from the car. The charge state, if it’s plugged or not… So I rebuilt it into a store module and it seems to work better.

Although I’m still interested in a workaround for this problem because I still need a module/boot/whatever to schedule the charge start & stop.

But now that the teslajs library is working as a store module, I’m facing a cors issue that I don’t know how to solve. I’ll open another thread.

suleiman_as

@seriusrod You need to split your code. maybe start using src-ssr/extension.js setup your APIs and call it from the store,boot anywhere

dobbel

@seriusrod said in Injecting custom js lib into Vue instance:

teslajs library

If your are referring to this library :
https://github.com/mseminatore/TeslaJS

Are you aware that this is a Nodejs library only? You cannot use it in a Quasar app. You’ll have to communicate with a nodejs server like express.

SeRiusRod

@dobbel said in Injecting custom js lib into Vue instance:

@seriusrod said in Injecting custom js lib into Vue instance:

teslajs library

If your are referring to this library :
https://github.com/mseminatore/TeslaJS

Are you aware that this is a Nodejs library only? You cannot use it in a Quasar app.

Doh! I was just realising that, after looking cors issue on the github repo, where the author’s answer suggested so.

I may sound dumb… but why a NodeJs library can’t be used in Quasar? (And I understand that neither in plain Vue)

You’ll have to communicate with a nodejs server like express.

Please, can you extend on this? I’m sorry, I come from asp.net and I’m a complete noob at js apps, Vue and Quasar. I read anything I find, but I’ll admit that for me it’s being confusing.

SeRiusRod

@suleiman_as said in Injecting custom js lib into Vue instance:

@seriusrod You need to split your code. maybe start using src-ssr/extension.js setup your APIs and call it from the store,boot anywhere

You mean, for the scheduler runner?

dobbel

@seriusrod

I may sound dumb…

No, everyone falls for this one the first time you attempt to use nodejs only library in Quasar or other frontend only techs.

I may sound dumb… but why a NodeJs library can’t be used in Quasar? (And I understand that neither in plain Vue)

That’s because Quasar/Vue is frontend only, it runs (not regarding electron or bex) on a client browser not on a server. SSR is not going to change that, because with SSR only the rendering part is running on the server.( first page load only)

SeRiusRod

I’ve already built this app from the ground up four times. By now I’m so demotivated.

An hybrid with node-red
A first naive start as a plain client app.
Then a client+nodejs backend talking through sockets. That had the problem of not knowing the IP to point the client to in docker installs. And not being able to make a mobile app if I wanted.
And then this SSR, that was so promising.

Do you have some advise in what platform would be better for this?

dobbel

@seriusrod

Do you have some advise in what platform would be better for this?

You can make this work (web & mobile app ) 99,99% guaranteed with https://expressjs.com/ using a rest API.

See:
https://www.google.com/search?q=expressjs+rest&pws=0&gl=us&gws_rd=cr

Then a client+nodejs backend talking through sockets. That had the problem of not knowing the IP to point the client to in docker installs.

If you need to go the socket way + docker , I could help but that’s a bit more complicated. I have used sockets & docker for all my apps ( mobile/pwa/spa).

SeRiusRod

Thank you very much for your help Dobbel.

@dobbel said in Injecting custom js lib into Vue instance:

You can make this work (web & mobile app ) 99,99% guaranteed with https://expressjs.com/ using a rest API.

The Rest API, for talking with the frontend, I understand.

If you need to go the socket way + docker , I could help but that’s a bit more complicated. I have used sockets & docker for all my apps ( mobile/pwa/spa).

No. The socket was only implemented to be able to show in the frontend realtime info, without having to poll. While charging, things like charge level, voltage or power.
With realtime voltage one can make an idea of the load it is on the grid supply. For one’s like me that have a shitty supply.
And power, to be sure I’m not exceeding the contracted amount.

I’ve read that some frameworks for NodeJs already integrate socketio for the frontend to backend integration. I should take a look in how they determine the endpoint address.

No More Posting New Topics!

Injecting custom js lib into Vue instance