Application

The v-app component is an optional feature that serves as the root layout component as well as providing an easy way to control the theme used at the root level.

In Vuetify, the v-app component is a convenient way to dynamically modify your application’s current theme and provide an entry point for your layouts. This allows you to create truly unique interfaces without the hassle of managing your layout sizing. When an appliction is mounted, each layout child registers itself with the closest layout parent and is then automatically placed in your window.

The order of your layout components will dictate the order in which they are registered, and ultimately placed, within your application. The following example demonstrates how the v-app-bar component takes priority over v-navigation-drawer because of it’s rendering order:

<template>
  <v-app>
    <v-app-bar title="Application"></v-app-bar>

    <v-navigation-drawer>...</v-navigation-drawer>

    <v-main>...</v-main>
  </v-app>
</template>

Rendered Application

If we swap v-app-bar and v-navigation-drawer, the registration order changes and the layout system layers the two components differently.

<template>
  <v-app>
    <v-navigation-drawer>...</v-navigation-drawer>

    <v-app-bar title="Application"></v-app-bar>

    <v-main>...</v-main>
  </v-app>
</template>

Rendered Application

Theme

The v-app component makes it easy to enable one of your application defined themes. By default, Vuetify comes with 2 themes, light and dark. Each one is a collection of various colors used to style the each individual component. Because v-app acts as an interface for theme functionality, you have the ability to change it dynamically within your template.

The following example demonstrates how to use the theme prop to toggle the theme from dark to light.

src/App.vue
<template>
  <v-app :theme="theme">
    <v-app-bar>
      <v-spacer></v-spacer>

      <v-btn
        :prepend-icon="theme === 'light' ? 'mdi-weather-sunny' : 'mdi-weather-night'"
        @click="onClick"
      >Toggle Theme</v-btn>
    </v-app-bar>

    <v-main>
      <v-container>Content area</v-container>
    </v-main>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const theme = ref('light')

  function onClick () {
    theme.value = theme.value === 'light' ? 'dark' : 'light'
  }
</script>

API

ComponentDescription
v-appPrimary Component
v-mainContent area

Layout components

The following components are compatible with the Application layout system:

ComponentDefault locationDefault orientationDescription
v-system-bartophorizontalUsed to similate the system bar on phones and desktop applications
v-app-bartophorizontalTop level application actions and navigation links
v-navigation-drawerstartverticalThe primary component used for application navigation
v-footerbottomhorizontalThe only application component that is not bound to the current layout by default. Must explicity specify the app prop
v-bottom-navigationbottomhorizontalThis component is often used as a replacement for application actions and navigation links on mobile and tablet devices

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page onGitHub