CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
Jack022
Jack022

Reputation: 1257

VueJS not being rendered

I'm trying this 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>

But when I open http://localhost:8080/ I only see a blank page. Nothing is being rendered, although there is no error on my dev tools and I don't see any error either in my console. Can someone help me fix this issue?

Upvotes: 2

Views: 541

Answers (1)

Andrew Vasylchuk
Andrew Vasylchuk

Reputation: 4779

The problem is that you export your root component but do not render it. To render it use this line of code render: h => h(App). Also Vue need to know where to mount your Vue instance, so call method $mount, and provide CSS selector of DOM element, where Vue instance will be mounted.

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

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

Upvotes: 3

Related Questions