Add basic Vue.js example

[elivlo]

Hi 😃,

I was surprised that there was no Vue.js example. So I created a basic frame/example that should help creating Vue.js overwolf apps.

[eransharv]

@elivlo Hi!

Thanks for your contribution! A React, Angular, and View versions are on our roadmap, but as it's a "lower" priority, it takes time to get into it, so a contribution like yours can help implement and achieve these goals!
Of course, to put it on this "official" repository, I will have to forward it to the R&D for inspection to approve it.
Note that we have the code snippets page in the dev site and the community gists repo - places for "unofficial" community content that does not need our approval.

1. Note that another dev already uploaded a Vue version of the old sample app - What do you think about this version? (I'm not too familiar with Vue)
2. Can you tell me if your Vue version changed the minimal required changes from the official version? I want to make sure that all the versions will pretty much be close to each other if you know what I mean.
   Thanks

[elivlo]

Hi @eransharv!

Yes, I noticed that Vue.js example but since it is over one year old I decided to make a newer version.
This PR also does not contain any working functionality to demonstrate how a Vue - OW app works and has a different appearance than the previous examples.

• I basically took the Typescript example and converted it. Since I have no experience coding an Overwolf app so far, I just tried to make a basic/minimal workspace on what interested developers can build on.
• The file structure of the old sample app is completely different to my structure.
  • The old sample app has three different yarn projects for the three windows it implements. This code has one npmjs project containing the three windows background, desktop and in_game.
  • I also include @overwolf/types and @overwolf/overwolf-api-ts by npm so they are not hard coded.
  • This file is now converted to Vue.js prototypes for access by every component. See here
  • And last I included the framework Vuetify that provides material design UI elements.

To summarize, I have a few proposals:

• I will draft this PR.
• Make this example a "real" example to demonstrate the functionality.
• Clean up some npm dependencies.

[eransharv]

@elivlo Hey,

OK, now it's clearer, and it sounds good. I will forward it to the R&D for review (As they are busy, that can take some time). Basically, as I mentioned, I want to make sure that it fits our standards, as I want to include this in this "official" repo and not in the "community" repo.

Can you please clarify what do you mean by "Make this example a real example"? The Vue version of the sample app must have the same functionality as the ts and native versions. No different features or UI - the only thing that should be different is the adjustments to Vue. The whole point is to show the same app in different "flavors" - Vue, React, etc.

Having said that, it's ok to depend on our "official" npm packages like the "types," or make use of the Vuetify, etc.

I hope that it's clear and makes sense.

[elivlo]

Can you please clarify what do you mean by "Make this example a real example"? The Vue version of the sample app must have the same functionality as the ts and native versions. No different features or UI - the only thing that should be different is the adjustments to Vue. The whole point is to show the same app in different "flavors" - Vue, React, etc.

With "Make this example a real example" I meant that the vue example app is not ready to deliver the same features as the native and ts sample apps do. So I will implement all the basic example app features and then remove the "draft" from this PR.

[eransharv]

@elivlo thanks. We will review it, and I will update you here. That might take some time. Thanks for your contribution!

[elivlo]

@elivlo thanks. We will review it, and I will update you here. That might take some time. Thanks for your contribution!

ACK
I just finished the vue example. It is ready for review now.

[eransharv]

@elivlo Thanks! Appriciated! We will review it (some of the team are on Aug. holiday, so that might take longer than usual. But we are on it). Thanks!

[OskarD]

@eransharv are any of them back from their holiday 3 years ago yet? 😜

It would be great if they could also take a look at #51 and #53

[elivlo]

I will close this issue because it is really outdated by now

[elivlo]

Hi 😃,

I was surprised that there was no Vue.js example. So I created a basic frame/example that should help creating Vue.js overwolf apps.

[eransharv]

@elivlo Hi!

Thanks for your contribution! A React, Angular, and View versions are on our roadmap, but as it's a "lower" priority, it takes time to get into it, so a contribution like yours can help implement and achieve these goals!
Of course, to put it on this "official" repository, I will have to forward it to the R&D for inspection to approve it.
Note that we have the code snippets page in the dev site and the community gists repo - places for "unofficial" community content that does not need our approval.

1. Note that another dev already uploaded a Vue version of the old sample app - What do you think about this version? (I'm not too familiar with Vue)
2. Can you tell me if your Vue version changed the minimal required changes from the official version? I want to make sure that all the versions will pretty much be close to each other if you know what I mean.
   Thanks

[elivlo]

Hi @eransharv!

Yes, I noticed that Vue.js example but since it is over one year old I decided to make a newer version.
This PR also does not contain any working functionality to demonstrate how a Vue - OW app works and has a different appearance than the previous examples.

• I basically took the Typescript example and converted it. Since I have no experience coding an Overwolf app so far, I just tried to make a basic/minimal workspace on what interested developers can build on.
• The file structure of the old sample app is completely different to my structure.
  • The old sample app has three different yarn projects for the three windows it implements. This code has one npmjs project containing the three windows background, desktop and in_game.
  • I also include @overwolf/types and @overwolf/overwolf-api-ts by npm so they are not hard coded.
  • This file is now converted to Vue.js prototypes for access by every component. See here
  • And last I included the framework Vuetify that provides material design UI elements.

To summarize, I have a few proposals:

• I will draft this PR.
• Make this example a "real" example to demonstrate the functionality.
• Clean up some npm dependencies.

[eransharv]

@elivlo Hey,

OK, now it's clearer, and it sounds good. I will forward it to the R&D for review (As they are busy, that can take some time). Basically, as I mentioned, I want to make sure that it fits our standards, as I want to include this in this "official" repo and not in the "community" repo.

Can you please clarify what do you mean by "Make this example a real example"? The Vue version of the sample app must have the same functionality as the ts and native versions. No different features or UI - the only thing that should be different is the adjustments to Vue. The whole point is to show the same app in different "flavors" - Vue, React, etc.

Having said that, it's ok to depend on our "official" npm packages like the "types," or make use of the Vuetify, etc.

I hope that it's clear and makes sense.

[elivlo]

Can you please clarify what do you mean by "Make this example a real example"? The Vue version of the sample app must have the same functionality as the ts and native versions. No different features or UI - the only thing that should be different is the adjustments to Vue. The whole point is to show the same app in different "flavors" - Vue, React, etc.

With "Make this example a real example" I meant that the vue example app is not ready to deliver the same features as the native and ts sample apps do. So I will implement all the basic example app features and then remove the "draft" from this PR.

[eransharv]

@elivlo thanks. We will review it, and I will update you here. That might take some time. Thanks for your contribution!

[elivlo]

@elivlo thanks. We will review it, and I will update you here. That might take some time. Thanks for your contribution!

ACK
I just finished the vue example. It is ready for review now.

[eransharv]

@elivlo Thanks! Appriciated! We will review it (some of the team are on Aug. holiday, so that might take longer than usual. But we are on it). Thanks!

[OskarD]

@eransharv are any of them back from their holiday 3 years ago yet? 😜

It would be great if they could also take a look at #51 and #53

[elivlo]

I will close this issue because it is really outdated by now

[elivlo]

Hi 😃,

I was surprised that there was no Vue.js example. So I created a basic frame/example that should help creating Vue.js overwolf apps.

[eransharv]

@elivlo Hi!

Thanks for your contribution! A React, Angular, and View versions are on our roadmap, but as it's a "lower" priority, it takes time to get into it, so a contribution like yours can help implement and achieve these goals!
Of course, to put it on this "official" repository, I will have to forward it to the R&D for inspection to approve it.
Note that we have the code snippets page in the dev site and the community gists repo - places for "unofficial" community content that does not need our approval.

1. Note that another dev already uploaded a Vue version of the old sample app - What do you think about this version? (I'm not too familiar with Vue)
2. Can you tell me if your Vue version changed the minimal required changes from the official version? I want to make sure that all the versions will pretty much be close to each other if you know what I mean.
   Thanks

[elivlo]

Hi @eransharv!

Yes, I noticed that Vue.js example but since it is over one year old I decided to make a newer version.
This PR also does not contain any working functionality to demonstrate how a Vue - OW app works and has a different appearance than the previous examples.

• I basically took the Typescript example and converted it. Since I have no experience coding an Overwolf app so far, I just tried to make a basic/minimal workspace on what interested developers can build on.
• The file structure of the old sample app is completely different to my structure.
  • The old sample app has three different yarn projects for the three windows it implements. This code has one npmjs project containing the three windows background, desktop and in_game.
  • I also include @overwolf/types and @overwolf/overwolf-api-ts by npm so they are not hard coded.
  • This file is now converted to Vue.js prototypes for access by every component. See here
  • And last I included the framework Vuetify that provides material design UI elements.

To summarize, I have a few proposals:

• I will draft this PR.
• Make this example a "real" example to demonstrate the functionality.
• Clean up some npm dependencies.

[eransharv]

@elivlo Hey,

OK, now it's clearer, and it sounds good. I will forward it to the R&D for review (As they are busy, that can take some time). Basically, as I mentioned, I want to make sure that it fits our standards, as I want to include this in this "official" repo and not in the "community" repo.

Can you please clarify what do you mean by "Make this example a real example"? The Vue version of the sample app must have the same functionality as the ts and native versions. No different features or UI - the only thing that should be different is the adjustments to Vue. The whole point is to show the same app in different "flavors" - Vue, React, etc.

Having said that, it's ok to depend on our "official" npm packages like the "types," or make use of the Vuetify, etc.

I hope that it's clear and makes sense.

[elivlo]

Can you please clarify what do you mean by "Make this example a real example"? The Vue version of the sample app must have the same functionality as the ts and native versions. No different features or UI - the only thing that should be different is the adjustments to Vue. The whole point is to show the same app in different "flavors" - Vue, React, etc.

With "Make this example a real example" I meant that the vue example app is not ready to deliver the same features as the native and ts sample apps do. So I will implement all the basic example app features and then remove the "draft" from this PR.

[eransharv]

@elivlo thanks. We will review it, and I will update you here. That might take some time. Thanks for your contribution!

[elivlo]

@elivlo thanks. We will review it, and I will update you here. That might take some time. Thanks for your contribution!

ACK
I just finished the vue example. It is ready for review now.

[eransharv]

@elivlo Thanks! Appriciated! We will review it (some of the team are on Aug. holiday, so that might take longer than usual. But we are on it). Thanks!

[OskarD]

@eransharv are any of them back from their holiday 3 years ago yet? 😜

It would be great if they could also take a look at #51 and #53

[elivlo]

I will close this issue because it is really outdated by now

[elivlo]

Hi 😃,

I was surprised that there was no Vue.js example. So I created a basic frame/example that should help creating Vue.js overwolf apps.

[eransharv]

@elivlo Hi!

Thanks for your contribution! A React, Angular, and View versions are on our roadmap, but as it's a "lower" priority, it takes time to get into it, so a contribution like yours can help implement and achieve these goals!
Of course, to put it on this "official" repository, I will have to forward it to the R&D for inspection to approve it.
Note that we have the code snippets page in the dev site and the community gists repo - places for "unofficial" community content that does not need our approval.

1. Note that another dev already uploaded a Vue version of the old sample app - What do you think about this version? (I'm not too familiar with Vue)
2. Can you tell me if your Vue version changed the minimal required changes from the official version? I want to make sure that all the versions will pretty much be close to each other if you know what I mean.
   Thanks

[elivlo]

Hi @eransharv!

Yes, I noticed that Vue.js example but since it is over one year old I decided to make a newer version.
This PR also does not contain any working functionality to demonstrate how a Vue - OW app works and has a different appearance than the previous examples.

• I basically took the Typescript example and converted it. Since I have no experience coding an Overwolf app so far, I just tried to make a basic/minimal workspace on what interested developers can build on.
• The file structure of the old sample app is completely different to my structure.
  • The old sample app has three different yarn projects for the three windows it implements. This code has one npmjs project containing the three windows background, desktop and in_game.
  • I also include @overwolf/types and @overwolf/overwolf-api-ts by npm so they are not hard coded.
  • This file is now converted to Vue.js prototypes for access by every component. See here
  • And last I included the framework Vuetify that provides material design UI elements.

To summarize, I have a few proposals:

• I will draft this PR.
• Make this example a "real" example to demonstrate the functionality.
• Clean up some npm dependencies.

[eransharv]

@elivlo Hey,

OK, now it's clearer, and it sounds good. I will forward it to the R&D for review (As they are busy, that can take some time). Basically, as I mentioned, I want to make sure that it fits our standards, as I want to include this in this "official" repo and not in the "community" repo.

Can you please clarify what do you mean by "Make this example a real example"? The Vue version of the sample app must have the same functionality as the ts and native versions. No different features or UI - the only thing that should be different is the adjustments to Vue. The whole point is to show the same app in different "flavors" - Vue, React, etc.

Having said that, it's ok to depend on our "official" npm packages like the "types," or make use of the Vuetify, etc.

I hope that it's clear and makes sense.

[elivlo]

Can you please clarify what do you mean by "Make this example a real example"? The Vue version of the sample app must have the same functionality as the ts and native versions. No different features or UI - the only thing that should be different is the adjustments to Vue. The whole point is to show the same app in different "flavors" - Vue, React, etc.

With "Make this example a real example" I meant that the vue example app is not ready to deliver the same features as the native and ts sample apps do. So I will implement all the basic example app features and then remove the "draft" from this PR.

[eransharv]

@elivlo thanks. We will review it, and I will update you here. That might take some time. Thanks for your contribution!

[elivlo]

@elivlo thanks. We will review it, and I will update you here. That might take some time. Thanks for your contribution!

ACK
I just finished the vue example. It is ready for review now.

[eransharv]

@elivlo Thanks! Appriciated! We will review it (some of the team are on Aug. holiday, so that might take longer than usual. But we are on it). Thanks!

[OskarD]

@eransharv are any of them back from their holiday 3 years ago yet? 😜

It would be great if they could also take a look at #51 and #53

[elivlo]

I will close this issue because it is really outdated by now

[elivlo]

Hi 😃,

I was surprised that there was no Vue.js example. So I created a basic frame/example that should help creating Vue.js overwolf apps.

[eransharv]

@elivlo Hi!

Thanks for your contribution! A React, Angular, and View versions are on our roadmap, but as it's a "lower" priority, it takes time to get into it, so a contribution like yours can help implement and achieve these goals!
Of course, to put it on this "official" repository, I will have to forward it to the R&D for inspection to approve it.
Note that we have the code snippets page in the dev site and the community gists repo - places for "unofficial" community content that does not need our approval.

1. Note that another dev already uploaded a Vue version of the old sample app - What do you think about this version? (I'm not too familiar with Vue)
2. Can you tell me if your Vue version changed the minimal required changes from the official version? I want to make sure that all the versions will pretty much be close to each other if you know what I mean.
   Thanks

[elivlo]

Hi @eransharv!

Yes, I noticed that Vue.js example but since it is over one year old I decided to make a newer version.
This PR also does not contain any working functionality to demonstrate how a Vue - OW app works and has a different appearance than the previous examples.

• I basically took the Typescript example and converted it. Since I have no experience coding an Overwolf app so far, I just tried to make a basic/minimal workspace on what interested developers can build on.
• The file structure of the old sample app is completely different to my structure.
  • The old sample app has three different yarn projects for the three windows it implements. This code has one npmjs project containing the three windows background, desktop and in_game.
  • I also include @overwolf/types and @overwolf/overwolf-api-ts by npm so they are not hard coded.
  • This file is now converted to Vue.js prototypes for access by every component. See here
  • And last I included the framework Vuetify that provides material design UI elements.

To summarize, I have a few proposals:

• I will draft this PR.
• Make this example a "real" example to demonstrate the functionality.
• Clean up some npm dependencies.

[eransharv]

@elivlo Hey,

OK, now it's clearer, and it sounds good. I will forward it to the R&D for review (As they are busy, that can take some time). Basically, as I mentioned, I want to make sure that it fits our standards, as I want to include this in this "official" repo and not in the "community" repo.

Can you please clarify what do you mean by "Make this example a real example"? The Vue version of the sample app must have the same functionality as the ts and native versions. No different features or UI - the only thing that should be different is the adjustments to Vue. The whole point is to show the same app in different "flavors" - Vue, React, etc.

Having said that, it's ok to depend on our "official" npm packages like the "types," or make use of the Vuetify, etc.

I hope that it's clear and makes sense.

[elivlo]

Can you please clarify what do you mean by "Make this example a real example"? The Vue version of the sample app must have the same functionality as the ts and native versions. No different features or UI - the only thing that should be different is the adjustments to Vue. The whole point is to show the same app in different "flavors" - Vue, React, etc.

With "Make this example a real example" I meant that the vue example app is not ready to deliver the same features as the native and ts sample apps do. So I will implement all the basic example app features and then remove the "draft" from this PR.

[eransharv]

@elivlo thanks. We will review it, and I will update you here. That might take some time. Thanks for your contribution!

[elivlo]

@elivlo thanks. We will review it, and I will update you here. That might take some time. Thanks for your contribution!

ACK
I just finished the vue example. It is ready for review now.

[eransharv]

@elivlo Thanks! Appriciated! We will review it (some of the team are on Aug. holiday, so that might take longer than usual. But we are on it). Thanks!

[OskarD]

@eransharv are any of them back from their holiday 3 years ago yet? 😜

It would be great if they could also take a look at #51 and #53

[elivlo]

I will close this issue because it is really outdated by now

[elivlo]

Hi 😃,

I was surprised that there was no Vue.js example. So I created a basic frame/example that should help creating Vue.js overwolf apps.

[eransharv]

@elivlo Hi!

Thanks for your contribution! A React, Angular, and View versions are on our roadmap, but as it's a "lower" priority, it takes time to get into it, so a contribution like yours can help implement and achieve these goals!
Of course, to put it on this "official" repository, I will have to forward it to the R&D for inspection to approve it.
Note that we have the code snippets page in the dev site and the community gists repo - places for "unofficial" community content that does not need our approval.

1. Note that another dev already uploaded a Vue version of the old sample app - What do you think about this version? (I'm not too familiar with Vue)
2. Can you tell me if your Vue version changed the minimal required changes from the official version? I want to make sure that all the versions will pretty much be close to each other if you know what I mean.
   Thanks

[elivlo]

Hi @eransharv!

Yes, I noticed that Vue.js example but since it is over one year old I decided to make a newer version.
This PR also does not contain any working functionality to demonstrate how a Vue - OW app works and has a different appearance than the previous examples.

• I basically took the Typescript example and converted it. Since I have no experience coding an Overwolf app so far, I just tried to make a basic/minimal workspace on what interested developers can build on.
• The file structure of the old sample app is completely different to my structure.
  • The old sample app has three different yarn projects for the three windows it implements. This code has one npmjs project containing the three windows background, desktop and in_game.
  • I also include @overwolf/types and @overwolf/overwolf-api-ts by npm so they are not hard coded.
  • This file is now converted to Vue.js prototypes for access by every component. See here
  • And last I included the framework Vuetify that provides material design UI elements.

To summarize, I have a few proposals:

• I will draft this PR.
• Make this example a "real" example to demonstrate the functionality.
• Clean up some npm dependencies.

[eransharv]

@elivlo Hey,

OK, now it's clearer, and it sounds good. I will forward it to the R&D for review (As they are busy, that can take some time). Basically, as I mentioned, I want to make sure that it fits our standards, as I want to include this in this "official" repo and not in the "community" repo.

Can you please clarify what do you mean by "Make this example a real example"? The Vue version of the sample app must have the same functionality as the ts and native versions. No different features or UI - the only thing that should be different is the adjustments to Vue. The whole point is to show the same app in different "flavors" - Vue, React, etc.

Having said that, it's ok to depend on our "official" npm packages like the "types," or make use of the Vuetify, etc.

I hope that it's clear and makes sense.

[elivlo]

Can you please clarify what do you mean by "Make this example a real example"? The Vue version of the sample app must have the same functionality as the ts and native versions. No different features or UI - the only thing that should be different is the adjustments to Vue. The whole point is to show the same app in different "flavors" - Vue, React, etc.

With "Make this example a real example" I meant that the vue example app is not ready to deliver the same features as the native and ts sample apps do. So I will implement all the basic example app features and then remove the "draft" from this PR.

[eransharv]

@elivlo thanks. We will review it, and I will update you here. That might take some time. Thanks for your contribution!

[elivlo]

@elivlo thanks. We will review it, and I will update you here. That might take some time. Thanks for your contribution!

ACK
I just finished the vue example. It is ready for review now.

[eransharv]

@elivlo Thanks! Appriciated! We will review it (some of the team are on Aug. holiday, so that might take longer than usual. But we are on it). Thanks!

[OskarD]

@eransharv are any of them back from their holiday 3 years ago yet? 😜

It would be great if they could also take a look at #51 and #53

[elivlo]

I will close this issue because it is really outdated by now

[elivlo]

Hi 😃,

I was surprised that there was no Vue.js example. So I created a basic frame/example that should help creating Vue.js overwolf apps.

[eransharv]

@elivlo Hi!

Thanks for your contribution! A React, Angular, and View versions are on our roadmap, but as it's a "lower" priority, it takes time to get into it, so a contribution like yours can help implement and achieve these goals!
Of course, to put it on this "official" repository, I will have to forward it to the R&D for inspection to approve it.
Note that we have the code snippets page in the dev site and the community gists repo - places for "unofficial" community content that does not need our approval.

1. Note that another dev already uploaded a Vue version of the old sample app - What do you think about this version? (I'm not too familiar with Vue)
2. Can you tell me if your Vue version changed the minimal required changes from the official version? I want to make sure that all the versions will pretty much be close to each other if you know what I mean.
   Thanks

[elivlo]

Hi @eransharv!

Yes, I noticed that Vue.js example but since it is over one year old I decided to make a newer version.
This PR also does not contain any working functionality to demonstrate how a Vue - OW app works and has a different appearance than the previous examples.

• I basically took the Typescript example and converted it. Since I have no experience coding an Overwolf app so far, I just tried to make a basic/minimal workspace on what interested developers can build on.
• The file structure of the old sample app is completely different to my structure.
  • The old sample app has three different yarn projects for the three windows it implements. This code has one npmjs project containing the three windows background, desktop and in_game.
  • I also include @overwolf/types and @overwolf/overwolf-api-ts by npm so they are not hard coded.
  • This file is now converted to Vue.js prototypes for access by every component. See here
  • And last I included the framework Vuetify that provides material design UI elements.

To summarize, I have a few proposals:

• I will draft this PR.
• Make this example a "real" example to demonstrate the functionality.
• Clean up some npm dependencies.

[eransharv]

@elivlo Hey,

OK, now it's clearer, and it sounds good. I will forward it to the R&D for review (As they are busy, that can take some time). Basically, as I mentioned, I want to make sure that it fits our standards, as I want to include this in this "official" repo and not in the "community" repo.

Can you please clarify what do you mean by "Make this example a real example"? The Vue version of the sample app must have the same functionality as the ts and native versions. No different features or UI - the only thing that should be different is the adjustments to Vue. The whole point is to show the same app in different "flavors" - Vue, React, etc.

Having said that, it's ok to depend on our "official" npm packages like the "types," or make use of the Vuetify, etc.

I hope that it's clear and makes sense.

[elivlo]

Can you please clarify what do you mean by "Make this example a real example"? The Vue version of the sample app must have the same functionality as the ts and native versions. No different features or UI - the only thing that should be different is the adjustments to Vue. The whole point is to show the same app in different "flavors" - Vue, React, etc.

With "Make this example a real example" I meant that the vue example app is not ready to deliver the same features as the native and ts sample apps do. So I will implement all the basic example app features and then remove the "draft" from this PR.

[eransharv]

@elivlo thanks. We will review it, and I will update you here. That might take some time. Thanks for your contribution!

[elivlo]

@elivlo thanks. We will review it, and I will update you here. That might take some time. Thanks for your contribution!

ACK
I just finished the vue example. It is ready for review now.

[eransharv]

@elivlo Thanks! Appriciated! We will review it (some of the team are on Aug. holiday, so that might take longer than usual. But we are on it). Thanks!

[OskarD]

@eransharv are any of them back from their holiday 3 years ago yet? 😜

It would be great if they could also take a look at #51 and #53

[elivlo]

I will close this issue because it is really outdated by now