Vue.js as frontend?

Added by Christian Schnabl 3 months ago

Hi there,

i know this is the core development track, but i think its the right place to ask this question.
I was building custom redmine theme components for quite a while now - also integrated some react components.
But concerning the overall architecture of redmine i wonder if there is a clean way to integrate vue.js as a frontend framework handling main components.

I know that the rest api does of course not support everything, but based on the rails framework and the current state of redmine -

Do you think there is any kind of clean interfacing to connect vue.js with redmine ?

Best,
Chris

Replies (6)

RE: Vue.js as frontend? - Added by Bernhard Rohloff about 1 month ago

I don't know if this is a hot topic anymore, but Akiko has some vue.js integration in her plugin so perhaps she can ask your questions.

Kind regards,

Bernhard

RE: Vue.js as frontend? - Added by Akiko Takano about 1 month ago

Hi, Bernhard.
Thanks for the above reply.

As Bernhard mentioned, the latest version of my plugin is trying to apply Vue.js partially to create an issue template with custom fields setting.
Since Redmine does not use Vue.js's library but jQuery, I added the vue.min.js in my plugin's assets.

Please note, I'm not a skilled front-end engineer and my plugin's implementation is quite rough.
So that Vue / JavaScript code is not so complexed. Sorry I could not give you any good suggestions.....

Here is the place that using Vue and related JS. I hope this would be of any help.

RE: Vue.js as frontend? - Added by Christian Schnabl 25 days ago

Thanks for the feedback and the links @Akiko and @Bernhard !

The plugin approach looks very interesting. I am currently working with vue on different projects which need some partial, component based integration.
I wonder if it would be an idea to use the rest api (i did not dive into your code yet) to extend some features, too. Not sure about that yet.

It might be worth working on the view to extend certain ui features with vue. As a start, i thought of adding vuejs components to the date and time form fields (e.g. on ticket and timetracking views).

Could be quite a usability boost there.

So another question would be if it makes sense (in a custom redmine instance) at all to go into core and add those features or if it should mainly be provided via plugins and the theme. Not sure about that.

Best,
Chris

RE: Vue.js as frontend? - Added by Alfred Williams 18 days ago

Hello everyone
Vue.js is one of the most popular JavaScript frameworks and is being adopted by many web and hybrid-mobile developers for their personal and working projects.Unfortunately, Vue.js mainly focuses on the application logic and not on its appearance. It is usually a good idea to use it in combination with a front-end UI framework to enrich the user interface.

RE: Vue.js as frontend? - Added by Pinner Ashton 3 days ago

Vue. js aims to be an approachable, versatile, performant, maintainable, and testable JavaScript framework. Vue also aims to be progressive, meaning that if you have an existing application you can use Vue in just one part of your front-end that needs a more interactive experience https://www.upsers.club/

RE: Vue.js as frontend? - Added by Akiko Takano about 18 hours ago

Hi, Pinner

if you have an existing application you can use Vue in just one part of your front-end that needs a more interactive experience

I agree with this opinion.
In my plugin, I applied partially Vue.js to implement a more user-friendly interface. Of course, I also use the jQuery.

Redmine's API is not enough for my plugin.
But I don't like to customize Redmine's core code directly. This is because to keep easy to update Redmine.

So, I provided some simple additional endpoint to return JSON in my plugin.
Instead of this approach, I have to keep maintaining the plugin but I accepted it.

I think that using Vue.js or some of the latest frameworks on the front end of Redmine itself still needs discussion.
But I hope my tiny plugin will be helpful for future releases.

(1-6/6)