Vue 3

[pascalgrimaud]

Overview of the feature request

Vue 3 has been released ! It would be so cool if we can have it for JHipster v7

Motivation for or Use Case

Related issues or PR

• [x] Checking this box is mandatory (this is just to show you read everything)

[pascalgrimaud]

cc @deepu105 @jdubois I'm adding a big bounty on this, as I think there is a lot of work to achieve this, but it would be really so cool to have it !

[atomfrede]

Let's see how fast then 3rd party components are getting compatible. They have postponed the migration utilities for now as far as I know (but not sure how much it would help in our case).

[pascalgrimaud]

@atomfrede : do you have more information ? I thought it would be compatible with Vue 3

[atomfrede]

Did not look in detail yet. I also guess we can upgrade without too much hassle. We have few 3rd party libraries and they are widely used. I try to have a look next week to get a better understanding what would be needed.

[pascalgrimaud]

I'd love to have this for JHipster v7 Don't hesitate to ask help, and if needed, we can add separate bounties for people who want to help here

[atomfrede]

At least bootstrap-vue is not yet compatible. They plan to have a compatible release "short" after vue 3 release. Will follow closely. https://github.com/bootstrap-vue/bootstrap-vue/issues/5196#issuecomment-668837891

[atomfrede]

For i18n there is already a beta version which we could try and use https://github.com/intlify/vue-i18n-next.

Both veeValidate and Vuelidate are not yet compatible out of box with vue3. But using the composition api it might be possible. I will try to finish the (finally) the eslint migration in the main generator and can try vue3 afterwards.

[pittillo]

vue3 compatible component: https://2x.antdv.com/docs/vue/introduce/ i18n support: https://2x.antdv.com/docs/vue/i18n/ dashboard: https://pro.antdv.com/docs/getting-started

[mrts]

@atomfrede note that a "migration build" is in the works with Vue 2 compatible behavior (and runtime warnings of incompatible usage). So perhaps an interim step would be to implement minimal changes to use the migration build even if this is not fully optimal and then follow up with a rewrite to composition API eventually.

Note that there is also Vite for Vue 3 which makes frontend development lightning fast.

[atomfrede]

As far as I understand the migration build is not yet available?

We are still working on a dedicated Migration Build of Vue 3 with Vue 2 compatible behavior and runtime warnings of incompatible usage. If you are planning to migrate a non-trivial Vue 2 app, we strongly recommend waiting for the Migration Build for a smoother experience.

[mrts]

As far as I understand the migration build is not yet available?

Yes, it is not yet available. According to the Vue 3 roadmap, it is planned to be released in Q4 2020.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Our core developers tend to be more verbose on denying. If there is no negative comment, possibly this feature will be accepted. We are accepting PRs :smiley:. Comment or this will be closed in 7 days

[pascalgrimaud]

simple comment to keep this opened:)

[gmarziou]

The keep-alive comment :)

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Our core developers tend to be more verbose on denying. If there is no negative comment, possibly this feature will be accepted. We are accepting PRs :smiley:. Comment or this will be closed in 7 days

[atomfrede]

Keep it open.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Our core developers tend to be more verbose on denying. If there is no negative comment, possibly this feature will be accepted. We are accepting PRs :smiley:. Comment or this will be closed in 7 days

[mraible]

Should we add a bounty for motivation?

[atomfrede]

We are depending on vue bootstrap compatibility I think. Maybe we can start by updating to vue i18n and and replace the current client side validation library with compatibility one as a starting point maybe.

[atomfrede]

I would suggest the following to make the eventual v3 migration a bit easier:

• replace vuelidate with veeValidate as vuelidate is not well maintained anymore and I don't see it will be compatible with vue3 anytime
• Update to https://github.com/intlify/vue-i18n-next which is the successor of the current i19n solution but compatible with vue2 and 3

Having this we have already achieved large parts to be compatible with vue 3. The remaining part is vue bootstrap. Without that I don't think we can do the switch easily. So we have to wait for a compatible release or the migration build (which is still work on progress) and try it with the current vue boostrap release. I don't think we have the capacity to just use plain bootstrap and write/maintain our own components for e.g. modals etc.

[michaelzangl]

This is the vue3 for bootstrap-vue issue: https://github.com/bootstrap-vue/bootstrap-vue/issues/5196

[atomfrede]

It might take some more time. Estimation seems to be a few weeks for alpha/beta to be ready, stable in Q2 if everything goes well. https://github.com/bootstrap-vue/bootstrap-vue/issues/5196#issuecomment-770883757

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Our core developers tend to be more verbose on denying. If there is no negative comment, possibly this feature will be accepted. We are accepting PRs :smiley:. Comment or this will be closed in 7 days

[atomfrede]

Please keep it open we need to wait on 3rd party dependencies

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Our core developers tend to be more verbose on denying. If there is no negative comment, possibly this feature will be accepted. We are accepting PRs :smiley:. Comment or this will be closed in 7 days

[atomfrede]

Keep it open.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Our core developers tend to be more verbose on denying. If there is no negative comment, possibly this feature will be accepted. We are accepting PRs :smiley:. Comment or this will be closed in 7 days

[atomfrede]

Keep it open

[atomfrede]

Vue 3.1.0 has been released as a first beta Version. This contains the compat build. We could give it a try https://github.com/vuejs/vue-next/tree/master/packages/vue-compat

[mrts]

