[Task] v-treeview

[chris-sab]

Overview

• Related Tasks: n/a
• Related Issues: n/a

A conversion should not start until all assigned issues with the milestone v2.2.x are resolved and in the next branch. Reference our Coding Guidelines for information regarding the team's practices or reach out to us on Discord.

[Antti-Palola]

Is there an update for treeview availability? It is still under 3.0.0 milestone but not included anymore in https://github.com/vuetifyjs/vuetify/issues/14984.

[egorovd]

Hello. I have a project that was written using vue2 and is planning to switch to vue3. But since this component has not yet been implemented, I cannot start the migration. Tell me if you can somehow sponsor the acceleration of the addition of this component. Thank you.

[chris-sab]

@egorovd could you please email to me? my email address is christopher.sab@outlook.com

[egorovd]

Of course, first of all, people from the main team are considered. @johnleider, do you have anyone who can do this, or is it better to let @chris-sab do it?

[KaelWD]

It's already been started, will probably be one of the first things in 3.1 alpha: https://github.com/vuetifyjs/vuetify/pull/14715

[buzzhr]

It's already been started, will probably be one of the first things in 3.1 alpha: #14715

I am glad to know VTreeview as the first component. It is very important to us.

[MichaelGitArt]

Will it be in v3.2.0 or later?

[mftruso]

@KaelWD is there still planned support for this component? There isn't a milestone assigned to this issue and there hasn't been any action on the PR in several months

[johnleider]

@KaelWD is there still planned support for this component? There isn't a milestone assigned to this issue and there hasn't been any action on the PR in several months

A stale PR for a component port from v2 to v3 does not indicate us dropping support. It means that we don't have a champion (developer) to spearhead it at the moment or focus has shifted to another area of the framework for one reason or another.

[egorovd]

I see this component is very necessary. Maybe we can raise some money to include it in the next release? From myself I can $300. Is there anyone else who would like to join this initiative? For me, this is a "blocking" component, for switching to the 3rd version. @johnleider , what do you say? Support us? )

[MichaelGitArt]

I see this component is very necessary. Maybe we can raise some money to include it in the next release? From myself I can $300. Is there anyone else who would like to join this initiative? For me, this is a "blocking" component, for switching to the 3rd version. @johnleider , what do you say? Support us? )

150$ from me :)

[johnleider]

I don't have the bandwidth to work on this atm sorry. If anyone else is able to step up, I'll do what I can to help.

[egorovd]

@johnleider , thanks for the answer. Understand... But I really want to speed up this topic. Willing to pay if the core team is loaded, willing to pay anyone (through a donation) $500 for a commit that goes to the main branch.

[johnleider]

It's more of a bandwidth issue. I'm working on solving the solution. Donations to https://opencollective.com/vuetify help but I need more developers.

[egorovd]

Thank you @johnleider .

Understood... The question is closed. $500 went to the Core team.

[septatrix]

There seems to be a draft PR (#14715) which did not have much activity recently. It is, however, listed under the 3.2.0 milestone.

@johnleider might it be possible to add these to the Labs components? This way more people might check them out, report bugs or contribute missing features

[johnleider]

There seems to be a draft PR (#14715) which did not have much activity recently. It is, however, listed under the 3.2.0 milestone.

@johnleider might it be possible to add these to the Labs components? This way more people might check them out, report bugs or contribute missing features

It would be with the right help. Anyone interested can reach out to me in Discord.

[egorovd]

@johnerneiderne tentative plans for when we can expect this widget in some release ? Thank you.

[johnleider]

Not at the moment. There is an existing PR but it's pretty outdated at this point.

[egorovd]

That is very unfortunate. So the next project will be on Quasar.

[MichaelGitArt]

That is very unfortunate. So the next project will be on Quasar.

Is it a problem to create temporary replacement? It's quite a simple component.

(I like vuetify much more than Quasar)

[egorovd]

Yes, I like it better too, but I need to start a project and I don't have a component. I either have to use vue2 (which I don't want) or wait for a component or use Quasar.

[lecaillon]

You can try vue3-treeview. It works for me.

[egorovd]

You can try vue3-treeview. It works for me.

Hmm, very interesting.... I will definitely try it. Thanks.

[mgd216]

You can try vue3-treeview. It works for me.

@lecaillon Thanks for the mention of vue3-treeview works really well. Unfortunately for our needs the Vuetify Treeview allows for other components to be in the display slot, vue3-treeview only allows text. This is an example of our Vuetify2 Treeview component that managed a large organizational tree for our customer:

The beauty of the Vuetify VTreeview was the components in the slot. As you can see we have an Org ID component (swoosh) on the left that would navigate to the org. And then if you were an Admin on the right you have icons to edit the Org information, add new orgs, or move them up or down in the tree.

When we transitioned from Vue2/Vuetify2 to Vue3/Nuxt3/Vuetify3 we had to comment out VTreeview and just use RecycleScroller:

While not as clean as VTreeview, it works, just a little confusing if you are trying to move orgs up and down within a branch.

@johnleider I took a look at the PR for VTreeview and you are correct, it is pretty old. I tried updating the PR with the latest Vuetify develop branch and there were a bunch of conflicts. Probably best to start again from the latest develop branch. I'll try and take another shot at creating a new PR for this. I know you are super busy but if there is another core Vuetify team member that could provide some guidance, that would be great.

[Muchieman7]

I'd just like to chime in here and say that v-list subgroups are basically just treeviews...

https://vuetifyjs.com/en/components/lists/

[johnleider]

I'd just like to chime in here and say that v-list subgroups are basically just treeviews...

vuetifyjs.com/en/components/lists

That's correct. v-list is built with basically the same nested functionality as v-treeview used in v2.

[tit1]

Yes, I like it better too, but I need to start a project and I don't have a component. I either have to use vue2 (which I don't want) or wait for a component or use Quasar.

