Vuetify 3 – Layout & Navigation

The Vuetify layout system is built around <v-app> plus a stack of layout components: <v-app-bar>, <v-navigation-drawer>, <v-main>, <v-footer>.

Standard shell

<template>
  <v-app>
    <v-app-bar color="primary" density="comfortable">
      <v-app-bar-nav-icon @click="drawer = !drawer" />
      <v-app-bar-title>KYD App</v-app-bar-title>
      <v-spacer />
      <v-btn icon="mdi-account-circle" @click="onProfile" />
    </v-app-bar>

    <v-navigation-drawer v-model="drawer">
      <v-list nav>
        <v-list-item
          v-for="item in nav"
          :key="item.to"
          :to="item.to"
          :title="item.title"
          :prepend-icon="item.icon"
        />
      </v-list>
    </v-navigation-drawer>

    <v-main>
      <v-container fluid>
        <router-view />
      </v-container>
    </v-main>

    <v-footer app>© KYD</v-footer>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      drawer: true,
      nav: [
        { to: '/',        title: 'Home',      icon: 'mdi-home' },
        { to: '/users',   title: 'Users',     icon: 'mdi-account-multiple' },
        { to: '/reports', title: 'Reports',   icon: 'mdi-chart-bar' },
      ],
    }
  },
  methods: {
    onProfile() { this.$router.push('/profile') },
  },
}
</script>

Important

• <v-main> automatically pads itself for the height of <v-app-bar> and the width of <v-navigation-drawer>. Don't add manual margins — you'll get double-padding.
• Layout components must be direct children of <v-app> for the layout system to know about them. Wrapping them in your own div breaks padding.

Grid

Vuetify 3 grid uses <v-container> → <v-row> → <v-col>:

<v-container>
  <v-row>
    <v-col cols="12" md="6">A</v-col>
    <v-col cols="12" md="6">B</v-col>
  </v-row>
</v-container>

• cols defaults to mobile (xs)
• sm / md / lg / xl override at the corresponding breakpoint
• Use <v-container fluid> for full-width pages

Spacing utilities

Margin/padding utility classes follow the pattern {property}{direction}-{size}:

Examples: pa-4 (padding all 16px), mt-2, mx-auto, mb-6.

Responsive helpers

<v-btn class="d-none d-md-flex">desktop only</v-btn>
<v-btn class="d-md-none">mobile only</v-btn>

Or read it programmatically:

<script>
export default {
  computed: {
    isMobile() { return this.$vuetify.display.mobile },
    width()    { return this.$vuetify.display.width },
  },
}
</script>