Just a quick heads-up that there is some discussion regarding using the compat build in VueBootstrap issue tracker here: https://github.com/bootstrap-vue/bootstrap-vue/issues/5196. In short, the compat build works with simpler components, but more complex components break. So it is not ready for prime time yet, but the discussion is ongoing.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Our core developers tend to be more verbose on denying. If there is no negative comment, possibly this feature will be accepted. We are accepting PRs :smiley:. Comment or this will be closed in 7 days

[atomfrede]

Keep it open

[shershen08]

in addition to a summary https://github.com/jhipster/generator-jhipster/issues/12558#issuecomment-753474557 by @atomfrede

As I understood https://github.com/bootstrap-vue/bootstrap-vue/issues/5196 doesn't have candidate MR that's being actively worked on, it's more a collection of problems and links how people approach Vue2->Vue3 upgrade in BootstrapVue community. There's also this rewrite from scratch Vue3+BS5 - https://github.com/cdmoro/bootstrap-vue-3, but it's missing a lot of functionality still.

In the current Vue generator it's 65 components in total, some are relatively simple: <b-form <b-form-input <b-button <b-link <b-alert <b-progress-bar <b-nav-item <b-navbar-nav <b-collapse <b-dropdown-item

but some are more complex: <b-pagination <b-modal

we could think of either replacing them with pure Bootstrap5 or separate libraries

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Our core developers tend to be more verbose on denying. If there is no negative comment, possibly this feature will be accepted. We are accepting PRs :smiley:. Comment or this will be closed in 7 days

[atomfrede]

Keep it open

[chen1i]

keep it open. looking forward to having it real...

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Our core developers tend to be more verbose on denying. If there is no negative comment, possibly this feature will be accepted. We are accepting PRs :smiley:. Comment or this will be closed in 7 days

[mraible]

Keep it open! Are there any volunteers that can look into this for $500? If not, I can look into it as I've done a migration in the past.

[rs4231199]

@mraible

Keep it open! Are there any volunteers that can look into this for $500?

I will do it.

[mrts]

I will do it.

Thanks! As BootstrapVue doesn't yet support Vue 3, do you plan to use https://github.com/cdmoro/bootstrap-vue-3 or simply use Vue 3 and Bootstrap 5 together?

Caveats:

• the first option is currently incomplete and unstable (quoting their README: This project is still in alpha version so there is a lot of work to do),
• the second option might require extensive work with Bootstrap JavaScript code, see https://github.com/bootstrap-vue/bootstrap-vue/issues/5196#issuecomment-893312245.

Another option is to use PrimeVue in Bootstrap mode instead of BootstrapVue, but I haven't used it myself. PrimeVue was endorsed recently by Vue.js official Twitter account and it seems to be used by many large companies.

[gmarziou]

Using PrimeVue would make sense if JHipster Angular would use PrimeNG which I would love but I doubt it will happen.

[mrts]

@gmarziou, considering that the big three are covered (PrimeNG, PrimeReact, PrimeVue) and the license is liberal MIT, PrimeFaces looks really attractive for JHipster, we could use it somewhat consistently across the three frameworks. What are the downsides of using it, what's holding us back?

[mraible]

I think the downside is the maintainers know Bootstrap better. It might be a good idea to create a blueprint or module for this.

On Thu, Oct 21, 2021 at 13:41 Mart Sõmermaa @.***> wrote:

@gmarziou https://github.com/gmarziou, considering that the big three are covered (PrimeNG, PrimeReact, PrimeVue), PrimeFaces looks really attractive for JHipster. What are the downsides of using it?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jhipster/generator-jhipster/issues/12558#issuecomment-948945945, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAELZAPAOGW5EVURSDPIKDUIBUFPANCNFSM4RTFCCZQ .

[pascalgrimaud]

There is already a blueprint for primeng: https://github.com/sudheerj/generator-jhipster-primeng

Could be done for primereact and primevue

[gmarziou]

@pascalgrimaud you're right but this blueprint does not modify the frontend code for entities, it's more a scaffolding tool with demos of selected widgets.

[mrts]

By the way, I would strongly suggest that we use <script setup> that was introduced in Vue 3.2 and is also officially recommended. It is so good that it hurts, resembling Svelte - you just write variables and functions in the <script setup> block and they become available in the template scope automatically and become reactive when you use ref.

Here's a minimal example from the release blog post:

<script setup>
import { ref } from 'vue'

const color = ref('red')
</script>

<template>
  <button @click="color = color === 'red' ? 'green' : 'red'">
    Color is: {{ color }}
  </button>
</template>

<style scoped>
button {
  color: v-bind(color);
}
</style>

And here's a simple to-do list component that loads data from and saves it to a REST API that is part of a full project that you can experiment with.

Note that the project uses Vite (by Vue author Evan You) instead of Webpack that gives a tremendous speed-up to front-end development. Vite has become wildly popular, also outside of the Vue ecosystem, so it is another piece of the puzzle to consider.

[mshima]

Having same toolkit for every client framework is hand for maintenance. They share the same translation process, same rtl support, same webpack plugins for specific things like notification, microfrontend, browser sync. Hopefully this new development finally will get us there https://github.com/bootstrap-vue/bootstrap-vue/pull/6845.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Our core developers tend to be more verbose on denying. If there is no negative comment, possibly this feature will be accepted. We are accepting PRs :smiley:. Comment or this will be closed in 7 days

[mraible]

Keep it open.

[mraible]

Maybe we should split this one into smaller tasks to inspire contributions?