I'm currently in the process of upgrading from Vuetify/Vue 2 to Vue 3. As someone who is not primarily a front-end developer, I have been tasked with updating some older code to ensure everything continues to work smoothly. However, I've run into some challenges as the migration guide assumes a basic understanding of CSS and lacks clear examples on how to tackle issues arising from deprecated elements.
One specific issue I'm facing involves replacing the outdated v-list-item-content / v-list-item-group in the following code snippet:
<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 simply states:
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.
The instructions to "use CSS grid for layout" are unclear to me, especially since I lack expertise in CSS. Additionally, the explanation regarding v-list-item-group covers multiple concepts without providing any concrete examples.
Any guidance or assistance would be greatly appreciated. Thank you!
(I initially posted this inquiry here, where it was recommended that I split it into separate questions)