thanks.. Im switching to Quasar as well. I love Vuetify but there is just to much missing from v.3 that is making it hard to justify it continual use.

[mgd216]

@Muchieman7 and @johnleider , thank you for the suggestion of using v-list and v-list-group, I was able to replicate the same functionality as v-treeview:

Below is a snippet from our code to show how I used the v-list component and then created a recursive component to create the sub groups. We are using Vue3 / Vuetify3 / and Nuxt3:

pages/AdminOrg.vue

<script setup lang="ts">
import AdminOrgCreateDialog from '~~/components/Admin/Org/CreateDialog.vue';

const open = ref<any[]>([]);
const orgTree = ref<any[]>([
    {_id: 'CORP', orgName: 'The Corporation', subOrgs: [
    {_id: 'A', orgName: 'Synergistic analyzer', parent: 'CORP', subOrgs:[
        {_id: 'A1', orgName: 'Name 1', parent: 'A', subOrgs:[]},
        {_id: 'A2', orgName: 'Name 2', parent: 'A', subOrgs:[]},
    ]},
    {_id: 'B', orgName: 'Face to Face', parent: 'CORP', subOrgs:[
        {_id: 'B1', orgName: 'Name 1', parent: 'B', subOrgs:[]},
        {_id: 'B2', orgName: 'Name 2', parent: 'B', subOrgs:[]},
    ]},
    ]}
]);

const { setEvent, removeEvent } = useGlobalEvent();  // composable that uses tiny-emitter

onBeforeMount(() => {
  open.value = orgTree.value.length > 0 ? [orgTree.value[0]._id] : [];
  setEvent('show-create-org-dialog', showCreateOrgDialog);
});

onBeforeUnmount(() => {
  removeEvent('show-create-org-dialog');
});

function closeAllOrgs() {
  open.value = orgTree.value.length > 0 ? [orgTree.value[0]._id] : [];
}

function showCreateOrgDialog(parentOrg) {
  AdminOrgCreateDialogRef.value?.showOrgDialog(parentOrg);
}
</script>

<template>
<div>
    <v-card>
        <v-btn @click="closeAllOrgs()">Close All</v-btn>
        <template #body>
            <div class="scroller-550">
            <v-list :opened="open" density="compact">
                <EditGroup :orgs="orgTree" />
            </v-list>
            </div>
        </template>
    </v-card>
    <AdminOrgCreateDialog ref="AdminOrgCreateDialogRef" />
  </div>
</template>

compoents/EditGroup.vue

<script setup lang="ts">
defineProps({
  orgs: {
    type: Array as PropType<Array<any>>,
    default: () => {
      return [];
    },
  },
});

const { emitEvent } = useGlobalEvent();

function showCreateOrgDialog(org) {
  emitEvent('show-create-org-dialog', org);
}
</script>

