Update on my vueFlow coded component

So I posted this a while back: Building a custom component with vueFlow (nodes)

I started trying to implement a coded component using vue flow and I actually managed to get started (I’m not all that proficient with code and custom components in weweb seemed intimidating).

Today I put it into an actuall platform I am building:
Gravando 2025-05-27 204539

There is now a lot of small improvements to be made, but the bulk of it is done :smiley:

This will be a “customer journey” creator.

I am partner at a small strategy firm and we have a very complex strategic planning and goals tracking platform in Bubble, with paying customers and all.

I started moving it to weweb because it gave me SO MUCH MORE possibilities, and, with all the AI hype, we decided to integrate some other consulting stuff too… The customer journey builder will be part of a bigger Corporate Strategy AI that I am currently starting to implement :slight_smile:

Anyway… I am posting this as an encouragement for anyone wondering about coded components and feeling intimidated. Cursor + Weweb’s docs and Github can help you A LOT!

6 Likes

Is the content of the nodes hardcoded?

Once again Azuliani, great job! :tada:

I love watching you improve your idea.

Will you implement images in these cards?

No! Right now they have some default values I set up for testing, but I get the contents from the client info data.

Client info is a json and, inside that json, I have a customer_jorney part where I save the information that generates the nodes (right now with title, agent and description for the nodes).

The idea is to send this structure to an agent that will run the workflows that generates the corporate strategy document… (and I just setup the API for the agent haha)

Not for these…

I am planning to use vueflow for creating the org chart as well… there I might use pictures :slight_smile:

1 Like

Wow Azuliani, I love it.

The flexibility of drag and drop is exactly what I need for the app I’m building, (and I’m also a bit intimidated by the coding for the custom components) any tips for me on how to start?

In my case, I want the user to be able to select from a list of different elements and then adjust them to the screen as they want, finally add their information and as a result have one nice page tailored according to their needs.

I’ve made some progress with the WeWeb ai, but I don’t have tokens anymore, so I guess it’s a good opportunity for me to learn how to continue until the tokens are refreshed.

Thanks in advance for your help.

I think it depends a lot on what you are building (it was clear to me, but for these things you need to be technical hahah).

I could see you building this idea only using weweb, or just implementing some siple drag and drop functionalities…

Vueflow is good for specific flow-like stuff. And I mean specific because you`ll need to code the nodes, which might not give you as much freedom as you want for your users…

If you want to just discuss the idea, we can talk

1 Like

thank you so much Azuliani!!! :slightly_smiling_face:, I would love if we could have a couple of minutes to talk about this, where can I contact you privately so we don’t disturb the community?

This is my linkedin: https://www.linkedin.com/in/gabriela-padilla-2b33ab52/

2 Likes

I think you could build this with the Reorder List element. I’ve built something similar. Probably a custom component would be suitable too though.

1 Like

Just sent a request on linkedin!

1 Like

Hi Broberto,

Thanks, I’ll try to make the custom component with ChatGPT let’s see how it goes.

The reorder list element is also going to be super helpful.