Search code examples
cssvue.jsvuejs3vuetify.jsvuetifyjs3

Vuetify 2->3 replacing removed v-list-item-content / v-list-item-group

I'm trying to upgrade from Vuetify/Vue 2->3. I'm not a front-end developer, just tasked with upgrading some legacy code to keep things functioning. Unfortunately, the migration guide seems to assume a level of baseline CSS knowledge and doesn't provide examples of how to fix everything that was removed.

One of the things I'm struggling with is replacing the deprecated v-list-item-content / v-list-item-group in this block of code:

    <v-navigation-drawer :rail="mini" permanent clipped app width="200">
      <v-list density="compact">
        <v-list-item-group v-model="selected">
          <v-list-item
            v-for="item in items"
            :key="item.title"
            link
            :disabled="item.disabled"
            :icon="item.icon || null"
          >
            <v-list-item-content>
              <v-list-item-title>{{ item.title }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-navigation-drawer>

The migration guide just says:

v-list-item-content has been removed, lists use CSS grid for layout now instead.

and

v-list-item-group has been removed, just add value to list items to make them selectable and bind v-model:selected on v-list to get the selected value.

I have no idea what they mean by "use CSS grid for layout" and since I don't know CSS, I'm stuck. And the note about v-list-item-group talks about multiple things with no examples!

Any help would be appreciated. Thank you!

(I originally asked this here and it was suggested that I split that into multiple questions)

Solution

  • The migration guide could be improved! Hopefully this helps...

    v-list-item-content has been removed, lists use CSS grid for layout now instead.

    If you look at the output under version 3 you will see this element is there .v-list-item__content with associated grid styles so you no longer need to add this to achieve the same thing.

    v-list-item-group has been removed, just add value to list items to make them selectable and bind v-model:selected on v-list to get the selected value.

    Add value to list items to make them selectable.

    <v-list :items="items"></v-list>

    Bind v-model:selected on v-list to get the selected value.

    This doesnt work, however there are events emitted so if you need the value, you can get it with the following:

    <v-list
  :items="items" 
  @update:selected="selected" // <<< Listen for event
/>

    Example: Codepen