1

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.

Unfortunately, the only advice it gives is:

stateless, clipped, clipped-right and app props have been removed from v-navigation-drawer, v-app-bar and v-system-bar. The position in the markup determines the appearance. Use the order="number" prop to influence it manually.

Cool, so I know I need to replace those with order. But I have no idea how to maintain the old behavior; the closest help I've managed to find is this post answer, which just says

Documentation for this is here: https://next.vuetifyjs.com/en/features/application-layout/

The way layout components arrange themselves is controlled by the order they appear in the template, and can be adjusted with the order prop which behaves like order in CSS.

Not super helpful if you don't know CSS, unfortunately. That application-layout page only seems to have one example of the order property (under the dynamic layouts section).

In particular, I'm struggling to figure out what to do with the app/clipped-left/offset-y in this block:

<template>
  <v-app>
    <v-app-bar app clipped-left dense>
      <v-app-bar-nav-icon @click.stop="mini = !mini">
        <v-icon v-if="!mini" slot="default">mdi-menu-open</v-icon>
      </v-app-bar-nav-icon>

      <v-toolbar-title>**************</v-toolbar-title>

      <v-spacer />

      <v-menu offset-y location="left bottom">

Thank you!

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

user3534080
  • 1,201
  • 1
  • 14
  • 21

1 Answers1

1

All these properties control the main application layout in v2. In v3, the system was changed and it should be much easier and straight-forward.

As to the order, in the new layout, components are added in the order they appear in the HTML, and each component positions itself in the currently available space. So with a navigation drawer and an app-bar, the declaration order decides which one you get:

--------------    --------------
|    bar     |    | m |  bar   |
--------------    | e |---------
| m |        |    | n |        |
| e |        | or | u |        |
| n |        |    |   |        |
| u |        |    |   |        |
--------------    --------------
bar then menu     menu then bar

If for some reason you want to declare the components in a different order than you want to position them, you can use the order prop to change it around (I don't think you will need that).

The app property you can just remove, it is implicit now for the top layout components (like v-app-bar or navigation-drawer)

The clipped-left property allowed the navigation-drawer to overlap the v-app-bar, so if you show the drawer, it would not push the content of the app-bar to the right. I am not sure if this is possible in v3.

The offset-y property of v-menu was used so the menu opens below the app-bar and it looks like a file menu, again, not sure if this is possible in v3.

Moritz Ringler
  • 9,772
  • 9
  • 21
  • 34
  • the documentation you linked I literally mentioned in my OP, and I mentioned that it didn't help, since I don't know CSS. But the rest is helpful, thanks. – user3534080 May 12 '23 at 18:56
  • 1
    Right, yes, sorry, have a look at the updated answer if you want to know about the order prop, let me know if it makes sense – Moritz Ringler May 12 '23 at 19:19