How to make the footer the same width as the content using vuetify?

Question

The footer in this code expands the entire window width. I want it to be the same width as the <v-content>

  <v-app>
    <v-navigation-drawer permanent app>
    </v-navigation-drawer>
    <v-content>
      <v-container fluid>
        <router-view></router-view>
      </v-container>
    </v-content>
    <v-footer app>
      <p>&copy;</p>
    </v-footer>
  </v-app>

Answer 1

Here is another working example just add inset to v-footer

<v-app>
    <v-navigation-drawer permanent app>
    </v-navigation-drawer>
    <v-content>
      <v-container fluid>
        <router-view></router-view>
      </v-container>
    </v-content>
    <v-footer inset app>
      <p>&copy;</p>
    </v-footer>
 </v-app>

Answer 2

You shouldn't use the app prop on the <footer> if you want it to be the same width as the content, you should rather put it inside the <v-content>, and then put the absolute prop, just as the following:

<v-app>
  <v-navigation-drawer permanent app>
  </v-navigation-drawer>
  <v-content>
    <v-container fluid>
      <router-view></router-view>
    </v-container>
    <v-footer absolute>
      <p>&copy;</p>
    </v-footer>
  </v-content>
</v-app>

Edit/Approach 2: You can also use the inset prop on the <footer> to make an offset from the navigation drawer, if you want to keep the footer out of the <content>.

<v-app>
  <v-navigation-drawer permanent app>
  </v-navigation-drawer>
  <v-content>
    <v-container fluid>
      <router-view></router-view>
    </v-container>
  </v-content>
  <v-footer inset app>
    <p>&copy;</p>
  </v-footer>
</v-app>