<template>
  <template v-for="org in orgs" :key="org._id">
    <v-list-item v-if="org.subOrgs.length === 0" style="margin-right: 50px">
        <div>{{ org._id }} - {{ org.orgName }}</div>
          <v-tooltip content-class="base-tooltip" location="bottom">
            <template #activator="{ props }">
              <v-icon
                icon="fa:fas fa-plus-square"
                class="ml-2"
                v-bind="props"
                @click="showCreateOrgDialog(org.org)"
              />
            </template>
            <div class="pa-1">Add new sub org to {{ org.org }}</div>
          </v-tooltip>
    </v-list-item>
    <template v-else>
      <v-list-group :value="org._id">
        <template #activator="{ props }">
          <v-list-item v-bind="props">
            <div>{{ org._id }} - {{ org.orgName }}</div>
            <!-- IMPORATANT use @click.stop to stop the event propogation to the v-list-item -->
            <v-tooltip content-class="base-tooltip" location="bottom">
            <template #activator="{ props }">
              <v-icon
                icon="fa:fas fa-plus-square"
                class="ml-2"
                v-bind="props"
                @click.stop="showCreateOrgDialog(org.org)"
              />
            </template>
            <div class="pa-1">Add new sub org to {{ org.org }}</div>
          </v-tooltip>
          </v-list-item>
        </template>
        <!-- RECURSION call the same compoent to create sub orgs in the tree -->
        <EditGroup :orgs="org.subOrgs" />
      </v-list-group>
    </template>
  </template>
</template>

[mgd216]

While there are many Vue UI Frameworks to choose from, for the task assigned by our client, create a large custom corporate dashboard, Vuetify IS the right fit. We migrated from Vue2/Vuetify2 to Vue3/Vuetify3/Nuxt3 about 3 months ago and it was a HUGE improvement. I held out on TypeScript until Nuxt made it so simple to setup and use, now I wouldn't think of using anything without TypeScript.

Vuetify is a large framework and saves us a lot of time providing new features to our client. The transition from Vuetify 2 to 3 was immense. Many thanks to the hard work of @johnleider and the rest of the Vuetify team and all its contributors. THANK YOU !

[dkarnacewicz]

@KaelWD shall We get any informations in which version VTreeview can be available? I Can see open PR - https://github.com/vuetifyjs/vuetify/pull/17864

[Soutea]

Any update? 🙏

[johnleider]

Unless a miracle happens, there's no one to work on it until at least v3.4 (November).

[prashantsinghb]

