VueJS n'est pas rendu

Question

J'essaie ce simple snippet :

main.js :

import Vue from 'vue'
import App from './App'
import Vuetify from 'vuetify'

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    collapseOnScroll: true,
  }),
})

App.vue :

<div id="app">
  <v-app id="inspire">
    <v-card class="overflow-hidden">
      <v-app-bar
        :collapse="!collapseOnScroll"
        :collapse-on-scroll="collapseOnScroll"
        absolute
        color="deep-purple accent-4"
        dark
        scroll-target="#scrolling-techniques-6"
      >
        <v-app-bar-nav-icon></v-app-bar-nav-icon>

        <v-toolbar-title>Collapsing Bar</v-toolbar-title>

        <v-spacer></v-spacer>

        <v-checkbox
          v-model="collapseOnScroll"
          color="white"
          hide-details
        ></v-checkbox>
      </v-app-bar>
      <v-sheet
        id="scrolling-techniques-6"
        class="overflow-y-auto"
        max-height="600"
      >
        <v-container style="height: 1000px;"></v-container>
      </v-sheet>
    </v-card>
  </v-app>
</div>

Mais quand j'ouvre http://localhost:8080/ Je ne vois qu'une page blanche. Rien n'est rendu, bien qu'il n'y ait pas d'erreur sur mes outils de développement et que je ne vois pas d'erreur non plus dans ma console. Quelqu'un peut-il m'aider à résoudre ce problème ?

Answer 1

Le problème est que vous exportez votre composant Root mais ne le rendez pas. Pour le rendre, utilisez cette ligne de code render: h => h(App) . Vue a également besoin de savoir où mont votre instance Vue, donc appelez la méthode $mount et fournir un sélecteur CSS de DOM où l'instance de Vue sera montée.

import Vue from 'vue'
import App from './App
import Vuetify from 'vuetify'

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')