16

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>

4 Answers 4

68

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

5
  • 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 ....
    – user762579
    Jul 30, 2018 at 16:56
  • sometimes it's not enough (not sure why), even when added right under the body: <body> <v-app data-app> <v-content> 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 1, 2019 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 1, 2019 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 2, 2019 at 7: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 minimal reproducible example and asking a dedicated question if creating the mcve does not already make it obvious to you what is actually going on.
    – Sumurai8
    Oct 2, 2019 at 8:11
11

SOLVED

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

<template>
   <v-toolbar height="80px" fixed>
      <v-toolbar-title data-app>
1
  • 10
    Why is that required?
    – Marc
    Mar 24, 2019 at 10:35
11

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>
2
 <v-app> <-- you missing <v-app> wrapping because is rule .... 
      <router-view/>
 </v-app>

hyunki

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, 2020 at 15:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.