ABP Vue startup template

[ugurozturk]

It would be great if abp has an option for starting template via Vue.

[hikalkan]

Thanks for the suggestion. Angular, React, Vue, Blazor templates are in the road map. However, our first priority is to release a stable version of the core framework with MVC UI.

[KevinFarrow]

Vue.Js, Nuxt.js with Typescript (including nswag) support, and PrimeVue components is probably the best way forward for the next startup template. As much as I like the idea of Blazor it is just too immature for production and probably will be for at least the next 6 to 12 months.

https://nuxtjs.org/
https://nuxtjs.org/guide/typescript
https://www.primefaces.org/primevue

[ugurozturk]

@KevinFarrow PrimeVue looks pretty good

Perhaps something like this can be also useful
https://github.com/chrisvfritz/vue-enterprise-boilerplate

Edit : I tried to modify it for abp yet, i failed because external login :|

[chrismckelt]

Some other good ones I have seen

https://github.com/o15y/staart-ui

https://github.com/coreui/coreui-free-vue-admin-template

https://github.com/Armour/vue-typescript-admin-template

https://github.com/NetCoreTemplates/vue-nuxt

https://github.com/TrilonIO/aspnetcore-Vue-starter

[hikalkan]

Thank you for sharing these. It will be helpful when we start to work on it.

[MightyLoggor]

I like this one for mobile. https://quasar.dev

[ugurozturk]

Just wanted to share github star compare react vs angular vs vue

[KevinFarrow]

The following combination would work well and doesn't force the user to use a complete 3rd party framework (quasar etc.) or set of boilerplate code (e.g. vue-enterprise-boilerplate).

