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

    <div id="app">
      <v-app id="inspire">
        <div class="text-xs-center">
          <v-menu offset-y>
            <v-btn
              slot="activator"
              color="primary"
              dark
            >
              <span v-if="this.locale === 'en'">English</span>
              <span v-if="this.locale === 'fr'">Français</span>
              <span v-if="this.locale === 'br'">Português</span>
            </v-btn>
            <v-list>
              <v-list-tile
                v-for="(locale, index) in locales"
                :key="index"
                @click="switchLocale(index)"
              >
                <v-list-tile-title>{{ locale.title }}</v-list-tile-title>
              </v-list-tile>
            </v-list>
          </v-menu>
        </div>
      </v-app>
    </div>

js

    new Vue({
      el: '#app',
      data: () => ({
        locale: 'en',
        locales: [
          { locale: 'en', title: 'English', icon: '@/assets/images/flag_gb_24.png' },
          { locale: 'fr', title: 'Français', icon: '@/assets/images/flag_fr_24.png' },
          { locale: 'br', title: 'Português', icon: '@/assets/images/flag_br_24.png' }
        ]
      }),
       methods: {
        switchLocale: function (index) {
          console.log('switch locale: ', this.locales[index].title)
          this.locale = this.locales[index].locale
        }
      }
    })

is running fine...

BUT once I insert it into a Vue.js component in my app, I get an error :

console

    vuetify.js?ce5b:19387 [Vuetify] Unable to locate target [data-app]

    found in

    ---> <VMenu>
           <VToolbar>
             <Toolbar>
               <App> at src/App.vue
                 <Root>
    consoleWarn @ vuetify.js?ce5b:19387
    initDetach @ vuetify.js?ce5b:16782
    mounted @ vuetify.js?ce5b:16742
    callHook @ vue.runtime.esm.js?2b0e:2917
    insert @ vue.runtime.esm.js?2b0e:4154
    invokeInsertHook @ vue.runtime.esm.js?2b0e:5956
    patch @ vue.runtime.esm.js?2b0e:6175
    Vue._update @ vue.runtime.esm.js?2b0e:2666
    updateComponent @ vue.runtime.esm.js?2b0e:2784
    get @ vue.runtime.esm.js?2b0e:3138
    run @ vue.runtime.esm.js?2b0e:3215
    flushSchedulerQueue @ vue.runtime.esm.js?2b0e:2977
    (anonymous) @ vue.runtime.esm.js?2b0e:1833
    flushCallbacks @ vue.runtime.esm.js?2b0e:1754
    Promise.then (async)
    microTimerFunc @ vue.runtime.esm.js?2b0e:1802
    nextTick @ vue.runtime.esm.js?2b0e:1846
    queueWatcher @ vue.runtime.esm.js?2b0e:3064
    update @ vue.runtime.esm.js?2b0e:3205
    Vue.$forceUpdate @ vue.runtime.esm.js?2b0e:2687
    (anonymous) @ index.js?6435:233
    (anonymous) @ index.js?6435:231
    (anonymous) @ index.js?6435:116
    (anonymous) @ Toolbar.vue?be73:29
    ./src/components/Shared/Toolbar.vue @ app.js:2759
    __webpack_require__ @ app.js:768
    hotApply @ app.js:687
    (anonymous) @ app.js:344
    Promise.then (async)
    hotUpdateDownloaded @ app.js:343
    hotAddUpdateChunk @ app.js:319
    webpackHotUpdateCallback @ app.js:37
    (anonymous) @ app.a888e56db407050b2768.hot-update.js:1
    Toolbar.vue?9799:67 TOOLBAR mounted locale:  en