@johnleider - I can work on the v-treeview ( #17864 ) , if someone from core team can validate the approach and direction. I desperately need this component for my project.

[johnleider]

@johnleider - I can work on the v-treeview ( #17864 ) , if someone from core team can validate the approach and direction. I desperately need this component for my project.

Ping me in the Discord Community

[Aassifh]

Happy to work on the component because i need it for my project also

[djordan]

@johnleider - I see there has been some significant work on this. Any chance it will get included in the 3.5 release? I see it's not listed as part of the 3.5 roadmap right now, but I understand that's still subject to change. Thanks.

[egorovd]

Thinking out loud.

I can't understand why development is going so slowly. If you don’t have enough funds, organize a collection of funds so that there is enough for everything, at least to have a minimum set of all the most important elements. You go to the quasar and you can’t understand how they managed to do it all. At this rate, the review will be in a year. The element has been added for years!!! A lot of users have left you because everything is extremely slow and it’s scary.

P.S. Someone should have voiced this. These are not criticisms, this is about fears of investing in a project, both with money and starting something new on it.

[johnleider]

Your anecdotes aren't valid, I'm sorry.

[ffxsam]

If you don’t have enough funds, organize a collection of funds so that there is enough for everything, at least to have a minimum set of all the most important elements.

One does not simply shout to the world, "We're accepting donations now!" and expect money to flow in. Don't you think John is already doing everything he can to raise funds to hire help? It's an incredibly difficult undertaking to raise money, especially for an open source project that can't offer a return to investors. You have to rely on the generosity of sponsors (especially corporate ones who can offer more capital). And it's so easy for big companies to leverage open source projects and choose not to donate, because, "hey, it's free—why should we pay?" Of course, I'm sure John would welcome any brilliant fund-raising ideas if you have them. Otherwise, perhaps your energy is better spent on submitting PRs.

[johnleider]

If you don’t have enough funds, organize a collection of funds so that there is enough for everything, at least to have a minimum set of all the most important elements.

One does not simply shout to the world, "We're accepting donations now!" and expect money to flow in. Don't you think John is already doing everything he can to raise funds to hire help? It's an incredibly difficult undertaking to raise money, especially for an open source project that can't offer a return to investors. You have to rely on the generosity of sponsors (especially corporate ones who can offer more capital). And it's so easy for big companies to leverage open source projects and choose not to donate, because, "hey, it's free—why should we pay?" Of course, I'm sure John would welcome any brilliant fund-raising ideas if you have them. Otherwise, perhaps your energy is better spent on submitting PRs.

Thank you for wording what I couldn't.

[egorovd]

Yes, I understand everything... And of course, from my side, everything may have a different look. But something needs to be done. I really like the project and have been following it for a very long time, using it and sponsoring it... But, over the past six months, I have heard from several people that they do not want and do not plan to use View because it is developing very slowly. And this makes me very sad. But if it had more content, they would definitely use it. I don’t know, maybe you need to somehow declare your plans and intentions more aggressively. The “donate me money” model has exhausted itself. We need to state directly: we want to make a cool framework and we need so much money, in turn we promise to do “this...”. Maybe find a grant from a government agency or institute. Everyone now makes a lot of websites and everyone chooses frameworks to work with, but not you and this is very bad. And of course they want to have a full range of widgets. This is all in order to be successful here you need to “be everywhere”. If "open source" - then this is what should be everywhere.

Ok, I understand your “problem”. I will definitely think about how I can make the project more popular.

[eduardo76]

Hi guys! I came to this thread when I reached the migration guide and I clicked in the v-treeeview link. I thought it was included in this new version. But to my disappointment he is not there as some props in v-data-table. I use v-treeview in my projects too.

Maybe this is not the place to write my perceptions about Vuetify, but tha last comment is about 3 weeks only.

First of all, I use Vuetify since 2017 and this is the best Vue based project.

I agree in many aspects with @egorovd and I understand all @ffxsam has stated. Vuetify is a greate project and I would like to sponsor it if I had enough budget to share with the project.

But there are manythings I don't comprehend. Why every Vuetify upgrade development happens from ground up, including documentation? Documentation suffers with many modifications and lack of informations, because someone always choose to recreate instead of evolute. Why Vuetify is so couped with current Vue version, that makes it obsolete as a new Vue version is released. Why everything have be done from zero and the previus version is trashed, cannot be used as base for new versions.

Tecnically I can make an effort to understand all these things, but how can I explain to some new developer that the tecnology that you told it to use is now obsolete and if it wants to make a full upgrade it can't.

PS.: I use Vuetify in some projects. Vuetify is a great project. I'm very thankful for @johnleider and his team efforts at doing this great job on Vuetify. Congratulations guys! Keep doing this great work.

[ffxsam]

@eduardo76 I can't really answer those questions since I'm not on the Vuetify team, but I will say this about Vuetify 3 being a total rewrite:

Vue 3 is a huge change over Vue 2. So much so, that we actually decided to rewrite our app from the ground up rather than just run through migration steps to migrate the code base. I was concerned about technical debt. Still, much of the code is copy/paste with some tweaks to clean it up, but a big chunk is written from scratch.

I think the jump from Vue 2 to Vue 3 necessitated Vuetify to be rewritten from scratch as well. It'll be more maintainable in the long term.

[johnleider]

Thanks for sharing your thoughts on Vuetify. I understand where you're coming from and appreciate your long-term support. Here's a bit more context to address some of your concerns:

COVID Impact: The pandemic hit us hard, reducing both financial support and community contributions. This has been a challenge for many open-source projects.

Documentation Update: We revamped the documentation to make it more maintainable and easier for others to contribute. It’s a balance to keep it comprehensive yet manageable.

Architecture Changes: Vuetify 2 used render functions, which made contributions challenging. With Vue 3's shift to the composition API, we faced significant architectural changes. It was a tough decision, but essential for long-term benefits.

Decision Against Short-Term Fixes: We explored temporary solutions to adapt Vuetify 2 for Vue 3, but decided against it. Maintaining such a setup, knowing it would still require a rewrite for the composition API, didn't seem viable in the long run.

Vue’s Evolution: Vue's transition from version 2 to 3 was substantial. However, Vue has acknowledged this and doesn't plan for such drastic changes in future major releases. This means we won't have to rewrite Vuetify like this again.

Vuetify 2's Relevance: Vuetify 2 remains a solid library and is far from obsolete. It's still a great choice for many projects.

Your feedback is crucial, and I'd love to hear more about any specific issues you're facing with the documentation. Your input helps us improve.

Keep the feedback coming, and thanks again for being part of the Vuetify journey!

Cheers, John

[guykatz]

what a great thread to be subscribed on :) thanks everyone for sharing and especially the Vuetify Team. keeping my fingers crossed to the v-treeview to arrive soon, its the last component I need to start the transition to vuetify 3... thanks again!

[Oscaner]

Hi guys, How can I use the v-treeview from this PR? Or have any workaround? I was blocked here. Please help me, need some advice, thanksssss!

[johnleider]

I'm starting on Treeview this week. Thank you for everyone's patience.

[nabenzine]

@johnleider Great news ! thank you very much, this component is blocking us from moving to vue 3 since we heavilly rely on.

Just out of curiosity, do you think it a matter of week's or months to make it to the Lab (no pressure ofc) ?

Thank you

[Haze272]

@johnleider so pleasant that you're gonna implement this on v3! Will it have the save functionality as in v2?