Menu in vuetify is wrongly offset to the right

Question

Trying to work with menus in vuetify, but my menu is wrongly offset to the right.

This is the code for populating the component:

<template>
  <v-container fluid grid-list-md>
    <v-layout row>
      <v-flex xs1></v-flex>
      <v-flex xs10>
        <v-layout class="background space-top" row wrap align-baseline>
          <v-flex xs4>
            <div class="header">IMAGE QUEUES</div>
          </v-flex>
          <v-flex xs4>
            <v-menu origin="center center"
                  transition="scale-transition"
                  bottom>
              <v-btn slot="activator" dark>Menu</v-btn>
              <v-list>
                <v-list-tile v-for="(item, i) in menuItems" :key="i" @click="">
                  <v-list-tile-title>{{ item.title }}</v-list-tile-title>
                </v-list-tile>
              </v-list>
            </v-menu>
          </v-flex>
        </v-layout row wrap>
          <v-layout class="background space-top" v-if="loaded" row wrap fill-height>
            <v-flex>
            </v-flex>
          </v-layout>
      </v-flex>
      <v-flex xs1></v-flex>
    </v-layout>
  </v-container>
</template>

Any clues or input is highly appreciated.

BR Rune

Answer 1

Wrap your app inside v-app component

In order for your application to work properly, you must wrap it in a v-app component. This component is used for dynamically managing your content area and is the mounting point for many components.