【解決】Vue.js [Vuetify] Unable to locate target [data-app] エラーの解決方法

Vue.js [Vuetify] Unable to locate target [data-app] エラーの解決方法

はじめに

Vuetifyを使用して”[Vuetify] Unable to locate target [data-app]”というエラーが出ました。

Vuetifyの公式サイトに記載のコードをコピペしただけでは、サンプルのように動かないことがあります。

 

【おすすめ】フロントエンドエンジニアになりたい人の Webプログラミング入門  

解決方法

<v-app></v-app>で要素を囲っているか確認する。

例えば、VuetifyDate pickersを利用する場合


 <template>
 <v-row justify="center">
 <v-date-picker v-model="picker"></v-date-picker>
  </v-row>
 </template>
 <script>
 export default {
   data () {
   return {
    picker: new Date().toISOString().substr(0, 10),
   }
   },
 }
 </script>
 

Vuetify公式のコードをそのままコピペしましたが、このままではうまく動きません。

なので、<v-app></v-app>で要素を囲います。

 
 <template>
  <v-app id="app">
  <v-row justify="center">
   <v-date-picker v-model="picker"></v-date-picker>
  </v-row>
  </v-app>
 </template>
 <script>
 export default {
  data () {
   return {
    picker: new Date().toISOString().substr(0, 10),
   }
  },
 }
 </script>
 

 

Vue-routerを利用している場合は、App.vue<router-view />を囲んであげれば大丈夫です。


 <template>
 <main>
  <v-app id="app">
   <router-view/>
  </v-app>
 </main>
 </template>