• Vue.js (https://vuejs.org/)
• Nuxt (https://nuxtjs.org/)
• Typescript support (https://typescript.nuxtjs.org/)
• Vuetify (https://vuetifyjs.com/en/)
• Axios (https://github.com/axios/axios)
• NSwag (http://nswag.org/)

[theChrisMarsh]

I am really puzzled by the lack of comments, updates, or progress on this in almost a year. I assume it is not really on the roadmap. Is this actively being discussed and is there a timeframe if it is?

[shaofing]

Vue 3.0 + typescript

[niltor]

If it is to attract more people, then this is an option to consider, especially for developers in China, many novice use Vue.
However, ABP team made the right choice, they chose angular. Only angular can be said to be seamlessly integrated, especially when it comes to code generation, programming experience is completely different. Of course, if you just provide an initial template, it's still possible, but if you want to fully support it, such as generating all the basic code based on the model, I don't think it's worth it.

Besides, vue3+typescript is stupid, why not choose angular directly !

[brokenthorn]

If it is to attract more people, then this is an option to consider, especially for developers in China, many novice use Vue.
However, ABP team made the right choice, they chose angular. Only angular can be said to be seamlessly integrated, especially when it comes to code generation, programming experience is completely different. Of course, if you just provide an initial template, it's still possible, but if you want to fully support it, such as generating all the basic code based on the model, I don't think it's worth it.

Besides, vue3+typescript is stupid, why not choose angular directly !

OK, first of all, no project is stupid. And second of all Vue 3 is the first version of Vue that can be viably supported with ABP. It has first hand support for Typescript, being written completely in it. But that doesn't mean that supporting Vue is going to be easy. Current proxies would be easy to use with Vue 3 if you're OK with Observables/RxJS. But to be fully compliant with the Vue community guidelines and the way of developing apps in Vue, ABP would need to create a proxy generator with a Promise-based interface and also port over all ABP components from Angular to Vue. There is no doubt that such a combination between ABP and Vue 3 would have a huge following especially from China, but one problem will still remain. Vue lacks proper tooling, enterprise level tooling, and that is true especially for Vue 3 which is very new. With time, perhaps as Vue 3 gains traction and perhaps better integration with the major IDEs, including Visual Studio, Vue 3 will have to be supported by ABP, but right now, that's very much up in the air...

[hikalkan]

Supporting a 4th UI framework officially is very hard for us, to be honest. When we add it, all modules, theming, extensibility, modularity and every other feature should be compatible with that new UI type. This multiples our work and slows down us a lot. Also, it requires a strong expertise and we can not be best in every area.

So, to be honest, we are currently not planning a 4th UI in the middle term. We regularly re-evaluate our decisions based on changing conditions, but current situation is like that.

ABP is actually UI independent. You can use Vue or another SPA on frontend. If you want to use Vue or React today, I suggest to start with one of the vue/react empty startup templates and use ABP as a backend framework. Using Vue with ABP for a specific project is far more easier than adding & maintaining an official solution in the ABP platform.
The best we can do for now to create an article/guide to create a sample application with vue & abp.

[uwascan]

@hikalkan Most of the folks who want to use vue.js or react js do not need theming or tight integration what we need is just examples of how to hookup with the backend services provided by ABP Framework.
For those interested please check out this repo abp-vue-admin-element-typescript. Its uses the microservices project template and its what I have been following with great success. There is a lot to learn from the source code. This other repo has nice resources for ABP Framework

[yel-best]

Supporting a 4th UI framework officially is very hard for us, to be honest. When we add it, all modules, theming, extensibility, modularity and every other feature should be compatible with that new UI type. This multiples our work and slows down us a lot. Also, it requires a strong expertise and we can not be best in every area.

So, to be honest, we are currently not planning a 4th UI in the middle term. We regularly re-evaluate our decisions based on changing conditions, but current situation is like that.

ABP is actually UI independent. You can use Vue or another SPA on frontend. If you want to use Vue or React today, I suggest to start with one of the vue/react empty startup templates and use ABP as a backend framework. Using Vue with ABP for a specific project is far more easier than adding & maintaining an official solution in the ABP platform.
The best we can do for now to create an article/guide to create a sample application with vue & abp.

yes,you are right.

We are using the method you mentioned to create the project,But I have encountered a problem, because the user & permissions & other basic module apis attached to the abp startup project seem to be unable to correlate well with our vue project.

So I really hope to have an official abp guide, please, thank you. 😄

[sunyuliang]

vue?

[yb12306]

vue 遥遥无期

[mahdinai]

vue?

[daconglee]

为啥要使用vue?

[geextudio]

I am big fan of Vue and ABP, but I suggest the team keep ABP independent from any front-end framework since UI startup template never meet everyone's UI design, and we seldom use the default UI template in real world.

A practical guide or examples to integrate ABP backend service to any frontend is a better idea.

[davidzwa]

I am big fan of Vue and ABP, but I suggest the team keep ABP independent from any front-end framework since UI startup template never meet everyone's UI design, and we seldom use the default UI template in real world.

A practical guide or examples to integrate ABP backend service to any frontend is a better idea.

TL;DR stick to ABP as a default (profit 🥇), or face the fact that you might have to build some things again for staying ahead of the speed/size optimization curve (profit 🥇). You can then grind to optimize your app to be super fast and small.

I'm about to migrate away from Angular (for ABP) to Vue due to the immense increase in bundle size, slowdown of app development and simply the fact that my way of using ABP is not compliant with the default way of using ABP (f.e. plain JWT instead of oAuth, no IdentityServer/OpenIDDict).
Going to miss all the proxy-generated tools, translation hooks and more, but I also realize that by building it myself will give back a huge amount of control over bundle size, app loading speed and opinionated tooling.

So, yeah, I agree that ABP should not add Vue packages at all, because it is just not going to be optimal for developers who want:

• low bundle size
• fast development cycle ("grab a coffee while Angular's webpack is ramping up to 3GB of RAM usage in 2 minutes for a mini app)
• less is more (tooling wise)
• own choices of UI
• no custom webpack magic for localization integration
• no overriding of defaults provided by ABP to make your life easier (but in my case harder; similar to enforced oAuth)

Please note: this is not being critical towards ABP, I fully understand that in order to get projects started, choices have to be made! And I therefore would like to add that deviating from those choices is the problem of the developer/user, not ABP at all.

@uwascan https://github.com/colinin/abp-next-admin - this example is super fascinating from the pictures, but literally incomprehensible/illegible for anyone unable to understand Chinese. I do not understand why it is not common practice to document in English properly.

[roger-cprops]

I agree with the previous comments above regarding a guide for Vue. We purchased the Commercial license to build a microservices architecture for the backend and will have a Vue 3 frontend as well as exposing some of our services as external API's.

I've also been trying to unravel the Angular NPM modules to see if I can't leverage some of the code with Vue 3 but it's extremely time consuming.

A further recommendation to providing a Vue guide would be for Abp or someone to develop composables to include especially for the standard modules (Account, Identity, OpenIdDict, and Tenant).

[Amorganskate]

@roger-cprops I'm actually looking into this myself for work. Let me know how it goes.

[umerkle]

Hm, this issue is still open. Does this mean, the idea is still possible to be implemented?