# Update on my vueFlow coded component

**URL:** <https://community.weweb.io/t/update-on-my-vueflow-coded-component/18465>\
**Category:** Show and Tell\
**Created:** [May 27, 2025, 11:51pm UTC](https://community.weweb.io/t/update-on-my-vueflow-coded-component/18465 "2025-05-27T23:51:31Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![azuliani](https://avatars.discourse-cdn.com/v4/letter/a/5e9695/32.png) [@azuliani](https://community.weweb.io/u/azuliani)\
**Post date:** [May 27, 2025, 11:51pm UTC](https://community.weweb.io/t/update-on-my-vueflow-coded-component/18465/1 "2025-05-27T23:51:31Z")

</div>

So I posted this a while back: [Building a custom component with vueFlow (nodes)](https://community.weweb.io/t/building-a-custom-component-with-vueflow-nodes/18356)

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](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/2/2437e14866d43c8b80731bc7d880751b1115b56f.gif)

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

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 🙂

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!

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [May 28, 2025, 7:10am UTC](https://community.weweb.io/t/update-on-my-vueflow-coded-component/18465/2 "2025-05-28T07:10:41Z")

</div>

Is the content of the nodes hardcoded?

---

<div class="post-metadata">

**Author:** ![Agustin\_Carozo](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/agustin_carozo/32/13231_2.png) [@Agustin\_Carozo](https://community.weweb.io/u/Agustin_Carozo)\
**Post date:** [May 28, 2025, 11:51am UTC](https://community.weweb.io/t/update-on-my-vueflow-coded-component/18465/3 "2025-05-28T11:51:47Z")

</div>

Once again Azuliani, great job! 🎉

I love watching you improve your idea.

Will you implement images in these cards?

---

<div class="post-metadata">

**Author:** ![azuliani](https://avatars.discourse-cdn.com/v4/letter/a/5e9695/32.png) [@azuliani](https://community.weweb.io/u/azuliani)\
**Post date:** [May 28, 2025, 5:03pm UTC](https://community.weweb.io/t/update-on-my-vueflow-coded-component/18465/4 "2025-05-28T17:03:39Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![azuliani](https://avatars.discourse-cdn.com/v4/letter/a/5e9695/32.png) [@azuliani](https://community.weweb.io/u/azuliani)\
**Post date:** [May 28, 2025, 5:04pm UTC](https://community.weweb.io/t/update-on-my-vueflow-coded-component/18465/5 "2025-05-28T17:04:08Z")

</div>

Not for these…

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

---

<div class="post-metadata">

**Author:** ![Gaby\_Padilla](https://avatars.discourse-cdn.com/v4/letter/g/bc8723/32.png) [@Gaby\_Padilla](https://community.weweb.io/u/Gaby_Padilla)\
**Post date:** [May 30, 2025, 6:35am UTC](https://community.weweb.io/t/update-on-my-vueflow-coded-component/18465/6 "2025-05-30T06:35:30Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![azuliani](https://avatars.discourse-cdn.com/v4/letter/a/5e9695/32.png) [@azuliani](https://community.weweb.io/u/azuliani)\
**Post date:** [May 30, 2025, 10:59am UTC](https://community.weweb.io/t/update-on-my-vueflow-coded-component/18465/8 "2025-05-30T10:59:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Gaby\_Padilla](https://avatars.discourse-cdn.com/v4/letter/g/bc8723/32.png) [@Gaby\_Padilla](https://community.weweb.io/u/Gaby_Padilla)\
**Post date:** [May 30, 2025, 11:11am UTC](https://community.weweb.io/t/update-on-my-vueflow-coded-component/18465/9 "2025-05-30T11:11:24Z")

</div>

thank you so much Azuliani!!! 🙂, 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/](https://www.linkedin.com/in/gabriela-padilla-2b33ab52/)

---

<div class="post-metadata">

**Author:** ![Broberto](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/broberto/32/5918_2.png) [@Broberto](https://community.weweb.io/u/Broberto)\
**Post date:** [May 30, 2025, 12:49pm UTC](https://community.weweb.io/t/update-on-my-vueflow-coded-component/18465/10 "2025-05-30T12:49:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![azuliani](https://avatars.discourse-cdn.com/v4/letter/a/5e9695/32.png) [@azuliani](https://community.weweb.io/u/azuliani)\
**Post date:** [May 30, 2025, 6:43pm UTC](https://community.weweb.io/t/update-on-my-vueflow-coded-component/18465/11 "2025-05-30T18:43:07Z")

</div>

Just sent a request on linkedin!

---

<div class="post-metadata">

**Author:** ![Gaby\_Padilla](https://avatars.discourse-cdn.com/v4/letter/g/bc8723/32.png) [@Gaby\_Padilla](https://community.weweb.io/u/Gaby_Padilla)\
**Post date:** [May 31, 2025, 7:19am UTC](https://community.weweb.io/t/update-on-my-vueflow-coded-component/18465/12 "2025-05-31T07:19:22Z")

</div>

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.
