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.

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.

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.

@egorovd could you please email to me? my email address is [email protected]

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?

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

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.

Will it be in v3.2.0 or later?

@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

@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.

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? )

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 :)

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.

@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.

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.

Thank you @johnleider .

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

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

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.

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

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

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

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)

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.

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

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

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

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.

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

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

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.

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.

@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>

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 !