How/when should I use v-layout in Vuetify 3?

Question

I don't understand when/where/why to use the v-layout component in Vuetify 3.

I see, for example, that in the docs for the app-bar component they have an example that uses v-layout (GitHub code), but its behavior/effect is confusing: if I run the example CodePen and remove the v-layout tags, the app-bar component extends to the edge of the page. I don't understand how/why the v-layout is limiting the app-bar.

Before:

After removing v-layout:

The official docs don't really talk about what it's for. The closest thing to a clue that I get is this comment on this page:

In the following examples, v-app has been replaced by v-layout. This is because v-app defaults to a minimum height of 100dvh. In your own application you would always use v-app for the root layout.

But v-app itself doesn't seem to have a clear explanation in the Vuetify 3 docs, I just know that it's supposed to be the topmost tag in a Vuetify app.

So is v-layout just something that certain Vuetify components (like the app bar and navigation drawer) use to determine where they should show up on the screen? Like, it defines the extent of the Vuetify app for those app bar and nav drawer components?

Aspirant

Answer 1

In Vuetify 3 the VLayout becomes VRow and VFlex becomes VCol, please, use the correct tag even if the old one is still available

https://vuetifyjs.com/en/components/grids/#v-row

Their behavior depends on many things, like if it is inside a VConteiner... VMain... what props you are using in its parent elements...

In your case, VLayout it is inside a VCard and that's wraps VAppBar width to the VCard width and when you remove, VAppBar width extends to the next parent grid layout width, VApp.

Recording

Answer 2

I think you'll find the answer if you look at the difference between the docs for v-layout in Vuetify 2 and Vuetify 3.

In the vuetify 2 documentation you see a lot of props, which are used to align, center, etc., so the v-layout is used for flexbox. On the vuetify 3 documentation you see almost nothing.

And, if you try, indeed the props don't exist anymore, look at this script with vuetify 2, we use the props column like this:

<v-layout column>
  <div>row 1</div>
  <div>row 2</div>
</v-layout>

And if you watch this code with vuetify 3, you can see we have a row. So, i think, v-layout is obsolete now, we keep him because migration from 2 to 3 is easier. I have personally on vuetify 2 never see or use v-layout.

Towandatoward