Toolbar.vue

       <template>
          <v-toolbar height="80px" fixed>
            <v-toolbar-title>
              <img src="@/assets/images/app_logo.png" alt="">
              <v-menu offset-y>
                <v-btn
                  slot="activator"
                  color="primary"
                  dark
                >
                  <span v-if="this.locale === 'en'">English</span>
                  <span v-if="this.locale === 'fr'">Français</span>
                  <span v-if="this.locale === 'br'">Português</span>
                </v-btn>
                <v-list>
                  <v-list-tile
                    v-for="(locale, index) in locales"
                    :key="index"
                    @click="switchLocale(index)"
                  >
                    <v-list-tile-title>{{ locale.title }}</v-list-tile-title>
                  </v-list-tile>
                </v-list>
              </v-menu>
            </v-toolbar-title>
            <v-spacer></v-spacer>
            <v-toolbar-items>
              ....
            </v-toolbar-items>
       </v-toolbar>
    </template>

    <script>
    export default {
      name: 'Toolbar',
      props: ['appName'],
      data () {
        return {
          menuItems: {
            home: { icon: 'home', title: 'Home', link: '/' },
            about: { icon: 'info', title: 'About', link: '/about' }
          },
          locale: 'en',
          locales: [
            { locale: 'en', title: 'English', icon: '@/assets/images/flag_gb_24.png' },
            { locale: 'fr', title: 'Français', icon: '@/assets/images/flag_fr_24.png' },
            { locale: 'br', title: 'Português', icon: '@/assets/images/flag_br_24.png' }
          ]
        }
      },
      methods: {
        switchLocale: function (index) {
          console.log('switch locale: ', this.locales[index].title)
          this.locale = this.locales[index].locale
        }
      },
      mounted () {
        console.log('TOOLBAR mounted locale: ', this.locale)
      }
    }
    </script>

Sumurai8 · Accepted Answer · 2019-10-02T08:10:52.187

67

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

edited Oct 02 '19 at 08:10

answered Jul 30 '18 at 16:53

Sumurai8

20,333
11
66
100

Yeah ! thanks a lot ... forgot it ... I am setting up a demo project based on my own project , so I reset all the code from scratch ( w copy/paste of pieces of codes .. forgot to initialize the v-app .... – Jul 30 '18 at 16:56
sometimes it's not enough (not sure why), even when added right under the body: I had to add "data-app" attibute to the "v-app" or some div inside v-app. Really weird. I'm using a webpack (not vue-cli) - maybe it's related. Because it's working as expected (without "data-app") when using vue-cli (`vue create ...` with `vue add vuetify`) – Roman86 Oct 01 '19 at 14:12
@Roman86 Make sure that your project with webpack configuration does include a recent version of vuetify and that you are not using some odd combination of webpack plugins that strips `data-app` from the original component. Also make sure that `v-app` is registered by vuetify and not some other library you may have included or even a component you made yourself. – Sumurai8 Oct 01 '19 at 17:42
hi @Samurai8! Thanks for your reply. I use "vuetify": "^2.0.0", "vuetify-loader": "^1.2.2", also "data-app" is not found anywhere in code except vuetify – Roman86 Oct 02 '19 at 07:33
1

Well, that looks pretty recent. I don't think I can provide much help without a way to reproduce it. I would suggest creating a [mcve] and asking a dedicated question if creating the mcve does not already make it obvious to you what is actually going on. – Sumurai8 Oct 02 '19 at 08:11

score 11 · Answer 2 · answered Jul 30 '18 at 15:29

11

SOLVED

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

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

answered Jul 30 '18 at 15:29

10

Why is that required? – Marc Mar 24 '19 at 10:35

score 10 · Answer 3 · answered Apr 29 '20 at 11:19

10

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>

answered Apr 29 '20 at 11:19

Rijo

2,568
1
22
30

score 2 · Answer 4 · answered Jan 25 '20 at 13:16

2

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

hyunki

answered Jan 25 '20 at 13:16

test

21
1

1

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value – byaruhaf Jan 25 '20 at 15:26

Vuetify issue with v-menu

4 Answers4

Linked