Update Vault Showcase to use the Verida components

[nick-verida]

Currently once logged in there is no way to log out of this app.

Update to use the Verida login and account components

[cmcWebCode40]

My progress on this ticket
@nick-verida, I'm having a bug similar to this issue https://forum.vuejs.org/t/uncaught-typeerror-object-is-not-a-function-in-vue3/121328, whenever I tried to use the lib in a vue2 app and it seems there are solutions to the issue, currently testing it out.

[cmcWebCode40]

Actually, I have tried resolving this issue using the above link but it didn't work,
here is a screenshot of the error I got when I ran yarn serve on development using @vue/compiler-sfc for vue2 component library.

Still searching to find a solution to this error .

[cmcWebCode40]

Currently once logged in there is no way to log out of this app.

https://www.loom.com/share/de7121f9cd814fbd936b36ff90ad6145

Please I did a video of the app and there's actually a logout button , Please which branch did you test with ?

[nick-verida]

I'm testing against https://vault-examples.demos.verida.io/ and I'm not seeing that button. Is there anything obvious in the code that would cause that?

the error I got when I ran yarn serve on development using @vue/compiler-sfc for vue2 component library.

How big a deal is it to upgrade to vue3?

[cmcWebCode40]

I'm testing against https://vault-examples.demos.verida.io/ and I'm not seeing that button. Is there anything obvious in the code that would cause that?

I'm not sure, but I'm testing again to see if I can reproduce this error, but I haven't.

How big a deal is it to upgrade to vue3?
There is a migration guide in the vuejs docs so I don't is really a big deal because the project codebase is not so large.

[nick-verida]

Let's do the Vue3 migration

[cmcWebCode40]

@nick-verida,

I just discovered that one of the UI plugins used in the project (bootstrap-vue) and is not supported in vue3 ATM see github issue bootstrap-vue/bootstrap-vue#5196.

Maybe i should figure out how to resolve the vue3 plugin compatibility issues with vue 2?

what are your thoughts on this issue ?

[nick-verida]

They have an unofficial way to do it here: bootstrap-vue/bootstrap-vue#6872 (comment) or maybe try this branch: bootstrap-vue/bootstrap-vue#6905

I'd prefer to move forward in versions than backwards, but if these don't work I guess we can try getting vue v2 to work.

If it can't be resolved then maybe

[cmcWebCode40]

@nick-verida,
I'm currently stuck with this error ATM trying to use the @verida/vue-account,
I remembered there was a time you resolved in our documentation code, trying to use the same approach in vue but not working yet. still searching for the solution on stackoverflow

[cmcWebCode40]

@nick-verida,

Sorry I didn't realize I would get these some blockers in migrating our vue2 code base,

After going through the upgrading process, currently, there are a few breaking changes which the vue upgrade would really cause the code upgrade to take a longer time.

1. most of the vue dependencies used in the vue2 needs to be upgraded as well for vue3 support which has a different implementation as well e.g

• vee-validate and this was used in all the forms
  vue 2 docs https://vee-validate.logaretm.com/v3
  vue 3 docs https://vee-validate.logaretm.com/v4/

2. some of the bootstrapVue components are not completely workings as expected still working out this issue,
   worked initially yarn serve and compiled the code correctly.

[cmcWebCode40]

@nick-verida,

I have pushed a branch for the vue3 migration setup seems to be working pretty well, but I currently have one bug, the bootstrap CSS causing the vda-login login to load continuously.
This is caused by this CSS line of code

import "bootstrap/dist/css/bootstrap.css";

I guess this could be a CSS issue(class name issue) from the vue-account component, I would resolve this.

Next Steps: to upgrade other dependencies for vue-3 support.

Demo of issue :

https://www.loom.com/share/dcfe80ab7b99497080bf9410c5a82a72

[cmcWebCode40]

@nick-verida regarding the above error from my investigations,
this is caused when the bootstrap sccs module

 @import "~bootstrap/scss/reboot";

had to comment it out for the QR modal in our account-vault-web lib to work.