Vuetify issue with v-menu

Question

Vuetify 1.1.8 / Vue 2.5.16

I don\'t understand why I get 2 different behaviors :

1- testing in Codepen.io

html

    &         


        

Answer 1

We can add data-app attribute manually to our root component without wrapping the entire component with <v-app></v-app>. It will look like the following:

<template>
    <div id="app" data-app>
        ....
    </div>
</template>

Answer 2

SOLVED

Need to add data-app attribute in the parent wrapper component

<template>
   <v-toolbar height="80px" fixed>
      <v-toolbar-title data-app>

Answer 3

 <v-app> <-- you missing <v-app> wrapping because is rule .... 
      <router-view/>
 </v-app>

hyunki

Answer 4

As far as I understand, in vuetify you need to wrap your application in <v-app></v-app>. This happens in App.vue or whatever you have set in your main.js as root component. The v-app components sets this data-app attribute.

The documentation says this about it:

Vuetify requires the use of the v-app component. It should wrap your entire application and is the center point for much of the framework functionality including themes. Ensure that you are following the proper markup documented in the Application page.

Source: FAQ: My application does not look correct, retrieved on 2 October 2019