【解決】Vue.js [Vuetify] Unable to locate target [data-app] エラーの解決方法
はじめに
Vuetifyを使用して”[Vuetify] Unable to locate target [data-app]”というエラーが出ました。
Vuetifyの公式サイトに記載のコードをコピペしただけでは、サンプルのように動かないことがあります。
【おすすめ】フロントエンドエンジニアになりたい人の Webプログラミング入門
解決方法
<v-app></v-app>で要素を囲っているか確認する。
例えば、VuetifyのDate 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>