feat: update to vue v3

[sekwah41]

Notice

This is a draft pull request and is currently under heavy development. It has been opened to facilitate discussion as the migration will likely require the addition of new components, such as a Vite-compatible version of @cyclonedx/webpack-plugin. This part can be deferred until the primary migration is functional.

Description

This draft pull request initiates the migration from Vue 2 to Vue 3 and switches the build tool from Vue CLI to Vite.

Addressed Issue

This draft PR addresses issue #446, which calls for the upgrade to Vue 3.

Additional Details

This draft is intended to open a discussion while I am trying to create the changes. As part of the migration process, some components and plugins used in Vue 2 may not be directly compatible with Vue 3 or Vite, such as the current use of @cyclonedx/webpack-plugin. A Vite-compatible version of this plugin will be required, though it has been deferred until the core migration is functional.

Key considerations during this migration:

• Component Rewriting: Some components need to be rewritten to comply with Vue 3's composition API and other new syntax.
• Plugin Compatibility: Certain Vue 2 plugins may not have direct counterparts in Vue 3 or may require alternative solutions.
• Vite Configuration: Moving from Vue CLI to Vite involves reconfiguring the build setup, including handling environment variables, aliases, optimisations and build pipelines.

Checklist

• I have read and understand the contributing guidelines
• This PR introduces new or alters existing behavior, and I have updated the documentation accordingly

Tasks left to complete (no particular order)

These are the tasks I have outlined so far, more may be added as I work on this.

Also I may not keep this list up to date vs I will be adding comments as I work on the update.

• Update UI to vue v3
• Create base vite configurations needed to start work this issue
• Explore using @vue/compat for the plugins that cant be updated, or possibly allow updating the project not all at once
• @cyclonedx/webpack-plugin add the rollup replacement for
• Make sure that the new configuration covers the core functionality needed from vue cli
• Identify what plugins need replacing due to lack of v3 support
• Update vee-validate usage

[sekwah41]

I will be squashing the commits once something is ready though for now i will add the skip ci tags to the commits as to not cause a build every push

[nscuro]

Thanks so much for taking this up @sekwah41. It's really much appreciated!

As part of the migration process, some components and plugins used in Vue 2 may not be directly compatible with Vue 3 or Vite, such as the current use of @cyclonedx/webpack-plugin. A Vite-compatible version of this plugin will be required, though it has been deferred until the core migration is functional.

@jkowalleck Apologies for pinging from the sideline, but did you run into users wishing to integrate with Vite before? If so, any tips? Otherwise, I think we as DT project could contribute something to CycloneDX if required.

[sekwah41]

@nscuro I was requested a while back to take a look at this by @msymons though was occupied by my own projects. While I will have time on and off I plan to help push updating this forward, I'll be honest one reason I didn't push forward in the past is that I got a bit stuck due to vuecli's vague errors, the size of this work and not being too keen on learning a new tool. (I am mostly a react and angular dev, though have some experience with vue but none with Vue CLI)

However based on discussions and what I have been told this is an important piece of work that needs to be done and I feel I will be able to at least help with it.

@msymons would you know who to talk to in regards to getting a version of @cyclonedx/webpack-plugin made for vite, or possibly if I make it getting it officially adopted and supported?

[jkowalleck]

@jkowalleck Apologies for pinging from the sideline, but did you run into users wishing to integrate with Vite before? If so, any tips? Otherwise, I think we as DT project could contribute something to CycloneDX if required.

in our list at https://github.com/CycloneDX/cyclonedx-node-module?tab=readme-ov-file#out-of-scope we have several options here.
for default Vite utilizing rollup, we list https://www.npmjs.com/package/rollup-plugin-sbom?activeTab=readme#usage-with-vite.

[sekwah41]

Oh perfect. I'll take a look into this when I get further along. It looks exactly like what is needed.

[sekwah41]

Need to redo all of the events

https://v3-migration.vuejs.org/breaking-changes/events-api#_3-x-update

I have taken a quick look at mitt and also tinyemitter, and mitt seems to be more recently updated as well as significantly more popular at least in terms of downloads and github stars (I know a poor metric, though both are suggested to use).

Looking at the interfaces though they look almost identical, though mitt seems to have a relatively handy wildcard feature which may be handy for debugging events should we need to e.g. logging them all out which was the deciding factor.

However, as explained in the migration guide, we can just use the library to create a drop-in replacement, which I will do for now though may switch it over to directly using the library as part of the clean up stages later.

One downside of Mitt is that it doesn't seem to be implemented once, though I don't believe we use that anywhere (cant think of any use cases we'd need it for here tbh anyway)

If anyone has any objections I can also happily switch to tiny-emitter.

[nscuro]

@sekwah41 Agree with all points.

Having a drop-in replacement for now is a good strategy to reduce the effort of this migration exercise. We can move to the officially recommended alternatives incrementally over time.

mitt does seem to be the better choice between the two options.

[sekwah41]

@vue/compat will need to be used as https://bootstrap-vue.org/vue3 states that bootstrap is not fully functioning with vue3 at the moment. Though I believe there is a way to toggle using compact for specific components, I'm not sure how clean it is.

https://v3-migration.vuejs.org/migration-build.html#compat-configuration

It would be nice if we could just fully move, but there is at least an in-between, which may allow us to keep the other old libraries, which also haven't ported yet.

I may have been doing extra work for myself, upgrading all of the libraries at once, though it's probably better to try to use the v3 versions where possible.

While it makes it clear we can set our components to v3, I am wondering if it can be configured per library or, If it can't, what issues it will cause.

Edit: that seemed to be old documentation I found a link to. I will have a go with BootstrapNext as that has v3 support

https://bootstrap-vue-next.github.io/bootstrap-vue-next/

Need to also consider which to switch over to provide

https://v3-migration.vuejs.org/breaking-changes/global-api#provide-inject

though will use app.config.globalProperties in place of Vue.prototype for now.

[sekwah41]

Still a long way off but the new vue dev tools are starting to render :D

[sekwah41]

Also due to large changes in vee-validate we will need to test the validation all works https://vee-validate.logaretm.com/v4/tutorials/basics/

There are no migration guides vs a "here is how the new one works, good luck"

[sekwah41]

First glipses of UI on vue v3 :D Not sure why the CSS isn't properly applying though still progress!

Im going to sleep for now though will continue when I next get time (likely tomorrow)

[sekwah41]

Seems to be a bit of an issue with BTooltips natively

bootstrap-vue-next/bootstrap-vue-next#2076

I believe I have found a workaround for now, manually registering the directive.

I am quite new to Vue, so I have to figure a lot of this out as I go for context; though I'll say a reasonable amount of it is relatively intuitive (not my fav frontend library but its pretty easy to figure out 😄 )

Just please let me know if there is anything I am doing wrong in vue generally, e.g. naming conventions and such if you notice anything.

Also regarding the CSS issues, seems the new way the app mounts removes the style components at the bottom of App.vue possibly only if its mounted on a delay e.g. after that axios response.

[sekwah41]

Going to take a bit of a break to look at another project, but need to look over the changes to vee-validate fully next

[sekwah41]

Still looking. Just been a bit busy.